MODA CSS TASARIM Tasarımın Üzerindeki Bölüme
<div id="wrapper"> <div id="header"> <div id="logo"> <h1>Htmlşablonkod.tr.gg</h1> <p>Süppeeerrr Tasarım :=) </p> </div> <div id="nav"> <ul> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">ANA SAYFA </a>| </li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">FORUM</a> | </li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">TOPLİST</a> | </li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">İLETİŞİM</a> | </li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg"></a>| </li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Z. DEFTERİ </a></li> </ul> </div> <div id="gallery"> <ul> <li class="gwomen"><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Women</a></li> <li class="gkids"><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Kids</a></li> <li class="gmen"><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Men</a></li> </ul> </div> </div> <div id="body"> <div id="categories"> <h2>Kategoriler</h2> <ul> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Formalar</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">T-shirtler</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Gelinlikler</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Abiyeler</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Etekler</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Pantolonlar</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Bluzler</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Eşoftmanlar</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Çantalar</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Kotlar</a></li> <li><a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">İç Çamaşırları </a></li> </ul> </div> <div id="seasonal"> <div class="inner"> <p class="style1">MODA CSS TASARIMA HOŞ GELDİNİZ </p>
Tasarımın Altındaki Böüme </div> </div> <div id="collection"> <div class="inner"> <div id="minigal"> <div><img src="http://brknl.br.funpic.org/ModaTasarim/pic_4.jpg" _fcksavedurl="http://brknl.br.funpic.org/ModaTasarim/pic_4.jpg" width="57" height="53" alt="Pic" /></div> <div><img src="http://brknl.br.funpic.org/ModaTasarim/pic_5.jpg" _fcksavedurl="http://brknl.br.funpic.org/ModaTasarim/pic_5.jpg" width="57" height="53" alt="Pic" /></div> <div><img src="http://brknl.br.funpic.org/ModaTasarim/pic_6.jpg" _fcksavedurl="http://brknl.br.funpic.org/ModaTasarim/pic_6.jpg" width="57" height="53" alt="Pic" /></div> <div><img src="http://brknl.br.funpic.org/ModaTasarim/pic_7.jpg" _fcksavedurl="http://brknl.br.funpic.org/ModaTasarim/pic_7.jpg" width="57" height="53" alt="Pic" /></div> <div><img src="http://brknl.br.funpic.org/ModaTasarim/pic_8.jpg" _fcksavedurl="http://brknl.br.funpic.org/ModaTasarim/pic_8.jpg" width="57" height="53" alt="Pic" /></div> <div><img src="http://brknl.br.funpic.org/ModaTasarim/pic_9.jpg" _fcksavedurl="http://brknl.br.funpic.org/ModaTasarim/pic_9.jpg" width="57" height="53" alt="Pic" /></div> </div> <h2>New Collection</h2> <ul> <li>New Arrivals</li> <li>50% discount</li> </ul> <p>Websites about templates on <a href="http://www.justwebtemplates.com" _fcksavedurl="http://www.justwebtemplates.com">Just Web Templates</a>.</p> </div> </div> <div class="clear"> </div> <div id="seas"> <div id="seas-one"> <p>Temmuz</p> <p class="date">2009</p> </div> <div id="seas-two"> <p>Çantalar</p> <p class="date">2009</p> </div> <div id="seas-three"> <p>Gecelikler</p> <p class="date">2009</p> </div> <div class="clear"> </div> </div> </div> <div id="copyright"> <p>Copyright 2009 by BRKNL </p> </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;} html, body, h1, h2, h3, h4, ul, li { margin: 0; padding: 0; } h1 img { display: block; } img { border: 0; } a { color: #464544; } a:hover { color: #FFA405; } .left { float: left; } .right { float: right; } .more { text-align: right; } .clear { clear: both; } body { background: #504634; text-align: center; font: 11px verdana, arial, sans-serif; color: #695F4C; padding-bottom: 10px; } /** layout **/ #wrapper { text-align: left; margin: 37px auto; width: 672px; background: #ffffff; position: relative; } #header { background: #D9D1BC url(http://brknl.br.funpic.org/ModaTasarim/header.jpg) no-repeat; height: 266px; } #logo { position: absolute; top: 12px; left: 300px; width: 170px; color: #52616E; } #logo h1 { font: bold 24px "arial narrow", arial, sans-serif; } #logo p { margin: 0; font-weight: bold; } #cart { position: absolute; top: 10px; left: 454px; width: 208px; background: #4B5360; width: 209px; } #cart-top { background: url(http://brknl.br.funpic.org/ModaTasarim/cart_top.gif) no-repeat; } #cart-bot { background: bottom left url(http://brknl.br.funpic.org/ModaTasarim/cart_bot.gif) no-repeat; } #cart-cart { background: 9px 11px url(http://brknl.br.funpic.org/ModaTasarim/cart.gif) no-repeat; } #cart-cart { padding: 8px 8px 8px 60px; color: white; } #cart p { margin: 0; } #cart .orange { color: #FFB400; font-size: 10px; } #cart a { color: white; font-size: 10px; } #nav { background: #4B5360; position: absolute; top: 101px; left: 287px; width: 385px; padding: 9px 0; text-align: center; } #nav li { list-style: none; display: inline; color: #fff; } #nav a { text-decoration: none; color: #fff; } #gallery { position: absolute; top: 155px; left: 287px; width: 385px; } #gallery li { list-style: none; text-indent: -999px; float: left; overflow: hidden; height: 111px; } #gallery .gwomen { background: url(http://brknl.br.funpic.org/ModaTasarim/pic_1.jpg) no-repeat; width: 127px; } #gallery .gkids { background: url(http://brknl.br.funpic.org/ModaTasarim/pic_2.jpg) no-repeat; width: 130px; } #gallery .gmen { background: url(http://brknl.br.funpic.org/ModaTasarim/pic_3.jpg) no-repeat; width: 128px; } #body { padding-top: 3px; background-color:#FFF; } #categories { float: left; width: 195px; } #seasonal, #collection { float: right; width: 474px; background: #D4CAB6; margin-bottom: 2px; } #seasonal .inner, #collection .inner { padding: 6px 12px; } #seasonal p, #collection p { margin: 0.9em 0; } .more a { font-size: 12px; color: #000; text-decoration: none; } .more a:hover { text-decoration: underline; } h3 { font: bold 14px "arial narrow", arial, sans-serif; color: #1B1812; } h2 { font: 18px "arial narrow", arial, sans-serif; color: #695F4C; padding-bottom: 10px; } #categories h2 { color: #fff; padding: 4px 0 5px 39px; background: #847A67; } #categories li { background: #D4CAB6 left url(http://brknl.br.funpic.org/ModaTasarim/bullet.gif) no-repeat; border-top: 1px solid #F4EFDF; list-style: none; font-size: 12px; padding: 7px 0 8px 35px; } #categories a { text-decoration: none; color: #000000; } #categories a:hover { text-decoration: underline; } #collection { background: #D4CAB6 bottom right url(http://brknl.br.funpic.org/ModaTasarim/person_bg.jpg) no-repeat; } #collection .inner { padding-right: 98px; } #minigal { float: right; width: 222px; margin-top: 1em; margin-bottom: 1em; } #minigal div { float: left; margin: 6px; } #collection ul { margin-left: 1.5em; } #collection li { margin: 0.2em 0; color: #463F32; font-size: 16px; font-weight: bold; font-family: "arial narrow", arial, sans-serif; } #collection p { width: 103px; margin-left: 1.5em; } #seas-one, #seas-two, #seas-three { height: 146px; } #seas-one { float: left; width: 195px; margin-right: 3px; background: url(http://brknl.br.funpic.org/ModaTasarim/foot_1.jpg) no-repeat; } #seas-two { float: left; width: 249px; margin-right: 3px; background: url(http://brknl.br.funpic.org/ModaTasarim/foot_2.jpg) no-repeat; } #seas-three { float: left; width: 222px; background: url(http://brknl.br.funpic.org/ModaTasarim/foot_3.jpg) no-repeat; } #seas p { text-align: right; color: #000; margin: 80px 15px 0 0; font-size: 23px; font-weight: bold; } #seas p.date { margin-top: 0; font-size: 16px; } #copyright { text-align: center; font-size: 9px; padding: 3px; }
