Css Tasarım Furyası

Sizler İçin Yaptıgım Kendim Çizdigim C-d V4 Tasarımını Sizlerle Paylaşıyorum Yorumlarınızı Eksik Etmeyiniz
Örnek İçin www.zizatom.tr.gg
<

Tasarım Üstü ;

<div id="tasarim"> <div id="baslik"></div> <div id="ust"><div class="ustsol"><p><strong><span style="color: #ff0000">Yep Yeni V5 Tasarımı İle Karşınızdayız</span></strong></p></div> <div class="ustsag"><style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .suckertreemenu ul{ margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .suckertreemenu ul li{ position: relative; display: inline; float: left; background-color: #F3F3F3; /*overall menu background color*/ } /*Top level menu link items style*/ .suckertreemenu ul li a{ display: block; width: 150px; /*Width of top level menu link items*/ padding: 1px 8px; border: 1px solid black; border-left-width: 0; text-decoration: none; color: navy; } /*1st sub level menu*/ .suckertreemenu ul li ul{ left: 0; position: absolute; top: 1em; /* no need to change, as true value set by script */ display: block; visibility: hidden; } /*Sub level menu list items (undo style from Top level List Items)*/ .suckertreemenu ul li ul li{ display: list-item; float: none; } /*All subsequent sub menu levels offset after 1st level sub menu */ .suckertreemenu ul li ul li ul{ left: 159px; /* no need to change, as true value set by script */ top: 0; } /* Sub level menu links style */ .suckertreemenu ul li ul li a{ display: block; width: 200px; /*width of sub menu levels*/ color: navy; text-decoration: none; padding: 1px 5px; border: 1px solid #ccc; } .suckertreemenu ul li a:hover{ background-color: black; color: white; } /*Background image for top level menu list links */ .suckertreemenu .mainfoldericon{ background: #F3F3F3 url(http://www.dynamicdrive.com/cssexamples/media/arrow-down.gif) no-repeat center right; } /*Background image for subsequent level menu list links */ .suckertreemenu .subfoldericon{ background: #F3F3F3 url(http://www.dynamicdrive.com/cssexamples/media/arrow-right.gif) no-repeat center right; } * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/ padding-top: 1em; } /* Holly Hack for IE */ * html .suckertreemenu ul li { float: left; height: 1%; } * html .suckertreemenu ul li a { height: 1%; } /* End */</style><script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script> <div class="suckertreemenu"> <ul id="treemenu1"> <li><a style="border-left: black 1px solid" href="http://www.cssdizgini.tr.gg/anasayfa.htm" _fcksavedurl="http://www.cssdizgini.tr.gg/anasayfa.htm"><span style="color: #ff0000">Anasayfa</span></a></li> <li><a href="http://cssdizgini.tr.gg/ANKET.htm" _fcksavedurl="http://cssdizgini.tr.gg/ANKET.htm"><span style="color: #ff0000">Anket</span></a></li> <li><a style="width: 106px; height: 1.77%" href="http://cssdizgini.tr.gg/Z%26%23304%3BYARET%C7%26%23304%3B-DEFTER%26%23304%3B.htm" _fcksavedurl="http://cssdizgini.tr.gg/Z%26%23304%3BYARET%C7%26%23304%3B-DEFTER%26%23304%3B.htm"><span style="color: #ff0000"> Defter</span></a></li> <li><a style="width: 102px; height: 1.77%" href="http://cssdizgini.tr.gg/B%26%23304%3BLG%26%23304%3B-VE-%26%23304%3BLET%26%23304%3B%26%23350%3B%26%23304%3BM.htm" _fcksavedurl="http://cssdizgini.tr.gg/B%26%23304%3BLG%26%23304%3B-VE-%26%23304%3BLET%26%23304%3B%26%23350%3B%26%23304%3BM.htm"><span style="color: #ff0000">İletişim</span></a></li> </ul> </div></div></div> <div id="orta"> <div class="sagsutun"><br> <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .sexypanels{ list-style-type: none; margin: 0; padding: 0; width: 170px; /* width of menu */ } .sexypanels li{ border-bottom: 1px solid yellow; /* white border beneath each menu item */ } .sexypanels li a{ background: #ffffcc url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/ font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana; display: block; color: white; width: auto; padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */ text-indent: 8px; text-decoration: none; border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/ } .sexypanels li a:visited, .sexypanels li a:active{ color: white; } .sexypanels li a:hover{ background-color: black; /*color of menu onMouseover*/ color: blue; border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ }</style> <ul class="sexypanels"> <li><a class="menu" href="http://cssdizgini.tr.gg/-Oe-zel-Gen%E7lik-Tasar%26%23305%3Bm%26%23305%3B.htm" _fcksavedurl="http://cssdizgini.tr.gg/-Oe-zel-Gen%E7lik-Tasar%26%23305%3Bm%26%23305%3B.htm"><span style="color: #ff0000">İSTEK Gençlik TASARIM</span></a> <a class="menu" href="http://cssdizgini.tr.gg/-Oe-zel-Dj-Tasar%26%23305%3Bm%26%23305%3B.htm" _fcksavedurl="http://cssdizgini.tr.gg/-Oe-zel-Dj-Tasar%26%23305%3Bm%26%23305%3B.htm"><span style="color: #ff0000">İSTEK ÖZEL Dj TASARIM</span></a> <a class="menu" href="http://cssdizgini.tr.gg/Mario-Tasar%26%23305%3Bm.htm" _fcksavedurl="http://cssdizgini.tr.gg/Mario-Tasar%26%23305%3Bm.htm"><span style="color: #ff0000">MARİO OYUN TASARIM</span></a> <a class="menu" href="http://cssdizgini.tr.gg/CSS-H_F-RED-TASARIM.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-H_F-RED-TASARIM.htm"><span style="color: #ff0000">CSS H-F RED TASARIM</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-OYUNCAK-TASARIMI-.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-OYUNCAK-TASARIMI-.htm"><span style="color: #ff0000">CSS OYUNCAK TASARIMI </span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-MAV%26%23304%3B-TASARIM.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-MAV%26%23304%3B-TASARIM.htm"><span style="color: #ff0000">CSS MAVİ TASARIM</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-KAHVERENG%26%23304%3B-TASARIM.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-KAHVERENG%26%23304%3B-TASARIM.htm"><span style="color: #ff0000">CSS KAHVERENGİ TASARIM</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-DAG-TASARIMI.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-DAG-TASARIMI.htm"><span style="color: #ff0000">CSS DAG TASARIMI</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-KIRMIZI-TASARIM.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-KIRMIZI-TASARIM.htm"><span style="color: #ff0000">CSS KIRMIZI TASARIM</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-DAMLA-TASARIMI.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-DAMLA-TASARIMI.htm"><span style="color: #ff0000">CSS DAMLA TASARIMI</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-KARI%26%23350%3BIK-TASARIM.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-KARI%26%23350%3BIK-TASARIM.htm"><span style="color: #ff0000">CSS KARIŞIK TASARIM</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-SADE-TASARIM.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-SADE-TASARIM.htm"><span style="color: #ff0000">CSS SADE TASARIM</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-MOR-TASARIM.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-MOR-TASARIM.htm"><span style="color: #ff0000">CSS MOR TASARIM</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS--Oe-ZELC%26%23304%3B-TASARIM.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS--Oe-ZELC%26%23304%3B-TASARIM.htm"><span style="color: #ff0000">CSS ÖZELCİ TASARIM</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-BAYRAK-TASARIMI.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-BAYRAK-TASARIMI.htm"><span style="color: #ff0000">CSS BAYRAK TASARIMI</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-DEN%26%23304%3BZ-TASARIMI.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-DEN%26%23304%3BZ-TASARIMI.htm"><span style="color: #ff0000">CSS DENİZ TASARIMI</span></a><a class="menu" href="http://cssdizgini.tr.gg/CSS-WORDPRESS-TASARIM.htm" _fcksavedurl="http://cssdizgini.tr.gg/CSS-WORDPRESS-TASARIM.htm"><span style="color: #ff0000">CSS WORDPRESS TASARIM</span></a></li> <li><span style="color: #ff0000"></span></li> </ul> </div> <div class="solsutun"><br>

Tasarım Altı ;

Css Kodu ;

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:  auto; margin-right: auto; background: url(http://www.backgroundlabs.com/backgrounds/190.jpg) top center fixed; } #tasarim{ width: 1000px; margin-left:  auto; margin-right: auto; } #ust{ margin-left:  auto; margin-right: auto; background: url(https://img.webme.com/pic/c/cssdizgini/tasarimust.gif); width: 1000px; height: 205px; float: left; } .ustsol { width: 295px; float: left; padding: 45px 0 0 555px; overflow: auto; text-align: justify; font-family:Verdana, Arial; font-size:14px; color: #000000; } .ustsag { width: 665px; float: left; padding: 65px 0 0 330px; text-align: justify; font-family:Verdana, Arial; font-size:14px; font-color:#000000; } #orta{ margin-left:  auto; margin-right: auto; background: url(https://img.webme.com/pic/c/cssdizgini/tasarimorta.gif); width: 1000px; height: 100%; float: left; } .sagsutun{ width:175px; float: left; padding: 0 0 0 26px; overflow: hidden; } .solsutun { width:675px; float: left; padding: 0 0 0 55px; overflow: hidden; text-align: justify; } #alt{ margin-left:  auto; margin-right: auto; background: url(https://img.webme.com/pic/c/cssdizgini/tasarimaltim.gif); width: 1000px; height: 205px; float: left; } .sagtik { width: 665px; float: left; padding: 65px 0 0 250px; text-align: justify; font-family:Verdana, Arial; font-size:14px; font-color:#000000; } .soltik { width: 665px; float: left; padding: 55px 0 0 33px; text-align: justify; font-family:Verdana, Arial; font-size:14px; font-color:#000000; } <style type="text/css"> .arrowlistmenu{ width: 500px; /*width of menu*/ } .arrowlistmenu .headerbar{ font: bold 14px Arial; color: white; background: black url(https://img.webme.com/pic/s/sanaldersimiz/titlebar.bmp) 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: #A70303; background: url(https://img.webme.com/pic/s/sanaldersimiz/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: #A70303; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #A70303; background-color: #F3F3F3; } </style>