Pusu Vadisi - CSS Design 10

Screan Shoot

Tasarımın Üzerindeki Yazı

<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <meta name="description" content="description"/> <meta name="keywords" content="keywords"/> <meta name="author" content="author"/> <style type="text/css"> /* CSS'yi Tasarlayan: http://www.hazax.de.tl/ */ /* standard elements */ * { margin: 0; padding: 0; } a { color: #36C; } a:hover { color: #06F; } body { background: #EEE url(https://img.webme.com/pic/h/hazax/hazax-transparentiabg.gif); color: #444; font: normal 62.5% "Lucida Sans Unicode",sans-serif; margin: 0; } input { color: #555; font: normal 1.1em "Lucida Sans Unicode",sans-serif; } p,cite,code,ul { font-size: 1.2em; padding-bottom: 1.2em; } h1 { font-size: 1.4em; margin-bottom: 4px; } hazax-transparentiacode { background: url(https://img.webme.com/pic/h/hazax/hazax-transparentiabgcode.gif); border: 1px solid #F0F0F0; border-left: 6px solid #39F; color: #555; display: block; font: normal 1.1em "Lucida Sans Unicode",serif; margin-bottom: 12px; padding: 8px 10px; white-space: pre; } hazax-transparentiacite { background: url(https://img.webme.com/pic/h/hazax/hazax-transparentiaquote.gif) no-repeat; color: #666; display: block; font: normal 1.3em "Lucida Sans Unicode",serif; padding-left: 28px; } h1,h2,h3 { color: #367EA6; padding-top: 6px; } /* hazax-transparentiamisc */ .hazax-transparentiaclearer { clear: both; } /* hazax-transparentiastructure */ .hazax-transparentiacontainer { background: url(https://img.webme.com/pic/h/hazax/hazax-transparentiabgc.gif) repeat-y; margin: 0 auto; padding-bottom: 6px; width: 767px; border-bottom: 1px solid #DDD; } .hazax-transparentiaheader { background: url(https://img.webme.com/pic/h/hazax/hazax-transparentiaheader.gif) repeat-x; } /* hazax-transparentianavigation */ .hazax-transparentianavigation { margin-bottom: 4px; } .hazax-transparentianavigation a { background-color: #4A91C3; color: #FFF; float: left; font: bold 1.2em "Trebuchet MS",sans-serif; padding: 8px 0; width: 19%; border-right: 1px solid #FFF; text-align: center; text-decoration: none; } .hazax-transparentianavigation a:hover { background-color: #000; color: #FFF; } /* hazax-transparentiamain */ .hazax-transparentiamain { clear: both; padding: 8px 18px; } /* hazax-transparentiamain left */ .sidenav h1,.sidenav ul { padding-left: 12px; } .hazax-transparentiasidenav { background: #EEE; border: 1px solid #E5E5E5; float: left; width: 200px; } .hazax-transparentiasidenav h1 { color: #666; font-size: 1.2em; height: 20px; margin-top: 1.2em; } .hazax-transparentiasidenav ul { border-top: 1px solid #FAFAFA; background: #EEE url(https://img.webme.com/pic/h/hazax/hazax-transparentiabgul.gif) repeat-x; margin: 0; padding: 0; } .hazax-transparentiasidenav li { border: 1px solid #FAFAFA; border-top: none; list-style: none; margin: 0; } .hazax-transparentiasidenav li a { color: #777; display: block; font-size: 0.9em; padding: 3px 6px 3px 14px; text-decoration: none; } .hazax-transparentiasidenav li a:hover { color: #111; } /* hazax-transparentiacontent */ .hazax-transparentiacontent { float: right; width: 520px; } .hazax-transparentiacontent .hazax-transparentiaitem { padding: 6px 12px; border: 1px solid #EEE; background: #FFF; margin-bottom: 8px; } .hazax-transparentiacontent .hazax-transparentiadescr { color: #333; margin-bottom: 6px; } .hazax-transparentiacontent li { list-style: url(https://img.webme.com/pic/h/hazax/hazax-transparentiali.gif); margin-left: 18px; } /* hazax-transparentiasearch form */ form { padding: 0 0 6px 8px; } .hazax-transparentiastyled { border: 1px solid #DDD; padding: 4px; width: 510px; } /* hazax-transparentiafooter */ .hazax-transparentiafooter { background: #FFF; border: 1px solid #EEE; color: #666; font-size: 1.1em; margin: 0 auto; text-align: center; width: 720px; } .hazax-transparentiafooter a { color: #36C; text-decoration: none; } .hazax-transparentiafooter a:hover { color: #06F; text-decoration: underline; } .hazax-transparentiafooter .left, .hazax-transparentiafooter .right {padding: 6px 12px;} .hazax-transparentiafooter .right, .hazax-transparentiafooter .right a {color: #AAA;} .hazax-transparentiafooter .right a:hover {color: #666;} /* hazax-transparentiafloats */ .left {float: left;} .right {float: right;} </style> <title>Hazax Tasarim Sayfalari - wWw.Hazax.De.TL</title> </head> <body> <div class="hazax-transparentiacontainer"> <div class="hazax-transparentiamain"> <div class="hazax-transparentiaheader"> <div class="hazax-transparentiatitle"> <img src="https://img.webme.com/pic/h/hazax/hazax-transparentian.png" border="0" /> </div> </div> <div class="hazax-transparentiacontent"> <p style="text-align: center;"><BR> <input type="text" value="CSS Design 10" name="search" class="hazax-transparentiastyled" /></p> <div class="hazax-transparentiaitem"> <h1>Örnek Yazi Tipi</h1> <div class="hazax-transparentiadescr">1 - Örnek Yazi Tipi</div> <p>

Tasarımın Altındaki Kod

2 - Örnek Yazi Tipi</p> <hazax-transparentiacite>3 - Örnek Yazi Tipi</cite> <ul> <li>Tristique</li> <li>Aenean</li> <li>Pretium</li> </ul> <div class="hazax-transparentiaitem"> <ul> <li>Tristique</li> <li>Aenean</li> <li>Pretium</li> </ul> </div> <hazax-transparentiacode>margin-bottom: 12px; font: normal 1.1em "Lucida Sans Unicode",serif; background: none no-repeat; padding-left: 28px; color: #555;</hazax-transparentiacode> </div> <div class="hazax-transparentiaitem"> <h1>Haberler</h1> <div class="hazax-transparentiadescr">Haberin Yazilis Tarihi</div> </div> </div> <div class="hazax-transparentiasidenav"> <h1>Menu Basligi</h1> <ul> <li><a href="#">Link 0</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> <h1>Dost Site Linkleri</h1> <ul> <li><a href="#">Link 0</a></li> <li><a href="#">Link 1</a></li> </ul> <div></div> </div> <div class="hazax-transparentiaclearer"><span></span></div> </div> <div class="hazax-transparentiafooter"> <span class="hazax-transparentialeft">Copyright By © <a href="http://www.hazax.de.tl">wWw.Hazax.DE.TL</a> 2009</span> <span class="hazax-transparentiaright"><a href="http://www.hazax.de.tl">Hazax Tasarim</a> </span> <div class="hazax-transparentiaclearer"><span></span></div> </div> </div> </body> </html>

CSS Kodu Bölümüne

td.nav {visibility:hidden;} li.nav_element{display: none;} td.headline2 {visibility:hidden;} td.nav_element checked_menu {visibility:hidden;} td.content_container{visibility:hidden;} #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;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;} td.nav {visibility:hidden;} li.nav_element{display: none;} td.headline2 {visibility:hidden;} td.nav_element checked_menu {visibility:hidden;} td.content_container{visibility:hidden;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} td.nav {visibility:hidden;} li.nav_element{display: none;} td.headline2 {visibility:hidden;} td.nav_element checked_menu {visibility:hidden;} td.content_container{visibility:hidden;}