Gritasarim

Mavi-Yeşil Css Tasarım

---

---

Çok güzel bir tasarım üst ve sol da güzel bir menü seçeneğini sizlere sunuyorum.

---

Tasarım Özellikleri:

---

Tasarim İsmi:      -Mavi-Yeşil
Kategorisi:          -Css Tasarım
Telif Hakkı:         -Osmantalay
Eklenme:            -06/Nisan/2011

---

Paylaş

 Eklenme: 09 Mart 2011 Çarşamba

---

Tasarımın Üzerindeki Yazı:

---

<!-- Bu tasarim Osman Talay tarafindan tasarlanmistir--> <div id="tasarim"><div id="ust"><div class="logo"> <a href="http://osmantalay.tr.gg" target="_self"><img border="0" src="https://img.webme.com/pic/d/den-eme-68/newlogo689.png" alt="" /></a> </div> <div class="reklam"> <a href="http://osmantalay.tr.gg/" target="_blank"><img border="0" src="https://img.webme.com/pic/o/osmantalay/rklam687.gif" alt="" /></a> </div><div class="sagmenu"> <table height="396" cellspacing="0" cellpadding="0" border="0" width="970" style="width: 910px; height: 0px;"> <tbody> <tr> <td align="left" width="400" valign="top"> <table cellspacing="0" cellpadding="0" border="0" background="#" style="width: 180px; padding: 29px 0 0 0px;"> <tbody> <tr> <td align="left"><span style="font-family: Arial;"><span style="font-size: small;"><strong><em> Sitemize Hoşgeldiniz... </em></strong></span></span></td> </tr> </tbody> </table> </td> <td align="left" valign="top"> <table cellspacing="0" cellpadding="0" border="0" background="#" style="width: 720px; padding: 0px 0 0 57px; "> <tbody> <tr> <td align="left"> <div id="menu"><div class="nave"><script src="http://img52.xooimage.com/files/5/2/1/2758cb8.js" type="text/javascript"></script> <script src="http://img64.xooimage.com/files/9/4/c/2758f44.js" type="text/javascript"></script> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://osmantalay.tr.gg">Menü1</a> <ul> <li><a href="Link" _fcksavedurl="Link">Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://osmantalay.tr.gg">Menü2</a> <ul> <li><a href="Link" _fcksavedurl="Link" >Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://osmantalay.tr.gg">Menü3</a> <ul> <li><a href="Link" _fcksavedurl="Link" >Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://osmantalay.tr.gg">Menü4</a> <ul> <li><a href="Link" _fcksavedurl="Link" >Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://osmantalay.tr.gg">Menü5</a> <ul> <li><a href="Link" _fcksavedurl="Link" >Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://osmantalay.tr.gg">Menü6</a> <ul> <li><a href="Link" _fcksavedurl="Link" >Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://osmantalay.tr.gg">Menü7</a> <ul> <li><a href="Link" _fcksavedurl="Link" >Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://osmantalay.tr.gg">Menü8</a> <ul> <li><a href="Link" _fcksavedurl="Link" >Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div></div><div id="orta"> <div class="soltaraf"><div class="arrowlistmenu"> <a target="_blank" href="Link"><img height="111" border="0" width="111" alt="" beners.png="img.webme.com=" http:="" src="https://img.webme.com/pic/o/osmantalay/111x111.png" /></a> <a target="_blank" href="Link"><img height="111" border="0" width="111" src="https://img.webme.com/pic/o/osmantalay/111x111.png" alt="" /></a> <a target="_blank" href="Link"><br /> <img height="111" border="0" width="111" alt="" beners.png="img.webme.com=" http:="" src="https://img.webme.com/pic/o/osmantalay/111x111.png" /></a> <a target="_blank" href="Link"><img height="111" border="0" width="111" src="https://img.webme.com/pic/o/osmantalay/111x111.png" alt="" /></a> <br /> <hr /> <div class="urbangreymenu"> <div class="urbangreymenu"> <h3 class="headerbar">Ana Menü</h3> <ul> <li><a href="http://osmantalay.tr.gg/" _fcksavedurl="http://osmantalay.tr.gg/">Ana Sayfa</a></li> <li><a href="http://osmantalay.tr.gg/Destek-Ol.htm" _fcksavedurl="http://osmantalay.tr.gg/Destek-Ol.htm">Destek Ol</a></li> <li><a href="http://osmantalay.tr.gg/Siteni-Ekle.htm" _fcksavedurl="http://osmantalay.tr.gg/Siteni-Ekle.htm">Siteni Ekle</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Dost Siteler</a></li> <li><a href="http://osmantalay.tr.gg/iletisim.htm" _fcksavedurl="http://osmantalay.tr.gg/iletisim.htm">Bana Ulaşın</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Site Haritası</a></li> <li><a href="http://osmantalay.tr.gg/defter.htm" _fcksavedurl="http://osmantalay.tr.gg/defter.htm">Konuk Defteri</a></li> </ul> <h3 class="headerbar">Sİten İçİn</h3> <ul> <li><a href="http://osmantalay.tr.gg/html-kodlari.htm" _fcksavedurl="http://osmantalay.tr.gg/html-kodlari.htm">Html Kodları</a></li> <li><a href="http://osmantalay.tr.gg/Web-Dersleri.htm" _fcksavedurl="http://osmantalay.tr.gg/Web-Dersleri.htm">Web Dersleri</a></li> <li><a href="http://osmantalay.tr.gg/Grafik-Odamiz.htm" _fcksavedurl="http://osmantalay.tr.gg/Grafik-Odamiz.htm">Grafik Odamız</a></li> <li><a href="http://osmantalay.tr.gg/Css-Tasarimlar.htm" _fcksavedurl="http://osmantalay.tr.gg/Css-Tasarimlar.htm">Css Tasarımlar</a></li> <h3 class="headerbar">BİZİM Oda</h3> <ul> <li><a href="http://osmantalay.tr.gg/Aksaray.htm" _fcksavedurl="http://osmantalay.tr.gg/Aksaray.htm">Aksaray</a></li> <li><a href="http://osmantalay.tr.gg/Messenger.htm" _fcksavedurl="http://osmantalay.tr.gg/Messenger.htm">Messenger</a></li> <li><a href="http://osmantalay.tr.gg/incelemeler.htm" _fcksavedurl="http://osmantalay.tr.gg/incelemeler.htm">İncelemeler</a></li> <li><a href="http://osmantalay.tr.gg/Bilmedikleriniz.htm" _fcksavedurl="http://osmantalay.tr.gg/Bilmedikleriniz.htm">Bilmedikleriniz</a></li> <h3 class="headerbar">İSlaMİYEt</h3> <ul> <li><a href="http://osmantalay.tr.gg/" _fcksavedurl="http://osmantalay.tr.gg/">Eklenecek</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Eklenecek</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Eklenecek</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Eklenecek</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Eklenecek</a></li> <h3 class="headerbar">Sağlık BİLGİSİ</h3> <ul> <li><a href="http://osmantalay.tr.gg/" _fcksavedurl="http://osmantalay.tr.gg/">Eklenecek</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Eklenecek</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Eklenecek</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Eklenecek</a></li> <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg">Eklenecek</a></li> <h3 class="headerbar">Haftanın Vİdeosu</h3> <div style="background-color: rgb(9, 9, 9); width: 177px;"><embed width="227" height="190" allowfullscreen="true" allowscriptaccess="always" bgcolor="#090909" wmode="window" type="application/x-shockwave-flash" src="http://www.vidivodo.com/VideoPlayerShare.swf?u=BFdAS1tEXxI="></embed></div> </div></div></div></div><div class="icerikosman"> <!-- Bu tasarim Osman Talay tarafindan tasarlanmistir-->

Tasarımın Altındaki Yazı:

---

</div></div><div id="alt"> <div class="altreklam"> <table cellspacing="0" cellpadding="0" border="0" align="left" style="width: 742px; height: 120px;"> <tbody> <tr> <td align="left" width="227" valign="top" rowspan="2"> <p><span class="style4"> <div style="border-right: 1px solid rgb(224, 224, 224); margin: 1px 10px 10px 0px; padding: 5px; float: left; width: 250px; text-align: left;"> <div><span class="style8"><span class="style11"> <img border="0" align="left" src="https://img.webme.com/pic/o/osmantalay/bigotalay.png" style="width: 96px; height: 99px;" alt="" /><span style="font-family: Arial;"><span style="font-size: small;"><em><br /> <br /> Bu Tasarım <a href="http://osmantalay.tr.gg/" target="_blank">Osman Talay </a><br /> Tarafından Yapılmıştır.</em></span></span> </span></span></div> </div> </span></p> </td> <td align="left" width="231" valign="top" rowspan="2"><span class="style8"> <span class="style11"> <div style="border-right: 1px solid rgb(224, 224, 224); margin: 1px 0px 10px; padding: 5px; float: left; width: 180px; text-align: left;"> <div><span style="font-size: small;"><span class="style4"><span style="font-family: Arial;"><span style="font-style: italic;"><span style="font-weight: bold;">Yazı Ekle</span></span></span></span></span><span class="style4"><span style="font-size: small;"><span style="color: rgb(128, 128, 128);"><em><strong><span style="font-family: Arial;"><br /> <br /> <br /> <br /> <br /> <br /> </span></strong></em></span></span></span></div> </div> </span></span></td> <td align="left" width="295" valign="top" rowspan="2"><span class="style12"> <span class="style15"> <div style="border-right: 1px solid rgb(224, 224, 224); margin: 1px 0px 10px; padding: 5px; float: left; width: 180px; text-align: left;"> <div><span style="font-size: small;"><span class="style4"> <span style="font-family: Arial;"><span style="font-style: italic;"><span style="font-weight: bold;">Yazı Ekle<br /> <br /> <br /> <br /> <br /> <br /> </span></span></span></span></span><span class="style4"> </span></div> </div> </span></span></td> <td align="left" width="295" valign="top" rowspan="2"><span class="style12"> <span class="style15"> <div style="border-right: 1px solid rgb(224, 224, 224); margin: 1px 0px 10px; padding: 5px; float: left; width: 180px; text-align: left;"> <div><span style="font-size: small;"><span class="style4"> <span style="font-family: Arial;"><span style="font-style: italic;"><span style="font-weight: bold;">Yazı Ekle<br /> <br /> <br /> <br /> <br /> <br /> </span></span></span></span></span><span class="style4"> </span></div> </div> </span></span></td> </tr> </tbody> </table> </div>

Css Kodu:

---

iframe{border:solid 1px #000000;} 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: auto; margin-right: auto; background: url(https://img.webme.com/pic/d/den-eme-68/335bgrs.jpg) top center fixed; } #tasarim{ width: 910px; margin-left: auto; margin-right: auto; } #ust{ margin-left: auto; margin-right: auto; background: url(https://img.webme.com/pic/d/den-eme-68/usttalay13.png); width: 910px; height: 175px; float: left; } .logo { width:300px; padding: 19px 0 0 20px; float: left; overflow: hidden; } .reklam{ width:468px; height: 60px; padding: 23px 0 0 93px; float: left; overflow: hidden; } .sagmenu { width:910px; height: 350px; padding: 0px 0 0 15px; float: leftt; font-size: 13px; color: #000000; font-family: Arial; overflow: hidden; } #orta{ margin-left: auto; margin-right: auto; background: url(https://img.webme.com/pic/d/den-eme-68/ortatalay1.png); width: 910px; height: 100%; float: left; } .soltaraf{ width:227px; float: left; padding: 0 0 0 14px; overflow: hidden; } .icerikosman { width:615px; float: left; padding: 0 0 0 33px; overflow: hidden; text-align: justify; } .altreklam{ float: left; width:910px; height:100px; padding: 50px 0 0 16px;} #alt{ margin-left: auto; margin-right: auto; background: url(https://img.webme.com/pic/d/den-eme-68/alttalay6.png); width: 910px; height: 175px; float: left; } input[type="text"] { font-family : "Trebuchet MS"; font-size : 11px; font-weight : normal; color : #333333; border : 1px solid #cccccc; -webkit-border-radius: 6px; -moz-border-radius: 6px; background : #f6f6f6 url(https://img.webme.com/pic/o/osmantalay/style1_txt_bgot.gif) repeat-x top; } input[type="text"]:focus, input[type="text"]:active { border-color : #777; } input[type="submit"] { cursor : pointer; font-family : "Trebuchet MS"; font-size : 11px; font-weight : normal; color : #333333; border : 1px solid #c6c7ca; -webkit-border-radius: 6px; -moz-border-radius: 6px; background : #e4e4e4 url(https://img.webme.com/pic/o/osmantalay/style1_btn_bgot.gif) repeat-x top; } textarea { font-family : "Trebuchet MS"; font-size : 11px; font-weight : normal; color : #333333; border : 1px solid #cccccc; -webkit-border-radius: 6px; -moz-border-radius: 6px; background : #f6f6f6 url(https://img.webme.com/pic/o/osmantalay/style1_txt_bgott.gif) repeat-x top; } #below_content{margin-bottom:-950px;} font[color="green"]{ background-color:#ADFF2F; border:1px solid #00B233; color:#000000; -moz-border-radius:6px; -khtml-border-radius:6px;} A{ text-decoration : none; } font[color="red"]{ background-color:#FF9999; border:1px solid #CC0033; color:#000000; -moz-border-radius:6px; -khtml-border-radius:6px;} A{ text-decoration : none; } hr { border: 0; border-top: 1px solid #e0e0e0; color: white;} tt { background: #F2F2F2 ; border: dotted 1px #778899; padding: 5px 5px 5px 5px; font-size:12px } code { margin : 4px 8px; padding : 4px; text-align : left; display : block; overflow : auto; -moz-background-inline-policy: continuous; -moz-border-radius: 6px 6px 6px 6px; font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace; background: #FFFAE0 url(https://img.webme.com/pic/o/osmantalay/otorsdstl.bmp) right top no-repeat; border : 2px dotted #AA9B77; } /* Font Özellikkleri Tüm Sayfalarda */ td { color:#000000; font-size:14px; text-align:left; font-family: Trebuchet MS; } a{color:#0e9dc1;text-decoration:none;font:bold} a:hover{color:#C0C0C0;text-decoration:none;font:bold} A{ text-decoration : none; } A:Hover{ text-decoration : underline; } #menu{margin-left:auto; margin-right:auto; background:url(#); width:1000px; height:70px; float:left;} .nave{width:970px; height:20px; padding:20px 0 0 10px;} .jqueryslidemenu{margin:0 auto;font:12px verdana;font-weight:bold;} .jqueryslidemenu ul{margin: 0;padding: 0;list-style-type: none;} .jqueryslidemenu ul li{position: relative;display: inline;float: left;color:#f000} .jqueryslidemenu ul li a{display: block;color:#333;padding: 10px 10px;z-index:150;text-decoration: none;} .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{color:#000;font-weight:bold;} .jqueryslidemenu ul li a:hover{color:#FFF;text-decoration:none;} .jqueryslidemenu ul li ul{position: absolute;left: 0;display: block;visibility: hidden;border-left:1px solid #999; border-right:1px solid #999;border-top:1px solid #999;} .jqueryslidemenu ul li ul li{display: list-item;float: none;z-index:100;} .jqueryslidemenu ul li ul li ul{top: 0;} .jqueryslidemenu ul li ul li a{font: normal 11px Verdana;width: 160px;padding: 4px;margin: 0; border-top-width: 0;border-bottom: 1px solid #999;border-left: 1px solid #fff; background:url(https://img.webme.com/pic/o/osmantalay/fonmeot.png)} .jqueryslidemenu ul li a .ns {background:#999;} .jqueryslidemenu ul li ul li a:hover{background: skyblue } .downarrowclass{position: absolute;top: 12px;right: 2px;} .rightarrowclass{position: absolute;top: 6px;right: 5px;} Sol Menü <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .urbangreymenu{ width: 226px; height: 10px; /*width of menu*/ } .urbangreymenu .headerbar{ width: 226px; height: 10px; font: bold 12px Trebuchet MS; color: white; background: #FFFFFF url( https://img.webme.com/pic/d/den-eme-68/menusolbg687.png) repeat-x center left;/ margin-bottom: 0; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 9px 20px; /*20px is left indentation of header text*/ } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /*bottom spacing between each UL and rest of content*/ } .urbangreymenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .urbangreymenu ul li a{ font: normal bold 12px Arial; color: black; background: #dbe6ec; display: block; padding: 5px 0; line-height: 12px; padding-left: 4px; /*link text is indented 4px*/ text-decoration: none; } .urbangreymenu ul li a:visited{ color: black; } .urbangreymenu ul li a:hover{ /*hover state CSS*/ color: white; background: #80bbd9; } </style> <style> A{ text-decoration : none; } a{color:#0e9dc1;text-decoration:none;font:bold} a:hover{color:#C0C0C0;text-decoration:none;font:bold} </style> <style> A{ text-decoration : none; } A:Hover{ text-decoration : underline; }