Renkli Bölge'11 - Tasarım 2

Tasarım 2

TASARIMIN ÜSTÜNDEKI YAZI BÖLÜMÜNE
KOD:

<div id="header"> <div id="logo"> <h1><a href="#">KODSISTEMI</a></h1> <h2><a href="http:///">www.kodsistemi.tr.gg</a></h2> </div> <div id="menu"> <ul> <li class="active"><a href="#">My Blog</a></li> <li><a href="#">My Photos</a></li> <li><a href="#">My Favorites</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Contact Me</a></li> </ul> </div> </div> <div id="content"> </div> </div> </div> <div id="colTwo"> <ul> <li> <h2><span>Search</span></h2> <form method="get" action="#"> <div> <input type="text" id="textfield1" name="textfield1" value="" size="18" /> <input type="submit" id="submit1" name="submit1" value="Search" /> </div> </form> </li> <li> <h2><span>Archives</span></h2> <ul> <li><a href="#">January 2007</a></li> <li><a href="#">December 2006</a></li> <li><a href="#">November 2006</a></li> <li><a href="#">October 2006</a></li> <li><a href="#">September 2006</a></li> <li><a href="#">January 2006</a></li> </ul> </li> <li> <h2><span>Categories</span></h2> <ul> <li><a href="#">Quisque vestibulum</a> (23)</li> <li><a href="#">Sed a nisl a lacus</a> (78)</li> <li><a href="#">Quisque sagittis</a> (11)</li> <li><a href="#">In aliquet hendrerit</a> (65)</li> <li><a href="#">Praesent sit amet</a> (54)</li> </ul> </li> <li> <h2><span>Blogroll</span></h2> <ul> <li><a href="#">AnotherFriendlySite.net</a></li> <li><a href="#">CoolSite.com</a></li> <li><a href="#">MyBestFriend.com</a></li> </ul> </li> <li> <h2><span>Meta</span></h2> <ul> <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li> </ul> </li> </ul> </div>

TASARIMIN ALTINDAKI YAZI BÖLÜMÜNE
KOD:

CSS KODU BÖLÜMÜNE
KOD:

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;} #counter{display: none;} /* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ body { margin: 0; padding: 0; background: #e0ffff url(http://img249.imageshack.us/img249/3047/wwwkodsistemitrggimg1xn3.gif) repeat-x; font: normal small sans-serif; color: #878C66; } h1, h2, h3, h4, h5, h6 { color: #997867; } a { text-decoration: none; color: #825037; } a:hover { text-decoration: underline; } /* Header */ #header { width: 700px; height: 160px; margin: 0 auto; color: #7ac5cd; } /* Logo */ #logo { float: left; padding: 12px 0 0 0; } #logo * { margin: 0; text-decoration: none; font-weight: normal; color: #20b2aa; } #logo h1 { letter-spacing: -2px; font-size: 1.8em; } #logo h2 { margin-top: -5px; padding-left: 2px; font-size: 1em; } /* Menu */ #menu { float: right; } #menu ul { margin: 0; padding: 37px 0 0 0; list-style: none; } #menu li { display: inline; } #menu a { display: block; float: left; height: 22px; margin-left: 2px; padding: 8px 15px 0 15px; background: #87ceeb url(http://img88.imageshack.us/img88/9263/wwwkodsistemitrggimg2xa3.gif) repeat-x; border: 1px solid #C9CCB9; border-bottom: none; text-decoration: none; color: #878C66; } #menu .active a, #menu a:hover { height: 23px; background: #97ffff; } /* Content */ #content { width: 700px; margin: 0 auto; margin-left: 255px; } /* Column One */ #colOne { float: right; width: 470px; } #colOne .post { clear: both; margin-bottom: 3em; } #colOne .title { margin: 0; padding: 0; border-bottom: 1px solid #C9CCB9; font-size: 1.6em; } #colOne .posted, #colOne .meta { margin: 0; text-align: right; font-size: xx-small; } #colOne .posted { margin-top: -13px; } #colOne .meta { border-top: 1px solid #C9CCB9; } #colOne .meta p { margin: 0; } /* Column Two */ #colTwo { float: left; width: 200px; margin-left: 18px; margin-top: 2px; } #colTwo #textfield1 { width: 170px; } #colTwo #submit1 { display: none; } #colTwo ul { margin: 0; padding: 0; list-style: none; } #colTwo li h2 { margin: 0; padding: 0; line-height: 100%; } #colTwo li h2 span { margin: 0; padding: 5px 10px; background: #EED5D2 url(http://img411.imageshack.us/img411/5622/kodsistemitrggimg3ki4.gif) repeat-x; border: 1px solid #C9CCB9; border-bottom: none; text-transform: uppercase; font-size: 10px; } #colTwo li ul, #colTwo li form { margin: 0 0 10px 0; padding: 10px; border: 1px solid #C9CCB9; } /* Footer */ #footer { width: 700px; margin: 0 auto; padding: 1em; border-top: 1px solid #C9CCB9; } #footer p { font-size: xx-small; }