Yesil Yapraklı Tasarım

TASARIM ÜSTÜ
<div id="wrapper"> <div id="header"> <div id="leaves"></div> <h1>MySiteName</h1> </div> <div id="menu"> <div id="ladybug"></div> <ul> <li><a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/" class="hilite"><span>Home</span></a></li> <li><a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/"><span>About</span></a></li> <li><a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/"><span>Acorn</span></a></li> <li><a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/"><span>Contact</span></a></li> </ul> </div> <div id="content"> <div id="contentA"> <div id="contentB"> <div id="contentC"> <div id="main">

TASARIM ALTI
</div> </div> </div> </div> </div> <div id="clear"></div> </div> </div> </div> </div> <div id="footer"> <p style="text-align: center"> Copyright <a href="http://www.free-css.com/" _fcksavedurl="http://www.free-css.com/">MySiteName</a>. All Rights Reserved.</p> </div> </div>

CSS
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;} /*----------------------------------------- CSS Document | Acorn Design Coded by: Niki Liu (www.netapon.com) Contents: - Settings for everyone! - Miscellaneous elements - Layout elements -------------------------------------------*/ /* Settings for everyone! */ * { margin: 0; padding: 0; border: 0; } a:link, a:active, a:visited { color: #ae8157; text-decoration: underline; } a:hover { color: #ae8157; text-decoration: none; } p { line-height: 1.8em; padding: 0 40px 15px 40px; } h2 { text-transform: lowercase; font-weight: bold; font-size: 1.7em; color: #ae8157; padding: 10px 40px 10px 40px; } /* Miscellaneous elements */ .left { float: left; } .right { float: right; } /* Layout elements */ body { background: #000 url(http://img.webme.com/pic/k/koddeniyelim/leaves.gif) top repeat-x; font-family: Georgia, Verdana, sans-serif; font-size: 10px; } #wrapper { width: 684px; margin: 0 auto; overflow: hidden; } #header { width: 684px; } #header #leaves { background: url(http://www.hizliupload.com/img/626146headerLeaves.png) no-repeat; display: block; position: relative; left: 159px; width: 189px; height: 58px; } #header h1 { background: url(http://www.hizliupload.com/img/506262header.jpg) no-repeat; text-indent: -9999px; position: relative; left: 59px; width: 549px; height: 126px; } #menu { background: url(http://www.hizliupload.com/img/59322wood.jpg) no-repeat; position: relative; width: 684px; height: 59px; } #menu #ladybug { background: url(http://img.webme.com/pic/k/koddeniyelim/ladybug.png) no-repeat; position: absolute; z-index: 1; top: -13px; right: 50px; width: 35px; height: 35px; } #menu ul { list-style: none; position: absolute; bottom: 0 !important; bottom: -1px; left: 23px; } #menu li { background: url(http://img.webme.com/pic/k/koddeniyelim/tabOff.gif) repeat-x; float: left; height: 28px; margin: 0 10px 0 0; } #menu a { background: url(http://www.hizliupload.com/img/883560tabOff.gif) top left no-repeat; display: block; float: left; text-decoration: none; text-transform: lowercase; font-family: Arial, Verdana, sans-serif; font-weight: bold; font-size: 1.8em; color: #ad8056; height: 28px; } #menu a span { background: url(http://img.webme.com/pic/k/koddeniyelim/cRtabOff.gif) top right no-repeat; display: block; padding: 4px 12px 0 12px; } #menu a:hover, #menu a.hilite { background: #fff url(http://img.webme.com/pic/k/koddeniyelim/cLtabOn.gif) no-repeat; color: #000; } #menu a:hover span, #menu a.hilite span { background: url(http://img.webme.com/pic/k/koddeniyelim/cRtabOn.gif) top right no-repeat; } #content { background: #fff url(http://img.webme.com/pic/k/koddeniyelim/cTLcontent.gif) top left no-repeat; width: 684px; overflow: hidden; } #contentA { background: url(http://img.webme.com/pic/k/koddeniyelim/cTRcontent.gif) top right no-repeat; } #contentB { background: url(http://img.webme.com/pic/k/koddeniyelim/cBLcontent.gif) bottom left no-repeat; } #contentC { background: url(http://img.webme.com/pic/k/koddeniyelim/cBRcontent.gif) bottom right no-repeat; } #content #main { float: left; font-size: 1.4em; width: 444px; margin: 20px 0 0 0; } #content #side { background: #503112 url(http://img.webme.com/pic/k/koddeniyelim/acorn.gif) center center no-repeat; float: right; width: 200px; min-height: 100px; margin: 30px 20px; } #content #sideA { background: url(http://img.webme.com/pic/k/koddeniyelim/cTLside.gif) top left no-repeat; } #content #sideB { background: url(http://img.webme.com/pic/k/koddeniyelim/cTRside.gif) top right no-repeat; } #content #sideC { background: url(http://img.webme.com/pic/k/koddeniyelim/cBLside.gif) bottom left no-repeat; } #content #sideD { background: url(http://img.webme.com/pic/k/koddeniyelim/cBRside.gif) bottom right no-repeat; } #content #side a { color: #f7dbc6; } #content #side p { font-family: Verdana, Georgia, sans-serif; font-size: 1em; color: #f1c19d; padding: 0 15px 15px 15px; } #content #side h2 { text-align: center; text-transform: uppercase; font-weight: lighter; font-family: Arial, Verdana, sans-serif; font-size: 1.2em; letter-spacing: .2em; color: #fff; padding: 20px 20px 10px 20px; } #content #side #cleanup { width: 100%; height: 23px; clear: both; } #content #clear { width: 100%; height: 50px; clear: both; } #footer { width: 684px; height: 120px; text-align: center; font-family: Verdana, Georgia, sans-serif; font-size: 1.2em; color: #f1c0a0; } #footer a { color: #f1c0a0; } #footer p { margin: 10px 0; }