Designs

Css Designs

Css Green_Simple

Designer: Elegant-Designs
Erstellungs Datum: 1.07.2011

Text über Design :

<div id="container"> <div id="header"> <h1>Deine Homepage</h1> 	 </div><div id="content"></div>  <div id="sidebar"> <ul> <li> <a href="#" _fcksavedurl="#">Home</a></li> <li> <a href="#" _fcksavedurl="#">kontakt</a></li> <li> <a href="#" _fcksavedurl="#">Gästebuch</a></li> <li> <a href="#" _fcksavedurl="#">Link</a></li> <li> <a href="#" _fcksavedurl="#">Link</a></li> </ul> <div class="widget"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae odio vitae erat imperdiet vehicula.</div> <div class="widget">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae odio vitae erat imperdiet vehicula. </div> <div class="widget"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae odio vitae erat imperdiet vehicula.</div> <div class="widget">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae odio vitae erat imperdiet vehicula. </div> <div class="widget"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae odio vitae erat imperdiet vehicula.</div> <p> </p> </div> <div id="footer"> Design by <a href="http://www.TheDesignerpage.de.tl/" _fcksavedurl="http://www.TheDesignerpage.de.tl/">TheDesignerpage.de.tl/</a></div> </div>

CSS-Code ohne Style Tags:

#extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} #nav{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;}  body { 	background:url(https://img.webme.com/pic/d/designerpage-test/page_bg.jpg) top left repeat-x #e2e2e2; 	margin:0; 	padding:0; 	font-family:arial,  helvetica, sans-serif; 	font-size:9pt; 	color:#333; }  #container { 	width:760px; 	margin:20px auto 20px auto; 	border:1px solid #000; 	background:#fff; }  #header { 	height:80px; 	background:url(https://img.webme.com/pic/d/designerpage-test/header_bg.jpg) top left repeat-x #a0da2b; 	border-bottom:10px solid #77a13d; }  #header h1 { 	color:#fff; 	font-size:22pt; 	margin:0; 	padding:40px 10px 10px 10px; }  #content { position: absolute; left: 50%; top:227px; margin-left: -160px; width: 505px; padding:10px; color: #000000; font-size:13px; font-family: Arial; background-color:#77a13d; background-image: none; border: 1px solid #ccc; height : 499px; overflow:auto; }  #photos { 	width:428px; 	height:224px; 	margin:10px auto 10px auto; 	position:relative; 	padding:10px; 	background:#f2f7e9; 	border-top:1px solid #ccc; 	border-bottom:1px solid #ccc; }  .imgbox { 	width:75px; 	height:75px; 	border:1px solid #77A13D; 	background:#f1f1f1; 	margin:15px; 	float:left; 	display:inline; }  #sidebar { 	width:200px; 	padding:10px; 	float:left; 	margin:0; }  #sidebar ul { 	margin:0; 	padding:0; 	border-bottom:1px solid #ccc; } 	   #sidebar ul li { 	margin:0; 	padding:0; 	list-style:none; 	border:1px solid #ccc; 	border-bottom:none; }  #sidebar ul li a { 	display:block; 	padding:3px; 	width:192px; 	background:url(https://img.webme.com/pic/d/designerpage-test/li-off.jpg) top left no-repeat #f2f7e9; 	color:#060; 	text-indent:30px; 	text-decoration:none; }  #sidebar ul li a:hover { 	background:url(https://img.webme.com/pic/d/designerpage-test/li-on.jpg) top left no-repeat #f2f7e9; } .widget { 	height:60px; 	border:1px solid #ccc; 	background:#f5f5f5; 	padding:5px; 	text-align:center; 	margin:10px 0 0 0; 	font-size:8pt; }	  #footer { 	clear:both; 	border-top:1px solid #000; 	background:#77a13d; 	padding:10px; 	color:#fff; 	font-size:8pt; 	text-align:center; }  a { 	color:#060; 	font-weight:bold; }  a:hover { 	background:#FFFFDD; }

Css Carbon_Black

Designer: Elegant-Designs
Erstellungs Datum: 3.07.2011

Text über dem Design:

<div id="container"> <div id="header"> 		<div id="slogan"> 			 </div> 		<div id="logo"> 		</div> 	</div> 	<div id="menu"> 		<ul> 			<li> 				<a href="#" _fcksavedurl="#">Home</a></li> 			<li> 				<a href="#" _fcksavedurl="#">Kontakt</a></li> 			<li> 				<a href="#" _fcksavedurl="#">Services</a></li> 			<li> 				<a href="#" _fcksavedurl="#">Gästebuch</a></li> 		</ul> 	</div> 	<div id="main"> 		<div id="sidebar"> 			<h3> 				Sidebar</h3> 			<ul> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 			</ul> 			<h3> 				Sidebar</h3> 			<ul> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 			</ul> 			<h3> 				Sidebar</h3> 			<ul> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 				<li> 					<a href="#" _fcksavedurl="#">Sidebar item</a></li> 			</ul> 		</div> 		<div id="text"> 			 </div> 	</div> <div id="footer"> 		<div id="footer_left"> 			© Copyright 2011 Your Website</div> 		<div id="footer_right"> Design by <a href="http://Elegant-designs.de.tl" _fcksavedurl="http://Elegant-designs.de.tl">Elegant-designs.de.tl</a></div> 	</div>

CSS-Code ohne Style Tags:

#extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} #nav{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;}  table[height="102"] {     position: absolute;     top: 580px;     left: 50%;     margin-left: -480px;     }   body  {padding:50px 100px; margin:0; font-family:Tahoma, Geneva, sans-serif; background-image:url(https://img.webme.com/pic/l/liveandcreative-pics/body_bg.png);}  #container {background-color:#FFFFFF; padding:10px;}  #header {height:150px; background-image:url(https://img.webme.com/pic/l/liveandcreative-pics/header_bg.png);} #logo {font-size:30px; background:url(https://img.webme.com/pic/l/liveandcreative-pics/header.png) no-repeat; height:100px; padding:50px 0 0 30px;} #logo a {color:#FFFFFF; text-decoration:none;} #slogan {float:right; font-size:18px; color:#FFFFFF; padding:60px 30px 0 0;}  #menu {height:40px; background-image:url(https://img.webme.com/pic/l/liveandcreative-pics/menu_bg.png); margin-top:5px;} #menu ul {margin:0; padding:0;} #menu li {list-style:none; float:left; background:url(https://img.webme.com/pic/l/liveandcreative-pics/menu_border.png) right no-repeat;} #menu a {float:left; height:20px; padding:10px 30px; color:#FFFFFF; font-size:15px; font-weight:bold; text-decoration:none; font-family:Arial, Helvetica, sans-serif;} #menu a:hover {background:url(https://img.webme.com/pic/l/liveandcreative-pics/menu_border.png);}  #content  { position: absolute;  left: 50%;  top:260px;  margin-left:-602px;  width: 955px;  padding:10px;  color: #000000;  font-size:13px;  font-family: Arial;  background-color:#transparent;  background-image: none;  border: px solid #5F5F5F;  height: 300px;  overflow:auto; }   #main {float:left; width:100%; margin:5px 0; background:url(https://img.webme.com/pic/l/liveandcreative-pics/main_bg.png) right repeat-y; color:#111111; font-size:11px;} #main a {color:#333333;} #main a:hover {color:#000000;} #main br {line-height:8px;}  #sidebar {width:160px; float:right; padding:0 30px 30px 30px; margin-top:10px;} #sidebar h3 {font-size:17px; font-weight:normal; margin:20px 0 5px 0;} #sidebar ul {margin:0; padding:0; border-top:1px solid #ECECEC;} #sidebar li {list-style:none; border-bottom:1px solid #ECECEC;} #sidebar li a {color:#111111; text-decoration:none; padding:3px; display:block;} #sidebar li a:hover {background-color:#ECECEC;}  #text {line-height:14px; margin-right:225px; padding:10px 30px 30px 30px;} #text h1 {font-size:22px; font-weight:normal; margin:20px 0 10px 0;} #text h2 {font-size:19px; font-weight:normal; margin:20px 0 10px 0;} #text ol, #text ul {padding:0; margin:8px 0;} #text li {margin-left:40px;}  #footer {height:40px; color:#FFFFFF; font-size:11px; background-image:url(https://img.webme.com/pic/l/liveandcreative-pics/footer_bg.png); clear:both;} #footer a {color:#FFFFFF;} #footer a:hover {color:#DFDFDF;} #footer_left {float:left; padding:13px 0 0 30px;} #footer_right {float:right; padding:13px 30px 0 0;}

IceBlue_Orange

Designer: Elegant-Designs
Erstellungs Datum: 29.06.2011

Titel der 1. Extra-Box (rechts):
News

Inhalt der 1. Extra-Box (rechts):

<table style="width:160px;" border="0"> <tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr><tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr><tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr><tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr> </table>

Titel der 3. rechten Box:
Vorlagen

Inhalt der 3. rechten Box:

<table style="width:160px;" border="0"> <tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr><tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr><tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr><tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr> </table>

Titel der 4. rechten Box:
Partner

Inhalt der 4. Extra-Box (rechts):

<table style="width:160px;" border="0"> <tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr><tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr><tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr><tr> <td class="nav"><a href="Hier Zielseite.htm" _fcksavedurl="Hier Zielseite.htm"><img src="Button-URL" _fcksavedurl="Button-URL" border="0">NAME</a></td> </tr> </table>

Text über dem Design:

<div align="center"> <table border="0" width="70%" id="table1"> <tr> <td>  <style type="text/css"> <!-- 

td[height="102"] {
position:absolute;
left:50%;
margin-left:-376px; } 

body {
background-color:#343434;
background-image: none;
background-repeat: repeat;
text-align:center; }

/* Schriftfarbe + Größe auf allen Seiten */
td {
color:#000000;
font-size:14px;
text-align:left;
font-family: arial,verdana; }

/* Linkfarben + Größen auf Seiten */
a:link {
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none; }

/* besuchte Links */
a:visited {
color:#800000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}

/*Hover-Effekt bei Links*/
a:hover{
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}

/* Header oben */
td.edit_header_full {
background-color:#123;
background-image:url(Dein-Header-Bild);
background-repeat:no-repeat;
border:1px solid #000000; }

/* Titel im Header entfernen */
td.headline {visibility:hidden;}

/* Titel über Navigation */
td.nav_heading {
color:#FFFFFF;
font-size:13px;
font-family:verdana;
text-align:left;
height:29px;
background-color:##FF4000;
background-image:url(https://img.webme.com/pic/l/liveandcreative-designs/icebluebutton18.png);
border:1px solid #000000; }

/* Navigation Buttons */
td.nav {
background-color:#123;
background-image:  none;
border:1px solid #000000; }

/* Hover-Effekt Navigation Buttons */
td.nav:hover {
background-color:#;
background-image:url(https://img.webme.com/pic/l/liveandcreative-designs/icebluebutton18.png);
border:1px solid #000000; }


/* Textlinks in Navigation */
td.nav a {
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Hover-Effekt Textlinks */
td.nav a:hover{
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Bild unter Navigation entfernt */
td.edit_below_nav {display:none;}

/* Feld hinter Navigation / Kein Scrollbalken mehr bei Seiten mit wenig Inhalt */
td.edit_main_tr {
height: 50% !important; }

/* Hintergrund Navigation */
td.edit_navi_headbg {
height: 50%;
background-color:#XXXXXX ;
background-image: none;
border: px solid #000000; }

/* Balken über Textfeld */
td.edit_content_top {
height:29px;
background-color:#000000;
background-image:url(https://img.webme.com/pic/l/liveandcreative-designs/icebluebutton18.png);
border:1px solid #000000; }

/* Seitentitel über Textfeld */
td.headline2 {
color:#FFFFFF;
font-size:13px;
font-family:arial,verdana;
text-align:left; }

/* Textfeld */
td.edit_content {
padding-top:15px;
padding-bottom:15px;
background-color:#FFFFFF;
background-image:  none;
border:1px solid #000000; }

/* Linke Spalte im Textfeld */
td.edit_content_left_spacer {
background-color:#;
background-image: none; }

/* Rechte Spalte im Textfeld */
td.edit_content_right_spacer {
background-color:#;
background-image: none; }

/* Erste Balken unter Textfeld */
td.edit_content_bottom {
height:29px;
background-color:#000000;
background-image: url(https://img.webme.com/pic/l/liveandcreative-designs/icebluebutton18.png);
border:1px solid #000000; }

/* Zweiter Balken unter Textfeld (mit Counter) */
td.edit_content_bottom2 {
background-color:#XXXXXX ;
background-image:  none;
border:0px solid #000000; }

/* Counter / Besucherzähler */
td.edit_content_bottom2_counter {
font-family:arial,verdana;
font-size:12px;
background-color:#c9c9c9;
border:1px solid #000000; }

/* große Feld unter Textfeld */
td.edit_rechts_cbg {
background-color:#XXXXXX;
background-image:  none;
border:0px solid #000000; }

/* Streifen rechts vom Design entfernt mit */
td.edit_rechts_sbg {display:none;}

/* Titel über rechter Box */
td.sidebar_heading {
color:#FFFFFF;
font-size:13px;
font-family:verdana ;
text-align:left;
height:29px;
background-color:#000000;
background-image: url(https://img.webme.com/pic/l/liveandcreative-designs/icebluebutton18.png);
border:1px solid #000000; }

/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#FFFFFF;
font-size:14px;
font-family.arial,verdana;
text-align:left;
background-color:#123;
background-image:  none;
border:1px solid #000000; }

/* Abschluß unter Boxen 1 bis 5 entfernt mit */
td.edit_rb_footer{display:none; }

/* Hintergrund unter rechten Boxen */
td.edit_rechts_bottom {
background-color:# ;
background-image:  none;
border:0px solid #000000; }

--> </style>

Hinweis unter dem Inhalts-Bereich (z.B. Copyright):
Bitte nicht löschen ! ! !

Design By <a href="http://elegant-designs.de.tl/" _fcksavedurl="http://elegant-designs.de.tl/">Elegant-Designs.de.tl/</a>

Design_Blue

Designer: Elegant-Designs
Erstellungs Datum: 29.06.2011

Inhalt der 1. Extra-Box (rechts):

<ul style="list-style-type:disc;"> <li>Dein Text 1</li> <li>Dein Text 2</li> <li>Dein Text 3</li> <li>Dein Text 4</li> <li>Dein Text 5</li> </ul>

Text über dem Design:

<div align="center"> <table border="0" width="70%" id="table1"> <tr> <td>  <style type="text/css"> <!--

/* Werbung zentrieren */
table[height="102"] {
  margin: auto; }

/* Hintergrund hinter Design */
body {
background-color:#343434;
background-image: none;
background-repeat: repeat;
text-align:center; }

/* Schriftfarbe + Größe auf allen Seiten */
td {
color:#000000;
font-size:14px;
text-align:left;
font-family: arial,verdana; }

/* Linkfarben + Größen auf Seiten */
a:link {
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none; }

/* besuchte Links */
a:visited {
color:#800000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}

/*Hover-Effekt bei Links*/
a:hover{
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}

/* Header oben */
td.edit_header_full {
background-color:#FFFFFF;
background-image:url(https://img.webme.com/pic/l/liveandcreative-designs/headerblue.png);
background-repeat:no-repeat;
border:1px solid #000000; }

/* Titel im Header entfernen */
td.headline {visibility:hidden;}

/* Titel über Navigation */
td.nav_heading {
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana;
text-align:center;
height:29px;
background-color:#000000;
background-image:url(https://img.webme.com/pic/l/liveandcreative-designs/icebluebutton19.png);
border:1px solid #000000; }

/* Navigation Buttons */
td.nav {
background-color:#F2F2F2;
background-image:  none;
border:1px solid #000000; }

/* Hover-Effekt Navigation Buttons */
td.nav:hover {
background-color:#;
background-image: none;
border:1px solid #000000; }

/* Textlinks in Navigation */
td.nav a {
color:#000000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Hover-Effekt Textlinks */
td.nav a:hover{
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Bild unter Navigation entfernt */
td.edit_below_nav {display:none;}

/* Feld hinter Navigation / Kein Scrollbalken mehr bei Seiten mit wenig Inhalt */
td.edit_main_tr {
height: 50% !important; }

/* Hintergrund Navigation */
td.edit_navi_headbg {
height: 50%;
background-color:#XXXXXX ;
background-image: none;
border:0px solid #000000; }

/* Balken über Textfeld */
td.edit_content_top {
height:29px;
background-color:#000000;
background-image:url(https://img.webme.com/pic/l/liveandcreative-designs/icebluebalken.png);
border:1px solid #000000; }

/* Seitentitel über Textfeld */
td.headline2 {
color:#FFFFFF;
font-size:12px;
font-family:arial,verdana;
text-align:left; }

/* Textfeld */
td.edit_content {
padding-top:15px;
padding-bottom:15px;
background-color:#FFFFFF;
background-image:  none;
border:1px solid #000000; }

/* Linke Spalte im Textfeld */
td.edit_content_left_spacer {
background-color:#;
background-image: none; }

/* Rechte Spalte im Textfeld */
td.edit_content_right_spacer {
background-color:#;
background-image: none; }

/* Erste Balken unter Textfeld */
td.edit_content_bottom {
height:29px;
background-color:#000000;
background-image: url(https://img.webme.com/pic/l/liveandcreative-designs/icebluebalken.png);
border:1px solid #000000; }

/* Zweiter Balken unter Textfeld (mit Counter) */
td.edit_content_bottom2 {
background-color:#XXXXXX ;
background-image:  none;
border:0px solid #000000; }

/* Counter / Besucherzähler */
td.edit_content_bottom2_counter {
font-family:arial,verdana;
font-size:12px;
background-color:#c9c9c9;
border:1px solid #000000; }

/* große Feld unter Textfeld */
td.edit_rechts_cbg {
background-color:#XXXXXX;
background-image:  none;
border:0px solid #000000; }

/* Streifen rechts vom Design entfernt mit */
td.edit_rechts_sbg {display:none;}

/* Titel über rechter Box */
td.sidebar_heading {
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana ;
text-align:center;
height:29px;
background-color:#000000;
background-image: url(https://img.webme.com/pic/l/liveandcreative-designs/icebluebalken.png);
border:1px solid #000000; }

/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080;
font-size:14px;
font-family.arial,verdana;
text-align:left;
background-color:#F2F2F2;
background-image:  none;
border:1px solid #000000; }

/* Abschluß unter Boxen 1 bis 5 entfernt mit */
td.edit_rb_footer{display:none; }

/* Hintergrund unter rechten Boxen */
td.edit_rechts_bottom {
background-color:#XXXXXX ;
background-image:  none;
border:0px solid #000000; }

--> </style>

Text unter dem Design:

</td> </tr> </table> </div>

Hinweis unter dem Inhalts-Bereich (z.B. Copyright):
Bitte nicht löschen ! ! !

Design By <a href="http://elegant-designs.de.tl/" _fcksavedurl="http://elegant-designs.de.tl/">Elegant-Designs.de.tl/</a>

News

Menü

Vorlagen

Partner