Mavi-Gri Tablo
Mavi-Gri Css Tablo Tasarım
Tasarım Üstü:
<div id="Testdesign"> <div id="oben"><h1 class="title"></h1></div>Tasarım Altı:
<div id="sockel">Tüm Hakları Saklıdır.WwW.WwebW.Net.Tc </div></div>Css Kodu:
div#nav_container{visibility: hidden;} li.nav_element{display: none;} h1#title{} h2#title{font-weight:normal;position: absolute; right: 300px;top: 248px;text-align: right; color: #FFFFFF;} li.nav_element{display: none;} li.nav_element a{display: none;} div.header{display: none;} a{font-weight:500; font-family:arial;color:#FFFFA8; font-size: 12px; text-decoration: none;} a:hover {font-weight:500;font-family:arial;color: #000023; font-size: 12px; text-decoration: none;} a:link {font-weight:500;font-family:arial;color: #000012; font-size: 12px; text-decoration: none;} a:active {font-weight:500;font-family:arial;color: #000034; font-size: 12px; text-decoration: none;} a:visited {font-weight:500;font-family:arial;color: #000034; font-size: 12px; text-decoration: none;} body {text-align: left;font-weight:600;font-family:arial;background-color:#c1c1c1;background-image: url(http://discreated.de/img/service/designs/bg.jpg);} * { padding: 0; margin: 0; } #Testdesign { width: 855px; margin: 20px 20px 20px 50px; border: 1px solid #000000;} #oben { color: #FFFFFF; width: 709px; float: left; padding: 70px; border: 1px solid #000000; height: 46px; margin: 2px 2px 2px 2px; background-image: url(http://img48.imageshack.us/img48/6017/bassliikkkky.png);} #sidebar_container { font-size: 12px; font-weight:500; font-family:arial; color: #000000; border: 1px solid #000000; background: #ffffff; margin: 0px 2px 2px 0px; padding: 0px; width: 178px; float: right;} #content { font-size: 12px; font-weight:500; font-family:arial; float: left; color: #000000; border: 1px solid #000000; background: #ffffff; margin: 0px 2px 2px 2px; padding: 45px 10px 10px 20px; width: 637px; display: inline; background-image: url(http://discreated.de/img/service/designs/textfeld.jpg);background-repeat: no-repeat;} #sockel { font-size: 12px; font-weight:500; font-family:arial; width: 843px; clear: both; color: #000000; border: 1px solid #000000; background: #ffffff; margin: 0px 2px 2px 2px; padding: 3px;} /* Die Navigation mit CSS */ #navi { width: 178px; margin: 0; padding: 0;} #navi ul, #navi li{ list-style-type: none; padding-top: 0px;} #navi li a { text-decoration: none; display: block; width:100%; padding: 0px;} #navi a:link, #navi a:visited { width: 166px; color: #000000; padding: 2px 0px 0px 10px; text-align: left; background-image: url(http://discreated.de/img/service/designs/button.jpg); height:23px;} #navi #akt { padding: 5px 10px 0px 0px; text-align: right; color: #FFFFFF; background-image: url(http://discreated.de/img/service/designs/nav.jpg); height:27px;} #navi a:hover{ text-align: left; color: #000000; background-image: url(http://discreated.de/img/service/designs/buttonh.jpg);} #counter{display: none;} </body></html>1.Extra Kutucuğuna eklenecek kod:
<ul id="navi"> <li style="font-weight: bold;"> <div id="akt"><span style="font-size: medium;">Menü</span></div> </li> <li style="color: rgb(0, 0, 0);"><a href="http://link1.de" _fcksavedurl="http://link1.de"> Link1</a></li> <li style="color: rgb(0, 0, 0);"><a href="http://link2.de" _fcksavedurl="http://link2.de"> Link2</a></li> <li style="color: rgb(0, 0, 0);"><a href="http://link3.de" _fcksavedurl="http://link3.de"> Link3</a></li> <li style="color: rgb(0, 0, 0);"><a href="http://link4.de" _fcksavedurl="http://link4.de"> Link4</a></li> <li style="color: rgb(0, 0, 0);"><a href="http://link5.de" _fcksavedurl="http://link5.de"> Link5</a></li> <li style="color: rgb(0, 0, 0);"><a href="http://link6.de" _fcksavedurl="http://link6.de"> Link6</a></li> <li style="color: rgb(0, 0, 0);"><a href="http://link7.de" _fcksavedurl="http://link7.de"> Link7</a></li> </ul> </body></html>