Css Paylas - Renkli Tasarim

TASARIM ÜSTÜ


 [/url] <div align="center"><table border="0" width="70%"><tr><td> <div id="tasarim"> <div id="ust"></div> <div id="orta"> <div class="solsutun"><div class="solsutun"><style type="text/css"> .arrowlistmenu{ width: 200px; /*width of menu*/ } .arrowlistmenu .headerbar{ font: bold 14px Arial; color: gold; background: black url(media/titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ } .arrowlistmenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li a{ color: #000000; background: (media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #000000; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #000000; background-color:#808080; } </style> <div class="arrowlistmenu"> <h3 class="headerbar">SOL MENÜ</h3> <ul> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <div class="arrowlistmenu"> <h3 class="headerbar">SOL MENÜ</h3> <ul><li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> </ul> </div> <style type="text/css"> .arrowlistmenu{ width: 180px; /*width of menu*/ } .arrowlistmenu .headerbar{ font: bold 14px Arial; color: gold; background: black url(media/titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ } .arrowlistmenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li a{ color: #000000; background: (media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #000000; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #000000; background-color:#808080; } </style> <div class="arrowlistmenu"> <h3 class="headerbar">Katogoriler</h3> <ul><li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li> <li><a href="http://www.sensin96.tr.gg">Menü Elemanı</a></li>> </ul> </div> </ul> </div> <div> </div> <div id="container"><br /> <div id="sidebar_container"> <h2 id="sidebar_heading"> </h2> </div> </div> </div> <br /> </div> <div class="sagsutun">  [/url] </div> </div> <div id="alt"></div> </div><br><br> 
CSS table {margin-left: auto;margin-right: auto} 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;} * {padding: 0; margin:0 } body { margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/b/bycity/dvrkagiti1.jpg) top center fixed; } #tasarim{ width: 1000px; margin-left: 0 auto; margin-right:0 auto; } #ust{ margin-left: 0 auto; margin-right:0 auto; background: url(http://img43.imageshack.us/img43/6603/cityust5.png); width: 1000px; height: 191px; float: left; } #orta{ margin-left: 0 auto; margin-right:0 auto; background: url(https://img.webme.com/pic/o/osmantalay/bycityorta.png); width: 1000px; height: 100%; float: left; } .solsutun{ width:195px; float: left; padding: 0 0 0 25px; overflow: hidden; } .sagsutun { width:675px; float: left; padding: 0 0 0 50px; overflow: hidden; text-align: justify; } #alt{ margin-left: 0 auto; margin-right:0 auto; background: url(http://img406.imageshack.us/img406/5636/cityalt5.png); width: 1000px; height: 196px; float: left; }