İddaaScholls.tr.gg

İddaa' da Güvenilir Kalite !

Css-Tasarim

Oyun Tasarımı

Tasarimin Üzerine

<div id="containr">

<div id="logo"><a href="#">Css Tasarimlar</a></div>
<center>
<a href="http://www.senoynat.tr.gg" title="Ana Sayfa"><img border="0" src="http://img189.imageshack.us/img189/1738/anasayfau.png" alt="" /></a> <a href="http://www.3doyuna.tr.gg/Macera.htm" title="Macera Oyunları"><img border="0" src="http://img195.imageshack.us/img195/7049/maceram.png" alt="" /></a> <a href="http://www.3doyuna.tr.gg/Yar%26%23305%3B%26%23351%3B.htm" id="Y" title="Yarış Oyunları"><img border="0" src="http://img209.imageshack.us/img209/7204/yar.png" alt="" /></a> <a href="http://www.3doyuna.tr.gg/Yetenek.htm" title="Yetenek Oyunları"><img border="0" src="http://img44.imageshack.us/img44/6158/yetenek.png" alt="" /></a> <a href="http://www.3doyuna.tr.gg/Spor.htm" title="Spor Oyunları"><img border="0" src="http://img13.imageshack.us/img13/3061/sporx.png" alt="" /></a> <a href="http://www.3doyuna.tr.gg/Oyun-Ara.htm" title="Oyun Ara"><img border="0" src="http://img20.imageshack.us/img20/2670/ara.png" alt="" /></a></center>


<div id="main">
<div id="sidebar">
<h2>İstediğini Yaz</h2>
<table border="0" width="250" id="table1" height="151">
<tr>
<td background="https://img.webme.com/pic/3/3doyuna/yanyenioyun.png">
Yeni Eklenen Oyunlar</td>
</tr>
<tr>
<td bgcolor="#999999" height="125">
Yeni Eklenen Oyunlar Buraya<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </td>
</tr>
</table>
</br>
<table border="0" width="250" id="table1" height="132">
<tr>
<td background="https://img.webme.com/pic/3/3doyuna/yanpopuler.png">
Popüler Oyunlar</td>
</tr>
<tr>
<td bgcolor="#FFCC99" height="98">
Popüler Oyunlar Buraya<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </td>
</tr>
</table></br>
<table border="0" width="250" id="table1" height="147">
<tr>
<td background="https://img.webme.com/pic/3/3doyuna/yanbizimsectiklerimiz.png">
Bizim Seçtiklerimiz</td>
</tr>
<tr>
<td bgcolor="#339966" height="110">
<p> </p>
<p><center></center><table border="0" width="185" id="table1">
<tr>
<td width="60">
<a href="http://senoynat.tr.gg">
<img border="0" src="http://www.3doyun.net/dcr/img/16.jpg" width="60" height="50"></a></td>
<td><font color="#ffffff">3d Oyun > Yarış</font><br>
<font color="#ff0000">Çılgın Yarış</font></td>
</tr>
<tr>
<td width="60">
<a href="http://www.senoynat/">
<img border="0" src="http://www.3doyunlar.net/oyunlar_3doyunlar.net/resim/_kar-kaykayi-ac81e-k-www.3doyunlar.net.gif" width="60" height="50"></a></td>
<td><font color="#ffffff">3d Oyun > Macera</font><br>
<font color="#ff0000">Hızlı Yarış</font></td>
</tr>
<tr>
<td width="60">
<a href="http://www.senoynat.tr.gg/">
<img border="0" src="http://www.3doyunlar.net/oyunlar_3doyunlar.net/resim/_kar-kaykayi-ac81e-k-www.3doyunlar.net.gif" width="60" height="50"></a></td>
<td><font color="#ffffff">3d Oyun > Macera</font><br>
<font color="#ff0000">Hızlı Yarış</font></td>
</tr>
<tr>
<td width="60">
<a href="http://www.3doyuna.tr.gg/">
<img border="0" src="http://www.3doyunlar.net/oyunlar_3doyunlar.net/resim/_kar-kaykayi-ac81e-k-www.3doyunlar.net.gif" width="60" height="50"></a></td>
<td><font color="#ffffff">3d Oyun > Macera</font><br>
<font color="#ff0000">Hızlı Yarış</font></td>
</tr>
</table></center>
<p> </td>
</tr>
</table>
</div>
<div id="text">
<font face="Comic Sans MS" color="#FF3300" size="4">Site Adı > Css Tasarimlar
</font>

Tasarimin ALtına

Css Kod Bölümüne

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
html {background:url(http://capptainn.googlepages.com/body.gif);}
body {margin:0; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif; background:url(http://capptainn.googlepages.com/body_bckg.gif) repeat-x;}
a {color:#EE4400; text-decoration:none;}
a:hover {text-decoration:underline;}
#containr {background:url(http://img257.imageshack.us/img257/6064/mainbckgcopy.png) center top no-repeat; width:1000px; margin:0 auto;}
#logo {font-size:24px; font-family:"Impact", "Tahoma", Arial, "Geneva", sans-serif; padding:40px 100px 70px 210px;}
#logo a {color:#FFFFFF; text-decoration:none; text-transform:uppercase;}
#menu {height:40px; text-align:center;}
#menu a {color:#B02802; font-size:14px; font-weight:bold; text-decoration:none; margin:0 20px; text-transform:lowercase;}
#menu a:hover {color:#000000;}
#main {margin:0 110px; float:left; background-color:#FFFFFF; min-height:350px; display:inline;}
#text {margin:20px 220px 0 40px;}
#text ul {padding:0; margin:10px 0 10px 40px;}
#text li {list-style:none; padding-left:15px; background:url(http://capptainn.googlepages.com/li.gif) no-repeat 0px 6px;}
h1 {margin:20px 0 0 0; text-transform:uppercase; font-family:"Impact", "Tahoma", Arial, "Geneva", sans-serif; font-size:22px; font-weight:normal;}
#text p {margin:10px 0;}
#sidebar {float:right; padding:20px 30px 0 30px; width:220px;}
#sidebar h2 {font-family:"Impact", "Tahoma", Arial, "Geneva", sans-serif; margin:0 0 20px 0; text-transform:uppercase; font-size:18px; font-weight:normal;}
#sidebar ul {margin:0; padding:0;}
#sidebar li {list-style:none; border-bottom:1px solid #ebebeb; padding:3px 2px;}
#sidebar li:hover {background-color:#f3f3f3;}
#sidebar a {text-decoration:none;}
#footer {padding:0 110px; height:169px; clear:both; background:url(http://capptainn.googlepages.com/footer_bckg.jpg) center top no-repeat;}
#menu_footer {color:#7A2200; font-size:11px; padding:40px 0 0 30px;}
#menu_footer a {color:#7A2200; text-transform:lowercase;}
#left_footer {float:left; padding:60px 0 0 100px; color:#FFFFFF; font-size:12px;}
#left_footer a {color:#FFFFFF;}
#right_footer {float:right; padding:60px 100px 0 0; color:#FFFFFF; font-size:12px;}
#right_footer a {color:#FFFFFF;}

Süper Mario !

Tasarımın Üstündeki Yazı

CSS Kode Bölümü

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} #Header_oben { height: 160px; width: 921px; background: ; background-image:url(https://img.webme.com/pic/r/razor-designs/marioheader.png); color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left; position:absolute;left:45px;top:25px;} body {background-image:url(https://img.webme.com/pic/r/razor-designs/399765159_67c524b29a_b.jpg);background-position:;} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 5px; padding-left: 0px text-decoration: none; width: 80px; height: 25px; background-image: none; background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 80px; height: 25px; background-image:url(hover); background-color:} * { padding: 0; margin: 0; } #Design { margin: 0 auto; width: 922px; } #nav_container { width: 160px; height: 370px; background: ; background-image:url(https://img.webme.com/pic/r/razor-designs/hahahahahahaa.png); color: ; border: 1px solid #0000E1; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; position:absolute;left:785px;top:180px;} #content { height: 370px; width: 540px; background:; background-image:url(https://img.webme.com/pic/r/razor-designs/hahahahahahaa.png); color: #ffffff; border: 1px solid #0000E1; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; position:absolute;left:45px;top:180px;} #sidebar_container { height: 370px; width: 100px; background: ; background-image:url(https://img.webme.com/pic/r/razor-designs/backgroundsidebar.png); color:#ffffff ; border: 1px solid #0000E1; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; position:absolute;left:630px;top:180px;} #counter{display: none;}

Tasarımın Üstüne

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <style type="text/css"> </style> <div id="container"> <div id="header"></div> <div id="menu"> <ul> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">Home</a></li> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">Descargas</a></li> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">Miembros</a></li> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">Servicios</a></li> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">Links</a></li> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">Contacto</a></li> </ul> <h1>Tu Sitio Web</h1> <h2>Equipo roster</h2> </div> <div id="main"> <div id="content"> <br> <div id="right"> <img src="http://img9.xooimage.com/files/6/1/c/member3-b6abe4.gif" _fcksavedurl="http://img9.xooimage.com/files/6/1/c/member3-b6abe4.gif"><img src="http://img7.xooimage.com/files/4/3/2/member4-b6abff.gif" _fcksavedurl="http://img7.xooimage.com/files/4/3/2/member4-b6abff.gif"><br><img src="http://img9.xooimage.com/files/2/e/c/member1-b6ab78.gif" _fcksavedurl="http://img9.xooimage.com/files/2/e/c/member1-b6ab78.gif"><img src="http://img5.xooimage.com/files/1/d/a/member2-b6abb7.gif" _fcksavedurl="http://img5.xooimage.com/files/1/d/a/member2-b6abb7.gif"> <br> </div> <div id="left"> </div> </div> </div>

Tasarımın Altına

<div id="footer"> <br /><br /> <ul> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">home</a></li> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">about me</a></li> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">members</a></li> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">services</a></li> <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">links</a></li> <li class="lastchild"><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">contact</a></li> </ul> <span>© Tu web 2009 | Designed by <li><a href="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com" _fcksavedurl="http://www.freewebsitetemplates.com">freewebsitetemplates</a></li> | Adapted by <li><a href="http://www.team-ayudamaster.es.tl" _fcksavedurl="http://www.team-ayudamaster.es.tl" _fcksavedurl="http://sitene-kod-ekle.tr.gg">sitene-kod-ekle</a></li> | All rights reserved. </span> </div> </div> <span id="footer-right"> <a href="index.html" _fcksavedurl="index.html" _fcksavedurl="index.html"></a> <a href="index.html" _fcksavedurl="index.html" _fcksavedurl="index.html"></a> <a href="index.html" _fcksavedurl="index.html" _fcksavedurl="index.html"></a> </span> </div>

CSS Koduna

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} body { background-image:url(http://img1.xooimage.com/files/a/a/9/background-b6aae5.gif); color: #000000; font-family: Arial, Helvetica, sans-serif, Verdana; font-size: 12px; margin: 0px; padding: 0px; } * {margin: 0px;padding: 0px;} .clear{clear:both;} #container { margin: 0px auto; text-align: left; width: 780px; } a { color: #000000; font-family: Arial, Helvetica, sans-serif, Verdana; font-size: 12px; } /********************** Header ***************************/ #header { margin: 0px 0px 0px 0px; background-image:url(http://img9.xooimage.com/files/3/c/5/header-b6ab0e.jpg); background-repeat:no-repeat; width:768px; height:262px; } #menu { position:relative; background-image:url(http://img7.xooimage.com/files/a/c/3/menu-b6ab25.jpg); background-repeat:no-repeat; width:768px; height:117px; } #menu ul{ position:absolute; top:30px; left:265px; } #menu li{ float:left; display:inline; padding: 0px 0px 0px 10px; } #menu a{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bolder; text-transform: uppercase; color: #d8cd8d; text-decoration: none; } #menu a:hover{ color:#3e3c27; } h1,h2,h3 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bolder; text-transform: uppercase; color: #171508; } h1,h2 { position:absolute; top:94px; } h1 { left:241px; } h2 { right:75px; } h3 { margin: 15px 0px 0px 30px; border-bottom: solid 1px #625d3b; } /********************** Main ***************************/ #main { background-image:url(http://img7.xooimage.com/files/b/f/9/main_bg-b6ab4d.gif); background-repeat: repeat-y; display:block; width:768px; height:auto; } #content { background-image:url(http://img24.xooimage.com/files/a/4/3/content_bg-e2dcc6.gif); background-repeat: repeat-y; width:768px; } /********************** Left - Text ***************************/ #left { float:left; width:490px; } #left p{ padding: 5px 10px 10px 30px; } #left a:hover{color:#d8cd8d;} /********************** Right - Team ***************************/ #right { float:right; width:230px; } .member { display:inline; float:left; margin-left:10px; } .member a{ font-size: 12px; font-weight: bold; color: #f5f1d1; text-decoration: none; } .member img{ border: none 0px; } .member span{ display:block; text-align:center; padding: 2px 0px 13px 0px; text-transform: uppercase; } .member span a{} .member span a:hover{} /********************** Footer ***************************/ #footer { background-image:url(http://img3.xooimage.com/files/1/8/1/footer_bg-b6ab5d.jpg); background-repeat:no-repeat; width:768px; height:97px; text-align:center; float:left; clear:both; } #footer ul{ } #footer li{ display:inline; float:none; text-align:center; padding: 0px 10px 0px 10px; border-right: solid 1px #908a68; } .lastchild{ border-right: 0px none !important; } #footer a{ font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-transform:uppercase; color: #908a68; text-decoration: none; } #footer a:hover{text-decoration: underline;} #footer span{ font-size: 9px; font-weight: bold; color: #18160e; margin:10px; display:block; }

GÖRÜNÜMÜ

İş Tasarımı

<= Tasarimin Üzerine =>

<= Tasarimin ALtına =>

</div> 	<div id="left">		 			<h3>MENÜ</h3> 			<ul> 			  <li><ul> 				  <li><a href="#" _fcksavedurl="#">Ana Sayfa</a></li> 				  <li><a href="#" _fcksavedurl="#">İletişim</a></li> 				  <li><a href="#" _fcksavedurl="#">Ziyaretci Defteri</a></li> 				  <li><a href="#" _fcksavedurl="#">Toplist</a></li> 				  <li><a href="#" _fcksavedurl="#">Link Ekle</a></li> 				  <li><a href="#" _fcksavedurl="#">Dost Siteler</a></li> 				  </ul> 			  </li> 			</ul> 			<h3>Takvim</h3> 			<ul> 				<li id="calendar">			 				<div id="calendar1"> 					<table id="calendar2" summary="Calendar"> 						<caption> 						January 2008 						</caption> 						<thead> 							<tr> 								<th abbr="Monday" scope="col" title="Monday">M</th> 								<th abbr="Tuesday" scope="col" title="Tuesday">T</th> 								<th abbr="Wednesday" scope="col" title="Wednesday">W</th> 								<th abbr="Thursday" scope="col" title="Thursday">T</th> 								<th abbr="Friday" scope="col" title="Friday">F</th> 								<th abbr="Saturday" scope="col" title="Saturday">S</th> 								<th abbr="Sunday" scope="col" title="Sunday">S</th> 							</tr> 						</thead> 						<tfoot> 							<tr> 								<td abbr="Des" colspan="3" id="prev"><a href="#" _fcksavedurl="#">« Des</a></td> 								<td class="pad"> </td> 								<td abbr="Feb" colspan="3" id="next" class="pad"><a href="#" _fcksavedurl="#">Feb »</a></td> 							</tr> 						</tfoot> 						<tbody> 							<tr> 								<td colspan="2" class="pad"> </td> 								<td>1</td> 								<td>2</td> 								<td>3</td> 								<td>4</td> 								<td>5</td> 							</tr> 							<tr> 								<td>6</td> 								<td>7</td> 								<td>8</td> 								<td>9</td> 								<td>10</td> 								<td>11</td> 								<td>12</td> 							</tr> 							<tr> 								<td>13</td> 								<td>14</td> 								<td>15</td> 								<td>16</td> 								<td>17</td> 								<td>18</td> 								<td>19</td> 							</tr> 							<tr> 								<td>20</td> 								<td id="now">21</td> 								<td>22</td> 								<td>23</td> 								<td>24</td> 								<td>25</td> 								<td>26</td> 							</tr> 							<tr> 								<td>27</td> 								<td>28</td> 								<td>29</td> 								<td>30</td> 								<td>31</td> 								<td class="pad" colspan="2"> </td> 							</tr> 						</tbody> 					</table> 				</div> 			</li> 		  </ul> 		  <h3>Site Hakkında</h3> 			<p>Buraya Siteniz Hakkında Bilgi Verebilirsiniz...</p> 			<br /> 	</div> 	     	</div>  <div id="footer"> <p>Copyright © 2008. Designed by <a href="http://www.senoynat.tr.gg" _fcksavedurl="http://www.senoynat.tr.gg" title="Css Tasarim Merkezi">SenOynat.tr.gg</a></p>  	</div> </div> </div>

<= Css Kod Bölümüne =>

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}  /* Design by WWW.senoynat.tr.gg */  * { margin: 0px; padding: 0px; }  a:link { 	color: #A5A9B2; }  a:hover { 	text-decoration: none; 	color: #FF0000; }  a:visited { 	color: #A5A9B2; }  body { 	 	background: #ffffff url(https://img.webme.com/pic/c/css-tasarimm/1-back_all.gif) repeat-x; 	font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; 	color: #666666; }  #contentt { 	margin: 0 auto; 	background: #ffffff; 	width: 742px; 	text-align: left; }  #back { background: #ffffff; width: 742px; }  #header { 	height: 406px; 	text-align: left;		 }  #menu1 { width: 702px; height: 152px; padding-left: 40px; }  #menu ul { 	list-style: none;	 }  #menu li { 	 	display: inline;  	 }  #menu a { 	float: left; 	width: 79px; 	height: 32px;     display: block; 	text-align: center; 	text-decoration: none; 	color: #000000; 	font-weight: bold; 	font-size: 12px; 	text-transform: uppercase; }  #menu a:hover { 	width: 79px;     height: 32px; 	color: #004586; 	text-decoration: underline; }  #button1 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button1.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button1 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button1_r.jpg) no-repeat; height: 24px; width: 124px; }  #button2 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button2.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button2 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button2_r.jpg) no-repeat; height: 24px; width: 124px; }  #button3 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button3.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button3 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button3_r.jpg) no-repeat; height: 24px; width: 124px; } #button4 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button4.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button4 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button4_r.jpg) no-repeat; height: 24px; width: 124px; } #button5 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button5.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button5 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button5_r.jpg) no-repeat; height: 24px; width: 124px; }   #logo { background: url(https://img.webme.com/pic/c/css-tasarimm/1-header.jpg) no-repeat; width: 722px; height: 234px; text-align: left; padding-left: 20px; padding-top: 10px; }   #logo a { 	text-decoration: none; 	text-transform: lowercase; 	font-style: italic; 	font-size: 18px; 	color: #000000; } #logo H2 a { font-size: 12px; }  #left { 	width: 266px; }  #left H3 { width: 241px; height: 47px; font-size: 14px; font-weight: bold; padding-left: 25px; padding-top: 15px; text-transform: uppercase; color: #000000; background: url(https://img.webme.com/pic/c/css-tasarimm/1-title.gif) repeat-x }  #left ul { 	list-style: none;  }  #left li ul { 	border: 0px; 	margin-left: 20px; 	margin-bottom: 10px; }  #left li li { 	padding: 4px 20px;     background: url(https://img.webme.com/pic/c/css-tasarimm/1-small.gif) no-repeat left; }  #left a { 	color: #A5A9B2; } #left a:visited { 	color: #A5A9B2; }  #left p { padding: 10px; }  #calendar1 { 	padding: 0 10px 20px 10px; }  #calendar table { 	width: 100%; 	text-align: center; }  #calendar thead {  }  #calendar tbody td { 	border: 1px solid #F1F1F1; }  #calendar #prev { 	text-align: left; }  #calendar #next { 	text-align: right; }  #calendar tfoot a { 	text-decoration: none; 	font-weight: bold; }  #calendar #now { 	background: #696969; 	border: 1px solid #ff0000; 	font-weight: bold; 	color: #ffffff }  #right { float: right; width: 450px; padding-right: 10px; }  #right H4 { 	margin: 0; 	padding: 0px; 	font-size: 12px; 	color: #C5C5C5; }  #right a { color: #A5A9B2; text-decoration: none; }  #right p { 	margin: 0; 	padding: 0; 	padding-bottom: 10px; }  #right h2 { 	margin: 0; 	padding: 0; 	padding-top: 10px; 	color: #C5C5C5; } .date { 	text-align: right; 	color: #808080; 	font-size: 11px; }  .date a { 	color: #D72020; }    #footer { 	height: 29px; 	clear: both; 	padding-top: 50px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/1-footer.gif) repeat-x bottom; }  #footer p { 	margin: 0; 	font-size: 10px; 	text-align: center; 	color: #ffffff; }  #footer a { 	color: #ffffff; }

Yeşil elma tasarımı

<= Tasarimin Üzerine =>

<= Tasarimin ALtına =>

</div> 	 	 	<div id="sidebar"> 		<ul> 			<li> 				<h2>Menü</h2> 							<ul> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Ana Sayfa</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">İletişim</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Ziyaretci Defteri</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Toplist</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Link Listesi</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Yorumlar</a></li>  				</ul> 			</li> 			<li> 				<h2>Tasarimlar</h2> 							<ul> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">İceblue Tasarim</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Red Tasarimları</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Butterfly Tasarimlari</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">CSS Design</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Flash Tasarim</a></li> 				</ul> 			</li> <li> 							<h2>Arşiv</h2> 							<ul> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">September</a> (23)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Ağustos</a> (31)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Ocak</a> (31)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Şubat</a> (30)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Mart</a> (31)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Nisan</a> (30)</li> 							</ul> 						</li> 		</ul> 	</div> 	 	<div style="clear: both;"> </div> </div>  <div id="footer"> 	<p>©2008 Tüm Hakları SakLıdır.  •  Design by <a href="http://www.senoynat.tr.gg" _fcksavedurl="http://www.senoynat.tr.gg">Senoynat.tr.gg</a>.</p> </div>

<= Css Kod Bölümüne =>

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}  /* Design by WWW.SENOYNAT.TR.GG */  body { 	margin: 0; 	padding: 0; 	background: #AAE74A url(https://img.webme.com/pic/c/css-tasarimm/3-img04.gif) repeat-x; }  body, th, td, input, textarea { 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 	font-size: 13px; 	color: #666666; }  p, ol, ul { 	line-height: 170%; }  a:hover { 	text-decoration: none; }  /* Header */  #header { 	width: 960px; 	height: 120px; 	margin: 0 auto; }  #logo { 	float: left; 	height: 120px;                       margin-top: -11px; 	margin-left: 10px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img1.gif) no-repeat left center; }  #logo h1, #logo p { 	text-transform: lowercase; }  #logo h1 { 	margin: 0; 	padding: 25px 0 0 85px; 	letter-spacing: -2px; 	font-size: 3em; 	font-weight: normal; 	color: #000000; }  #logo h1 a { 	color: #000000; }  #logo p { 	margin: -10px 0 0 2px; 	padding: 0 0 0 85px; 	text-transform: lowercase; }  #search { 	float: right; 	width: 280px; }  #search form { 	margin-top: -5px; 	padding: 63px 0 0 0; }  #search fieldset { 	margin: 0; 	padding: 0; 	border: none; }  #search #s, #search #x { 	float: left; }  #search #s { 	width: 188px; 	margin: 2px 6px 0 0; 	padding: 2px 5px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img02.gif) repeat-x; 	border: 1px solid #ACACAC; }  #search #x { 	width: 67px; 	height: 28px; 	padding: 0; 	background: #006BFF url(https://img.webme.com/pic/c/css-tasarimm/3-img03.gif) no-repeat; 	border: none; 	text-transform: lowercase; 	color: #FFFFFF; }  /* Menu */  #menu { 	width: 962px; 	height: 50px; 	margin-top: -32px; 	margin-left: auto; 	margin-right: auto; }  #menu ul { 	margin: 0; 	padding: 0; 	list-style: none; }  #menu li { 	display: block; 	float: left; }  #menu a { 	display: block; 	float: left; 	height: 38px; 	padding: 8px 20px 0 20px; 	text-decoration: none; 	text-transform: lowercase; 	color: #000000; }  #menu a:hover { 	text-decoration: underline; }  #menu .current_page_item { 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img05.gif) no-repeat; }  #menu .current_page_item a { 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img06.gif) no-repeat right top; 	font-weight: bold; }  /* Page */  #page { 	width: 962px; 	margin: 0 auto; 	background: #FFFFFF url(https://img.webme.com/pic/c/css-tasarimm/3-img07.gif) repeat-y; }  /* Content */  #content { 	float: right; 	width: 700px; 	padding: 0; 	background:  none no-repeat; }  #content a { 	color: #FF8900; }  .pagetitle { 	height: 33px; 	margin: 0; 	padding: 8px 0 0 15px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img13.gif) no-repeat; 	font-size: 1.4em; 	color: #FFFFFF; }  #content #rss-posts { 	display: block; 	margin: -30px 15px 0px 0px; 	padding: 0 20px 0 0; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-rss.gif) no-repeat right center; 	text-align: right; 	font-weight: bold; 	color: #FFFFFF; }  .post { 	padding: 40px 30px 0 30px; }  .title { 	margin: 0; 	font-size: 2.4em; 	font-weight: normal; }  .byline { 	margin: 0 0 20px 0; }  .meta { 	border-top: 1px dotted #CCCCCC; 	text-align: right; }  .meta .more, .meta .comments { 	padding-left: 15px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img14.gif) no-repeat left center; }  /* Sidebar */  #sidebar { 	float: left; 	width: 230px; 	padding: 11px 5px 0 11px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img08.gif) no-repeat; }  #sidebar ul { 	margin: 0; 	padding: 0; 	list-style: none; }  #sidebar li { 	margin-bottom: 20px; }  #sidebar li ul { 	padding: 10px 15px; }  #sidebar li li { 	margin: 0; 	padding-left: 15px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img12.gif) no-repeat left center; }  #sidebar h2 { 	height: 33px; 	margin: 0; 	padding: 8px 0 0 15px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img11.gif) no-repeat; 	font-size: 1.4em; 	color: #FFFFFF; }  #sidebar a { 	text-decoration: none; 	color: #0065FF; }  #sidebar a:hover {	 	text-decoration: underline; }  /* Footer */  #footer { 	width: 962px; 	margin: 0 auto; 	padding: 30px 0; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img10.gif) no-repeat; }  #footer p { 	margin: 0; 	text-align: center; 	color: #FFFFFF; }  #footer a { 	color: #FFFFFF; }

Tasarımın üzerindeki yazıya

Tasarımın altınaki yazıya

<div id="sidebar"> 		<ul> 			<li> 				<h2>Menü</h2> 				<ul> 					<li><a href="#" _fcksavedurl="#">Anasayfa</a></li> 					<li><a href="#" _fcksavedurl="#">İletişim</a></li> 					<li><a href="#" _fcksavedurl="#">Ziyaretçilerim</a></li> 					<li><a href="#" _fcksavedurl="#">Hakkımda</a></li> 					<li><a href="#" _fcksavedurl="#">Topliste</a></li> 					<li><a href="#" _fcksavedurl="#">Forum</a></li> 				</ul> 			</li> 			<li> 				<h2>Arşiv</h2> 				<ul> 					<li><a href="#" _fcksavedurl="#">İce Blue</a> (23)</li> 					<li><a href="#" _fcksavedurl="#">Red</a> (31)</li> 					<li><a href="#" _fcksavedurl="#">Butterfly</a> (31)</li> 					<li><a href="#" _fcksavedurl="#">Css</a> (30)</li> 					<li><a href="#" _fcksavedurl="#">Php</a> (31)</li> 					<li><a href="#" _fcksavedurl="#">Asp</a> (30)</li> 					<li><a href="#" _fcksavedurl="#">Xhtml</a> (31)</li> 					<li><a href="#" _fcksavedurl="#">Html</a> (28)</li> 					<li><a href="#" _fcksavedurl="#">xml</a> (31)</li> 				</ul> 			</li> 		</ul> 	</div> 	 </div> </div>  <div id="footer"> 	<p>©2008 Tüm Hakkı Saklıdır; Design by <a href="http://www.senoynat.tr.gg/" _fcksavedurl="http://www.senoynat.tr.gg/">senoynat.tr.gg</a>  •  Icons by <a href="http://www.senoynat.tr.gg/" _fcksavedurl="http://www.senoynat.tr.gg/">SenOynaT.tr.gg</a>.</p> </div>  </body></html>

Css koduna

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} /*   Theme Name: Unnamed Theme URI: http://www.freewpthemes.net/preview/unnamed Description: Widget ready and tested on WP 2.2+. Version: 2.0 Author: Free WordPress Themes Author URI: http://www.freewpthemes.net/ */  body { 	margin-top: 30px; 	padding: 0; 	background: #000000; 	font-size: 13px; 	text-align: justify; 	color: #ADADAD; }  body, th, td, input, textarea, select, option { 	font-family: "Trebuchet MS", "Times New Roman", Arial, Times, serif; }  h1, h2, h3 { 	font-family: Arial, Helvetica, sans-serif; 	font-weight: normal; 	color: #819CDB; }  h1 { 	font-size: 36px; }  h2 { 	font-size: 2em; }  h3 { 	font-size: 1em; }  p, ul, ol { 	line-height: 200%; }  blockquote { 	padding-left: 1em; }  blockquote p, blockquote ul, blockquote ol { 	line-height: normal; 	font-style: italic; }  a { 	color: #FFFFFF; }  a:hover { 	color: #FFFFFF; }  hr { 	display: none; }  /* Header */  #header { 	width: 800px; 	height: 143px; 	margin: 0 auto; 	padding-bottom: 30px; 	background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img01.jpg) no-repeat left top; }  #header h1, #header p { 	float: left; 	margin: 0; 	padding: 50px 0 0 20px; 	font-family: Georgia, "Times New Roman", Times, serif; }  #header h1 { 	color: #FFB71C; 	font-size: 44px; }  #header p { 	padding: 65px 0 0 10px; 	font-size: 16px; 	color: #FFFFFF; }  #header a { 	text-decoration: none; 	color: #FFB71C; }  /* Page */  #page { 	width: 800px; 	margin: 0 auto; }  /* Content */  #content { 	float: right; 	width: 480px; 	margin: 0; 	margin-bottom: 30px; }  .post { 	padding: 0px 0px 0 0px; }  .title { 	margin: 0; 	padding-bottom: 5px; 	font-size: 24px; 	font-family: Georgia, "Times New Roman", Times, serif; 	color: #FFFFFF; }  .title a { 	text-decoration: none; 	color: #FFFFFF; }  .pagetitle { 	border-bottom: 2px solid #0F0F0F; }  .byline { 	margin: 0; 	color: #646464; }  .meta { 	text-align: left; 	color: #646464; 	padding: 10px 10px; 	margin: 30px 0; 	background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img02.jpg) repeat-x left top; 	text-transform: uppercase; 	font-family: Arial, Helvetica, sans-serif; 	font-size: 10px; }  .meta .more { 	background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img03.gif) no-repeat 0px 45%; 	padding-left: 10px; }  .meta .comments { 	background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img03.gif) no-repeat 0px 45%; 	padding-left: 10px; } .meta a { }  .navigation { }  .alignleft { 	float: left; }  .alignright { 	float: right; }  .posts { 	margin: 0; 	padding: 0; 	list-style: none; 	line-height: normal; }  .posts li { 	padding-bottom: 20px; 	margin-bottom: 20px; 	border-bottom: 1px solid #0F0F0F; }  .posts h3 { 	margin: 0; 	font-weight: bold; }  .posts p { 	margin: 0; 	line-height: normal; }  .posts a { }  /* Sidebar */  #sidebar { 	float: left; 	width: 260px; }  #sidebar ul { 	margin: 0; 	padding: 0 0 20px 0; 	list-style: none; }  #sidebar li { }  #sidebar li ul { 	padding: 0px 21px 20px 10px; }  #sidebar li li { 	border-bottom: 1px dotted #363B3F; 	background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img03.gif) no-repeat 0px 40%; 	padding: 0 0 10px 15px; }  #sidebar h2 { 	margin: 0; 	height: 35px; 	padding: 8px 0px 10px 13px; 	background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img02.jpg) repeat-x left top; 	font-family: Georgia, "Times New Roman", Times, serif; 	font-size: 18px; 	color: #FFFFFF; }  #sidebar h2 a { 	background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img03.gif) no-repeat left 50%; }  #sidebar a { }  #sidebar a:hover { 	text-decoration: none; }  /* Search */  #search input { 	display: none; }  #search input#s { 	display: block; 	width: 230px; 	padding: 2px 5px; 	border: 1px solid #3DD1FF; 	background: #FFFFFF url(images/img05.gif) repeat-x; }  #search br { 	display: none; }  /* Calendar */  #calendar { }  #calendar h2 { 	margin-bottom: 15px; }  #calendar table { 	width: 80%; 	margin: 0 auto; 	text-align: center; }  #calendar caption { 	width: 100%; 	text-align: center; }  #next { 	text-align: right; }  #prev { 	text-align: left; }  /* Footer */  #footer { 	clear: both; 	height: 136px; 	width: 800px; 	margin: 0 auto; 	border-top: 10px solid #1E2223; 	text-align: center; 	font-size: smaller; 	font-family: Arial, Helvetica, sans-serif; 	color: #646464; }  #footer p { 	padding-top: 40px; 	text-transform: uppercase; }  #footer p a { 	color: #FFFFFF; }  </body></html>

Tasarımın üzerindeki yazıya

Tasarımın altındaki yazıya

<div id="sidebar"> <ul> <li id="search"> <h2>Arama</h2> <form method="get" action=""> <fieldset> <input type="text" id="s" name="s" value="" /> <input type="submit" id="x" value="Search" /> </fieldset> </form> </li> <li> <h2>Kategori 1</h2> <ul> <li><a href="#" _fcksavedurl="#">Anasayfa</a></li> <li><a href="#" _fcksavedurl="#">Ziyaretçilerim</a></li> <li><a href="#" _fcksavedurl="#">Forum</a></li> <li><a href="#" _fcksavedurl="#">İletişim</a></li> <li><a href="#" _fcksavedurl="#">Hakkımda</a></li> <li><a href="#" _fcksavedurl="#">Toplist</a></li> <li><a href="#" _fcksavedurl="#">Link ekle</a></li> </ul> </li> <li> <h2>Kategori2</h2> <ul> <li><a href="#" _fcksavedurl="#">Anasayfa</a></li> <li><a href="#" _fcksavedurl="#">Ziyaretçilerim</a></li> <li><a href="#" _fcksavedurl="#">Forum</a></li> <li><a href="#" _fcksavedurl="#">Hakkımda</a></li> <li><a href="#" _fcksavedurl="#">Toplist</a></li> <li><a href="#" _fcksavedurl="#">İletişim</a></li> <li><a href="#" _fcksavedurl="#">Link ekle</a></li> </ul> </li> </ul> </div>  <div style="clear: both;"> </div> </div>   <div id="footer"> <div id="footer-wrap"> <p id="legal">(c) 2008 YourSite. Design by <a href="http://www.senoynat.tr.gg/" _fcksavedurl="http://www.senoynat.tr.gg/">CssTaSaRiMi</a>.</p> </div> </div>  </body></html>

Css koduna

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} /* Design by CssTaSaRiMi http://www.csstasarimi.tr.gg Released for free under a Creative Commons Attribution 2.5 License */ body { margin: 0; padding: 0; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img01.gif) repeat-x left top; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } h1, h2, h3 { margin: 0; text-transform: lowercase; font-weight: normal; color: #7D7D7D; } h1 { letter-spacing: -1px; font-size: 32px; } h2 { font-size: 23px; } p, ul, ol { margin: 0 0 2em 0; text-align: justify; line-height: 26px; font-size: 11px; } a:link { color: #6DBD0B; } a:hover, a:active { text-decoration: none; color: #6DBD0B; } a:visited { color: #6DBD0B; } img { border: 1px dashed #86E714; padding: 2px; } img.left { float: left; margin-right: 15px; } img.right { float: right; margin-left: 15px; } /* Form */ form { margin: 0; padding: 0; } fieldset { margin: 0; padding: 0; border: none; } legend { display: none; } input, textarea, select { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } /* Header */ #header { width: 860px; height: 50px; margin: 0 auto; } /* Menu */ #menu { width: 860px; margin: 0; padding: 0; } #menu ul { float: right; display: block; margin: 0; padding: 0px 0 0 0px; list-style: none; line-height: normal; } #menu li { display: inline; } #menu a { margin-right: 3px; padding: 10px 15px 10px 10px; letter-spacing: -.5px; text-decoration: none; text-transform: lowercase; font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000000; } #menu a:hover { text-decoration: none; color: #000000; } #menu .current_page_item a { color: #000000; } #menu .numbertxt { font-size: 28px; color: #C4F28D; } #menu span { margin: 0; padding: 0; } /** LOGO */ #logo { clear: both; width: 860px; height: 80px; margin: 0 auto; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img02.gif) no-repeat left top; } #logo h1, #logo h2 { margin: 0; padding: 0 0 0 75px; line-height: normal; } #logo h1 { } #logo h1 a { text-decoration: none; color: #FFFFFF; } #logo h1 a:hover { text-decoration: underline; } #logo h2 { padding: float: left; font: italic 13px Georgia, "Times New Roman", Times, serif; color: #66B209; } #logo p a { text-decoration: none; } #logo p a:hover { text-decoration: underline; } /* Page */ #page { width: 850px; margin: 0 auto; } /* Content */ #content { float: right; width: 600px; } /* Post */ .post { padding: 15px 15px; } .post .title { margin-bottom: 20px; border-bottom: 1px dotted #D1D1D1; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img04.jpg) repeat-x left bottom; } .post .entry { } .post .meta { height: 70px; padding: 40px 15px 0px 15px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img03.jpg) repeat-x left top; } .post .meta p { margin: 0; line-height: normal; color: #999999; } .post .meta .byline { float: left; } .post .meta .links { float: right; } .post .meta .more { padding: 0 20px 0 18px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img09.gif) no-repeat left 50%; } .post .meta .comments { padding-left: 22px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img08.gif) no-repeat left 50%; } .post .meta b { display: none; } /* Sidebar */ #sidebar { float: left; width: 215px; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar li { margin-bottom: 40px; } #sidebar li ul { background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img03.jpg) repeat-x left bottom; padding-bottom: 20px; } #sidebar li li { margin: 0; padding-left: 12px; } #sidebar h2 { padding-top: 20px; margin-bottom: 10px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img04.jpg) repeat-x left bottom; border-bottom: 1px dotted #D1D1D1; font-size: 18px; } /* Search */ #search { background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img03.jpg) repeat-x left bottom; margin-bottom: 20px; } #search h2 { margin-bottom: 20px; } #s { width: 115px; margin-right: 5px; margin-left: 15px; margin-bottom: 20px; padding: 3px 0px 3px 15px; border: 1px solid #F0F0F0; } #x { margin-bottom: 20px; padding: 3px 3px 3px 3px; background: #ECECEC; border: none; text-transform: lowercase; font-size: 11px; color: #4F4F4F; } /* Boxes */ .box1 { padding: 20px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img05.gif) no-repeat; } .box2 { color: #BABABA; } .box2 h2 { margin-bottom: 15px; background: url(images/img10.gif) repeat-x left bottom; font-size: 16px; color: #FFFFFF; } .box2 ul { margin: 0; padding: 0; list-style: none; } .box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited { color: #EDEDED; } /* Footer */ #footer-wrap { width: 860px; height: 52px; margin: 0 auto; } #footer { margin: 0 auto; height: 52px; min-height: 52px; padding: 0; background: #A0A0A3 url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img05.gif) repeat-x left bottom; } html>body #footer { height: auto; } #footer p { } #legal { clear: both; padding-top: 15px; text-align: center; color: #FFFFFF; } #legal a { font-weight: bold; color: #FFFFFF; } </body></html>

Tasarımın Üzerindeki Yazı

Tasarımın Altındaki Yazı

<div id="sidebar"> <ul> <li id="search"> <h2>Arama</h2> <form method="get" action=""> <fieldset> <input type="text" id="s" name="s" value="" /> <input type="submit" id="x" value="Search" /> </fieldset> </form> </li> <li> <h2>Menü1</h2> <ul> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> </ul> </li> <li> <h2>Menü2</h2> <ul> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> </ul> </li> </ul> </div>  <div style="clear: both;"> </div> </div>   <div id="footer"> <p id="legal">2008 Bütün hakları Saklıdır<a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">CssTaSaRiMi</a> designed by <a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">CssTaSaRiMi</a>.</p> </div> </div>  </body></html>

Css Koduna

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} /* Design by CssTaSaRiMi http://www.csstasarimi.tr.gg Released for free under a Creative Commons Attribution 2.5 License */ body { margin-top: 50px; padding: 0; background: #B2EBFF url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img01.gif) repeat-x left bottom; font-size: 13px; font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif; text-align: justify; color: #FFFFFF; } h1, h2, h3 { margin: 0; text-transform: lowercase; font-weight: normal; color: #FFFFFF; } h1 { letter-spacing: -1px; font-size: 32px; } h2 { font-size: 23px; } p, ul, ol { margin: 0 0 2em 0; text-align: justify; line-height: 26px; } a:link { color: #FFFFFF; } a:hover, a:active { text-decoration: none; color: #FFFFFF; } a:visited { color: #FFFFFF; } img { border: none; } img.left { float: left; margin-right: 15px; } img.right { float: right; margin-left: 15px; } /* Form */ form { margin: 0; padding: 0; } fieldset { margin: 0; padding: 0; border: none; } legend { display: none; } input, textarea, select { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } #wrapper { margin: 0 auto; padding: 0; } /* Header */ #header { width: 713px; margin: 0 auto; height: 130px; } /* Menu */ #menu { float: left; width: 713px; height: 70px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img03.gif) no-repeat left top; } #menu ul { margin: 0; padding: 0px 0 0 10px; list-style: none; line-height: normal; } #menu li { display: block; float: left; } #menu a { display: block; float: left; margin-top: 5px; margin-right: 3px; padding: 20px 17px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img05.gif) no-repeat left 52%; text-decoration: none; font-size: 13px; color: #FFFFFF; } #menu a:hover { color: #FFFFFF; } #menu .current_page_item a { background: none; color: #000000; } /** LOGO */ #logo { width: 713px; height: 130px; margin: 0 auto; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img02.gif) no-repeat left top; } #logo h1, #logo h2 { float: left; margin: 0; padding: 60px 0 0 20px; line-height: normal; } #logo h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size:40px; } #logo h1 a { text-decoration: none; color: #4C4C4C; } #logo h1 a:hover { text-decoration: underline; } #logo h2 { float: left; padding: 75px 0 0 18px; font: 18px Georgia, "Times New Roman", Times, serif; color: #0044D1; } #logo p a { text-decoration: none; color: #8BD80E; } #logo p a:hover { text-decoration: underline; } /* Page */ #page { width: 663px; margin: 0 auto; padding: 0 25px; } /* Content */ #content { float: left; width: 410px; } /* Post */ .post { padding: 15px 0px; margin-bottom: 20px; } .post .title { margin-bottom: 20px; padding-bottom: 5px; } .post h1 { padding: 0px 0 0 35px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img06.gif) no-repeat left top; font-size: 24px; color: #FFFFFF; } .post h2 { padding: 0px 0 0 35px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img06.gif) no-repeat left top; font-size: 22px; color: #FFFFFF; } .post .entry { } .post .meta { padding: 15px 15px 30px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } .post .meta p { margin: 0; padding-top: 15px; line-height: normal; color: #FFFFFF; } .post .meta .byline { float: left; } .post .meta .links { float: right; } .post .meta .more { padding: 0 10px 0 18px; } .post .meta .comments { } .post .meta b { display: none; } /* Sidebar */ #sidebar { width: 210px; float: right; margin: 0; padding: 0; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar li { margin-bottom: 40px; } #sidebar li ul { } #sidebar li li { margin: 0; } #sidebar h2 { width: 250px; margin-bottom: 10px; padding: 0px 0 0 35px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img06.gif) no-repeat left top; font-size: 20px; color: #FFFFFF; } /* Search */ #search { } #search h2 { margin-bottom: 20px; } #s { width: 130px; margin-right: 5px; padding: 2px; } #x { padding: 2px; border: none; border: 1px solid #FFFFFF; background: #0157DE; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; } /* Boxes */ .box1 { padding: 20px; } .box2 { color: #BABABA; } .box2 h2 { margin-bottom: 15px; font-size: 16px; color: #FFFFFF; } .box2 ul { margin: 0; padding: 0; list-style: none; } .box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited { color: #EDEDED; } /* Footer */ #footer-wrap { } #footer { width: 693px; margin: 0 auto; padding: 10px 0 10px 0; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img07.gif) no-repeat left top; } html>body #footer { height: auto; } #footer p { font-size: 11px; } #legal { clear: both; text-align: center; color: #FFFFFF; } #legal a { font-weight: normal; color: #FFFFFF; } </body></html>

Tasarımın üzerindeki yazıya

<div id="header"> 	<div id="logo"> 		<h1><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></h1> 		<h2><a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">Design by CssTaSaRiMi</a></h2> 	</div> 	<div id="menu"> 		<ul> 			<li class="active"><a href="#" _fcksavedurl="#" title="">Anasayfa</a></li> 			<li><a href="#" _fcksavedurl="#" title="">Z.Defteri</a></li> 			<li><a href="#" _fcksavedurl="#" title="">Hakkımda</a></li> 			<li><a href="#" _fcksavedurl="#" title="">İletişim</a></li> 			<li><a href="#" _fcksavedurl="#" title="">Forum</a></li> 		</ul> 	</div> </div> <div id="content"> 	<div id="sidebar"> 		<div id="login" class="boxed"> 			<div class="title"> 				<h2>Üye Girişi</h2> 			</div> 			<div class="content"> 				<form id="form1" method="post" action="#"> 					<fieldset> 					<legend>Giriş:</legend> 					<label for="inputtext1">E-Mail</label> 					<input id="inputtext1" type="text" name="inputtext1" value="" /> 					<label for="inputtext2">Şifre:</label> 					<input id="inputtext2" type="password" name="inputtext2" value="" /> 					<input id="inputsubmit1" type="submit" name="inputsubmit1" value="Sign In" /> 					<p><a href="#" _fcksavedurl="#">Şifreni mi unuttun?</a></p> 					</fieldset> 				</form> 			</div> 		</div> 		 		<div id="updates" class="boxed"> 			<div class="title"> 				<h2>Menü</h2> 			</div> 			<div class="content"> 				<ul> 					<li> 						<h3></h3> 						<p><a href="#" _fcksavedurl="#">1. Xml</a></p> 					</li> 					<li> 						<h3></h3> 						<p><a href="#" _fcksavedurl="#">2. Css</a></p> 					</li> 					<li> 						<h3></h3> 						<p><a href="#" _fcksavedurl="#">3. Html</a></p> 					</li> 					<li> 						<h3></h3> 						<p><a href="#" _fcksavedurl="#">4. Asp</a></p> 					</li> 					<li> 						<h3></h3> 						<p><a href="#" _fcksavedurl="#">5. Php</a></p> 					</li> 				</ul> 			</div> 		</div> 		 	</div> 			</body></html>

Tasarımın altındaki yazıya

Css koduna

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}  /* Design by Csstasarimi http://www.csstasarimi.tr.gg Released for free under a Creative Commons Attribution 2.5 License */  * { 	margin: 0; 	padding: 0; }  body { 	margin: 20px 0; 	background: #FFFFFF; 	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif; 	color: #666666; }  h1, h2, h3 { 	color: #333333; }  h2 { }  h3 { 	font-size: 1em; }  p, blockquote, ul, ol { 	margin-bottom: 1.5em; 	line-height: 1.65em; 	text-align: justify; }  p { }  blockquote { 	margin-left: 2em; 	margin-right: 2em; 	font-style: italic; }  ul { 	margin-left: 3em; }  ul li { }  ol { 	margin-left: 3em; }  ol li { }  a { 	text-decoration: underline; 	color: #3E9722; }  a:hover { 	text-decoration: none; 	color: #E58C24; }  img { 	border: none; }  img.left { 	float: left; 	margin: 5px 20px 0 0; }  img.right { 	float: right; 	margin: 5px 0 0 20px; }  /* Boxed Style */  .boxed { }  .boxed .title { 	background: #3C74E6 url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img06.gif) repeat-x; }  .boxed .title h2 { 	height: 28px; 	padding: 12px 0 0 20px; 	text-transform: uppercase; 	font-size: 1em; 	color: #FFFFFF; }  .boxed .content { 	padding: 20px; 	border-top: 1px solid #FFFFFF; 	background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img07.gif) repeat-x; }  /* Post */  .post { }  .post .title { 	background: #3C74E6 url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img06.gif) repeat-x; 	font-size: 1em; 	text-transform: uppercase; 	color: #FFFFFF; }  .post .title span { 	display: block; 	height: 28px; 	padding: 12px 0 0 20px; }  .post .date { 	margin-top: -25px; 	padding-bottom: 10px; 	padding-right: 20px; 	text-align: right; 	font-size: x-small; 	color: #FFFFFF; }  .post .date .month { }  .post .date .day { }  .post .date .year { }  .post .meta { 	clear: both; }  .post .meta p { 	margin: 0; 	padding: 10px 20px 40px 20px; 	border-top: 1px dotted #CCCCCC; 	line-height: normal; 	font-size: x-small; }  .post .story { 	padding: 20px; 	border-top: 1px solid #FFFFFF; 	background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img07.gif) repeat-x; }  /* Header */  #header { 	width: 920px; 	height: 120px; 	margin: 0 auto; 	padding: 20px 20px 0 20px; 	background: #CAE646 url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img01.jpg) no-repeat; }  /* Header > Logo */  #logo { 	float: left; 	width: 240px; 	height: 50px; }  #logo h1 { 	float: left; 	margin: 0; 	padding: 50px 0 0 0; 	font-size: 2.6em; }  #logo h2 { 	float: left; 	margin-top: -5px; 	font-size: 1em; }  #logo a { 	text-decoration: none; 	color: #000000; }  /* Header > Menu */  #menu { 	float: right; }  #menu ul { 	margin: 0; 	padding-top: 79px; 	list-style: none; }  #menu li { 	display: inline; }  #menu a { 	display: block; 	float: left; 	width: 120px; 	height: 30px; 	margin-left: 2px; 	padding-top: 10px; 	background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img03.gif) no-repeat; 	text-decoration: none; 	text-align: center; 	font-weight: bold; 	color: #000000; }  #menu a:hover { 	background-image: url(images/img04.gif); }  #menu .active a { 	background-image: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img05.gif); }  /* Content */  #content { 	width: 920px; 	margin: 0 auto; 	padding: 20px; 	background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img02.jpg) no-repeat; 	border-top: 1px solid #FFFFFF; }  /* Content > Main */  #main { 	float: left; 	width: 480px; 	padding-left: 20px; }  /* Content > Main > Welcome */  #welcome { }  /* Content > Main > Example */  #example { }  /* Content > Sidebar */  #sidebar { 	float: left; 	width: 220px; }  #sidebar .boxed .title h2 { 	background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img08.gif) no-repeat; }  /* Content > Sidebar > Login */  #login { }  #login form { }  #login fieldset { 	border: none; }  #login legend { 	display: none; }  #login label { 	display: block; }  #login input { 	margin-bottom: 10px; 	padding: 2px 5px; 	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif; 	color: #666666; }  #inputtext1, #inputtext2 { 	width: 160px; }  #inputsubmit1 { 	margin: 0; 	padding: 0; }  /* Content > Sidebar > Updates*/  #updates { }  #updates ul { 	margin: 0; 	list-style: none; }  #updates h3 { 	font-size: .8em; }  #updates p { 	line-height: normal; 	font-size: .8em; }  #updates a { 	text-decoration: none; }  /* Content > Sidebar2 */  #sidebar2 { 	float: left; 	width: 180px; 	padding-left: 20px; }  #sidebar2 .boxed .title h2 { 	background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img10.gif) no-repeat right top; }  /* Content > Sidebar2 > Sponsors */  #sponsors { }  #sponsors ul { 	margin-left: 0; 	padding-left: 0; 	list-style: inside; }  /* Content > Sidebar2 > ad120x600 */  #ad120x600 { 	text-align: center; }  /* Footer */  #footer { 	clear: both; 	width: 960px; 	height: 80px; 	margin: 0 auto; 	padding: 20px 0; 	background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img02.jpg) no-repeat; }  #footer p { 	margin: 0; 	text-align: center; 	line-height: normal; 	font-size: x-small; }  #footer a { 	text-decoration: underline; 	color: #666666; }  #footer a:hover { 	text-decoration: none; }  /* Footer > Legal */  #legal { }  /* Footer > Links */  #links { }</body></html>

EN SEVİLEN TASARIMLAR


Preview \| Download	Preview \| Download	Preview \| Download
Name: metamorph_wordpress	Name: metamorph_temple	Name: metamorph_fallbridge
Downloads: 1595	Downloads: 1334	Downloads: 1529


Preview \| Download	Preview \| Download	Preview \| Download
Name: metamorph_hills	Name: metamorph_dreamingirl	Name: metamorph_garden
Downloads: 1614	Downloads: 1275	Downloads: 956


Preview \| Download	Preview \| Download	Preview \| Download
Name: metamorph_burninghouse	Name: metamorph_island	Name: metamorph_helloween
Downloads: 1817	Downloads: 1758	Downloads: 1300

snowy VIEW DOWNLOAD	BlueFlower VIEW DOWNLOAD	tattoopattern VIEW DOWNLOAD
WaiveLive VIEW DOWNLOAD	GreenWOW VIEW DOWNLOAD	SimpleSimple VIEW DOWNLOAD
darkTech VIEW DOWNLOAD	OrganicFruits2 VIEW DOWNLOAD	GreenHome VIEW DOWNLOAD
RedOneTemplate VIEW DOWNLOAD	GardenBee VIEW DOWNLOAD	Romantic VIEW DOWNLOAD