Menü arkaplanını değiştiremiyorum( css bilenler? )
8
●651
- 22-08-2010, 11:51:21Arkadaşlar bu resimdeki alt menü, bide logunun yanında var. İndexin kodlarını veriyorum açtığınızda görürsünüz zaten. 2 sininde arkaplanını değiştirmek istiyorum.
İndex:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <!--[if IE]> <link rel="stylesheet" href="css/all-ie.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/ie-7.0.css" media="screen" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/ie-6.0.css" media="screen" /> <![endif]--> <script src="js/offspring-1.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script> <script type="text/javascript" language="javascript" src="js/jquery.cycle.all.js"></script> <script type="text/javascript"> $(function() { $('#referans_bir').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next1', prev: '#prev1' }); $('#referans_iki').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' }); $('.manset_resim').cycle({ fx: 'scrollLeft,scrollDown,scrollRight,scrollUp,fade,blindX,blindY,scrollHorz,scrollVert', randomizeEffects: true, timeout: 6000, speed: 1000, pager: '.navi', after: onAfter }); }); function onAfter() { $('#manset_baslik').html("<h2>" +this.alt+ "</h2>"); } </script> <style type="text/css"> <!-- body { background-image: url(../../amactema_html/amactema_html/images/bg_gray.jpg); } .style1 { font-size: 170%; color: #FFFFFF; } .style2 {color: #000000} --> </style></head> <body> <div id="ust_taraf"> <div id="ust_cerceve"> <div id="ust_bolum"> <div class="logo"><a href="#"><img src="images/logo.png" width="250" height="60" alt="" /></a></div> <!--logo bitti --> <div class="sayfamenu"> <ul class="dropdown"> <li><a href="index.html">Anasayfa</a></li> <li><a href="hakkimizda.html">Hakkımızda</a></li> <li><a href="referanslar.html">Referanslar</a></li> <li><a href="iletisim.html">İletişim</a></li> </div><!--sayfamenu bitti --> </div><!--ust_bolum bitti --> </div><!--ust_cerceve bitti --> </div><!--ust_taraf bitti --> <!--Orta Taraf --> <div id="orta_ust_taraf"> <div id="orta_ust_cerceve"> <div id="orta_ust_bolum"> <div class="manset"> <div class="manset_resim"> <img src="images/1.jpg" width="610" height="230" alt="Her türlü web sayfası" /> <img src="images/2.jpg" width="610" height="230" alt="Kartvizit tasarımı" /> <img src="images/3.jpg" width="610" height="230" alt="Graphic Dizayn" /> </div> <div id="manset_baslik"></div><!--manset_baslik bitti --> <div class="navi"></div><!--nav bitti --> </div><!--manset bitti --> <div class="twitter">twitter gelecek <span><a href="#"><img src="images/twitt.gif" alt="" /></a></span> </div><!--twitter bitti --> </div><!--orta_ust_bolum bitti --> </div><!--orta_ust_cerceve bitti --> </div><!--orta_ust_taraf bitti --> <!--Orta Taraf --> <!--Orta Taraf --> <div id="orta_alt_taraf"> <div id="orta_alt_cerceve"> <div id="orta_alt_bolum"> <div class="haberler"> <div class="haber_baslik"></div><!--haber_basik bitti --> <div class="haber_alt"> <img src="images/haberbasligi.png" class="alignleft" alt="" /> <h2><a href="#">Denemeler</a></h2> <p>Deneme yazısıdır. İki satır yazı gelecek buraya ama neden bu kadar kısa olduğunu ben bile bilmiyorum. <a href="#">»</a></p> </div><!--haber_alt bitti --> <div class="haber_alt"> <img src="images/haberbasligi.png" class="alignleft" alt="" /> <h2><a href="#">Denemeler</a></h2> <p>Deneme yazısıdır. İki satır yazı gelecek buraya ama neden bu kadar kısa olduğunu ben bile bilmiyorum. <a href="#">»</a></p> </div><!--haber_alt bitti --> <div class="haber_alt"> <img src="images/haberbasligi.png" class="alignleft" alt="" /> <h2><a href="#">Denemeler</a></h2> <p>Deneme yazısıdır. İki satır yazı gelecek buraya ama neden bu kadar kısa olduğunu ben bile bilmiyorum. <a href="#">»</a></p> </div><!--haber_alt bitti --> <div class="haber_alt"> <img src="images/haberbasligi.png" class="alignleft" alt="" /> <h2><a href="#">Denemeler</a></h2> <p>Deneme yazısıdır. İki satır yazı gelecek buraya ama neden bu kadar kısa olduğunu ben bile bilmiyorum. <a href="#">»</a></p> </div><!--haber_alt bitti --> <p align="right"><a href="#"><img src="images/tumunu_goster.gif" alt="" /></a></p> </div><!--haberler bitti --> <div class="referanslar"> <div class="referans_baslik"></div><!--referans_basik bitti --> <div id="referans_bir"> <img src="images/aras.jpg" width="200" height="200" /> <img src="images/elnino.jpg" width="200" height="200" /> <img src="images/myro.jpg" width="200" height="200" /> </div> <div class="nav1"><a id="prev1" href="#"><img src="images/prev.png" alt="" /></a><a id="next1" href="#"><img src="images/next.png" alt="" /></a></div> <p>Web Tasarım</p> <div id="referans_iki"> <img src="images/araslogo.jpg" width="200" height="200" /> <img src="images/myrologo.jpg" width="290" height="150" /> <img src="images/elninologo.jpg" width="200" height="200" /> </div> <div class="nav2"><a id="prev2" href="#"><img src="images/prev.png" alt="" /></a> <a id="next2" href="#"><img src="images/next.png" alt="" /></a></div> <p>Logolar</p> </div><!--referanslar bitti --> <div class="hizli_iletisim"> <div class="hizli_baslik"></div> <p> <!--hizli_baslik bitti --></p> <p align="center"> <img src="images/contact-256.png" width="256" height="256" /><br /> <span class="style1"> <span class="style2"> 0543 430 63 72</span> info@myrodizayn.com</span><br /> <!--hizli_iletisim bitti --> </p> </div> * </div> <!--orta_alt_bolum bitti --> </div><!--orta_alt_cerceve bitti --> </div><!--orta_alt_taraf bitti --> <!--Orta Taraf --> <!--Alt Taraf --> <div id="alt_taraf"> <div id="alt_cerceve"> <div id="alt_bolum"> <div class="seo_deneme"> <div class="seo_ust"> </div><!--seo_ust bitti --> <div class="seo_icerik"> <p align="center"><strong>MYRO WEB TASARIM</strong></p> </div> <!--seo_icerik --> <div class="seo_alt"> </div><!--seo_alt bitti --> </div><!--seo_deneme bitti --> <div class="alt_bilgi"> <div class="copyright">© 2010 Myro Dizayn - </div><!--copyright bilgi --> <div class="alt_menu"> <ul> <li><a href="index.html">Anasayfa</a></li> <li><a href="hakkimizda.html">Hakkımızda</a></li> <li><a href="referanslar.html">Referanslar</a></li> <li><a href="iletisim.html">İletişim</a></li> </ul> </div><!--alt_menu bitti --> </div><!--alt_bilgi bitti --> </div><!--alt_bolum bitti --> </div><!--alt_cerceve bitti --> </div><!--alt_bolum bitti --> <!--Alt Taraf --> </body> </html>Css:
/* Theme Name: AmacTema Theme URI: http://www.amacdizayn.com Description: Amacdizayn.com sitesinin resmi temasidir. Version: v1 Author: Unknown Author URI: Unknown AmacTema v1; Temanin tüm haklari onu tasarlayan ve bu bölümde adi geçen kisiye aittir. */ body {background:url(images/arkaplan.png) repeat top left;; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #f8f8f8; font-size: 70%; text-align:left; padding:0; margin:0;} em {font-size: 12px; color: #999999; font-style: italic;} a:link, a:visited { color: #006699; text-decoration: none; font-weight:bold;} a:hover, a:active { color: #CC3300; text-decoration: none; font-weight:bold;} a img { border: none;} p img {padding: 0; max-width: 100%;} img.aligncenter { display: block; margin-left: auto; margin-right: auto;padding: 4px;} img.alignright { padding: 4px; margin: 0 0 2px 5px; display: inline;} img.alignleft { padding: 4px; margin: 0 5px 5px 0; display: inline;} img.alignnone{ position: relative; margin: 5px 10px 0px 0px; padding:2px; float:left; max-width:100%; list-style:none;} ul { list-style: none; } .alignright { float: right;} .alignleft { float: left;} div, ul, p, h1, h2, h3, h4, img{padding:0; margin:0;} /*Ust Bolum*/ #ust_taraf{color:#3b3b3b; width:100%; float:left;} #ust_cerceve{ width:965px; margin:0 auto; position:relative; padding:0; } #ust_bolum{ float:left; width:962px; margin:0; position:relative; padding:0;} .logo{float:left; width:240px; position:relative; margin:0; padding:30px 0 15px 0;} .sayfamenu{float:right; width:700px; position:relative; margin:0; padding:50px 0 0 0; z-index:5;} ul.dropdown { position: relative; padding-left:100px;} ul.dropdown li { font-weight: bold; float: left; zoom: 1; } ul.dropdown a:hover { color: #000; } ul.dropdown a:active { color: #ffa500; } ul.dropdown li a { display: block; padding:4px; margin:0 5px; color: #fff; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { background: #d2e3ff; color:#4f4f4f; position: relative; } /* LEVEL TWO */ ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } ul.dropdown ul li { font-weight: normal; background: #d2e3ff; color: #000; padding:5px 0 0 0; border-bottom: 1px solid #b0dcff; float: none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; } ul.dropdown ul li a:link, ul.dropdown ul li a:visited { color:#4f4f4f; } ul.dropdown ul li a:hover, ul.dropdown ul li a:active { color:#fff; } /* LEVEL THREE */ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; } /*Orta ust Bolum*/ #orta_ust_taraf{color:#3b3b3b; width:100%; float:left; background:#fff url(images/orta_ust_arkaplan.png) repeat-x top left;} #orta_ust_cerceve{ width:965px; margin:0 auto; position:relative; padding:0;} #orta_ust_bolum{ float:left; width:962px; margin:0 auto; position:relative; padding:15px 0;} .manset{ float:left; width:620px; height:269px; position:relative; margin:0; padding:0; background-image: url(images/m_bg.jpg); background-repeat: no-repeat; background-position: left top; } #manset_baslik{ float:left; width:410px; position:relative; text-align:left;} #manset_baslik h2{ font-size:13px; color:#f8f8f8; padding:10px;} /*Yonlendirmeler*/ .navi{ float:left; width:200px; height:20px; position:relative; text-align:right; padding:15px 0 0 0; margin:0;} .navi a { background: url(images/navon.png) no-repeat center center; margin: 0 5px; padding: 6px 8px; color:#fff; font-size:8px; line-height:23px;} .navi a.activeSlide { background: url(images/navoff.png) no-repeat center center; color:#4f4f4f;} .navi a:focus { outline: none; } /*Referanslar*/ #referans_bir{ float:left; width:300px; position:relative; margin-left:15px;} #referans_iki{ float:left; width:300px; position:relative; margin-left:15px;} #referans_bir img, #referans_iki img { position:relative; width:290px; height:150px; z-index:3;} .nav1{ width:99%; position: relative; text-align:center; z-index:999;} .nav2{ width:99%; position:relative; text-align:center; z-index:999;} .referanslar p { color:#4f4f4f; font-size:11px; top:4px; font-style:italic; position:relative; text-align:right; padding:0 15px 10px 0;} #prev1, #prev2 { position:absolute; top:50px; left:0;} #next1, #next2 { position:absolute; top:50px; right:0;} .twitter{float:right; width:300px; height:270px; position:relative; margin:0; padding:0; background: url(images/twitter.png) no-repeat top left;} .twitter span{ position:absolute; bottom:5px; left:104px;} /*Orta alt Bolum*/ #orta_alt_taraf{color:#3b3b3b; width:100%; float:left; background:#f8f8f8 url(images/orta_alt_arkaplan.png) repeat-x top left;} #orta_alt_cerceve{ width:965px; margin:0 auto; position:relative; padding:0;} #orta_alt_bolum{ float:left; width:962px; margin:0 auto; position:relative; padding:10px 0;} .haberler{float:left; width:320px; position:relative; margin:0; padding:0;} .haber_baslik{ width:200px; height:30px; background:url(images/haberler.gif) no-repeat top left;} .haber_alt{ float:left; width:99%; margin:0; padding:5px 0;} .haber_alt h2{ font-size:11px; margin:0; padding:0;} .haber_alt img{ width:50px; height:50px;} .haber_alt p{ margin-top:3px; line-height:15px; font-size:10px; padding:0 10px 10px 0; border-bottom:1px solid #eee;} .referanslar{float:left; width:320px; position:relative; margin:0; padding:0;} .referans_baslik{width:200px; height:30px; background: url(images/referanslar.gif) no-repeat top left;} .hizli_iletisim{float:right; width:310px; height:366px; position:relative; margin:0; padding:0; background:url(images/iletisimm.gif) no-repeat left 30px;} .hizli_baslik{width:200px; height:30px; background:url(images/hizli.gif) no-repeat top left;} /*ic sayfalar*/ .arsiv_baslik{ float:left; width:960px; padding:5px 0; margin:0; position:relative;} .arsiv_baslik h2{ font-size:16px; color:#4f4f4f; padding:0 10px;} .arsiv_baslik p{ margin-top:5px; padding:0 10px; font-size:12px;} .kucuk{ font-size:10px; color:#999;} /*icerik*/ .sol_bolum{ float:left; width:620px; position:relative; margin:0; padding:0 10px; border-right:1px solid #eee;} .icerik { padding:0 0 10px 0; margin:0;} .icerik h2{ font-size:15px; padding:10px 0 2px 0;} .icerik p{ margin-top:10px; font-size:11px; line-height:18px;} /*Navigasyon*/ .navigasyon{ padding: 10px 0;} /*Portfolyo*/ .portfolyo{ padding:0 10px;} .kolon{ float:left; width:300px; height:250px; position:relative; margin:10px 5px; padding:5px 0;} .kat{ position:absolute; top:150px; background:#eee; padding:5px 10px;} .kolon h2{ font-size:15px;} .kolon p{ margin-top:5px; font-size:11px;} .kolon img{width:290px; height:150px; border:4px solid #eee;} /*Yan menu*/ .yan_menu_bir{ float:left; width:99%; position:relative; padding:10px 0; margin:5px 0;;} .yan_menu_bir h2{ color:#4f4f4f; padding:0 10px; font-size:14px; text-align:left;} .yan_menu_bir ul{ margin:0px; padding:0;} .yan_menu_bir li{ list-style-type:none;} .yan_menu_bir p{ margin-top:8px; padding:0 10px;} .yan_menu_bir ul li{ list-style:none; padding:10px 0 5px 0; margin:0 5px; font-size:11px; letter-spacing: -0.03em; text-align:left; border-bottom:1px solid #eee;} .yan_menu_bir ul li.last-child{ border-bottom:none;} .yan_menu_bir ul li a:link,.yan_menu_bir ul li a:visited{ text-decoration: none; color:#333; padding-left:18px; background:url(images/beyaz.png) no-repeat left top;} .yan_menu_bir ul li a:hover,.yan_menu_bir ul li a:active{ color:#006699; padding-left:18px; background:url(images/siyah.png) no-repeat left top;} .sag_bolum{ float:right; width:300px; position:relative; margin:0; padding:0;} /*Alt Bolum*/ #alt_taraf{color:#3b3b3b; width:100%; float:left; background: url(images/alt_arkaplan.png) repeat-x top left;} #alt_cerceve{ width:965px; margin:0 auto; position:relative; padding:0;} #alt_bolum{ float:left; width:962px; margin:0 auto; padding:10px 0;} .seo_deneme{float:left; width:950px; position:relative; margin:0; padding:10px 5px;} .seo_ust{ float:left; width:942px; height:6px; background:url(images/seo_ust.png) no-repeat top center;} .seo_icerik{float:left; width:942px; padding:0 0 5px 0; background:url(images/seo_coklu.png) repeat-y top center;} .seo_icerik p{ margin-top:5px; padding:0 10px;} .seo_alt{ float:left; width:942px; height:5px; background:url(images/seo_alt.png) no-repeat top center;} .alt_bilgi{float:left; width:960px; position:relative; margin:0; padding:0;} .copyright{float:left; width:340px; position:relative; margin:0; padding:10px 0; color:#fff; font-size:11px;} .alt_menu{float:right; width:590px; position:relative; margin:0; padding:0;} .alt_menu ul{margin:0px; padding:10px 0 0 0; list-style-type:none; text-align:left; float:right;} .alt_menu ul li{display:block; float:left; text-align:center; padding:0 7px 0 5px; margin:0; font-size:10px; background:url(images/sayfa_cizgi.gif) no-repeat right center;} .alt_menu ul li.last-child{ background:none;} .alt_menu ul li a:link,.alt_menu ul li a:visited{padding:4px; color: #eee; text-decoration: none;} .alt_menu ul li a:hover,.alt_menu ul li a:active, .alt_menu ul li.current_page_item a, .alt_menu li.current_page_item a:hover{ background: #d2e3ff; color: #4f4f4f;} /*Web Hosting*/ a img {border:0;vertical-align:text-bottom;} table {border-collapse:collapse;} th.side { background: transparent url(i/bg_th_side.gif) no-repeat bottom left; } td.side { text-align:right; background: transparent url(i/bg_td_side.gif) no-repeat bottom left; width:180px; font:bold 12px/15px verdana; color:#4F4F4F; padding-right:8px; } th { height:64px; text-align:center; border-right:1px solid #fff; vertical-align:bottom; color:#fff; font:normal 21px/27px arial; letter-spacing:2px; background:transparent url(i/bg_th.gif) no-repeat bottom left; } td { text-align:center; background:transparent url(i/bg_td.gif) no-repeat bottom left; border-right:1px solid #fff; color:#fff; width:108px; height:40px; font:bold 12px/18px verdana; } td.on {background:transparent url(i/bg_td_on.gif) no-repeat bottom left;} th.on { background:transparent url(i/bg_th_on.gif) no-repeat bottom left; padding-bottom:9px; width:148px; } tfoot td { background:transparent url(i/bg_foot_td.gif) no-repeat top left; height:64px; vertical-align:top; padding-top:8px; } tfoot td.on { background:transparent url(i/bg_foot_td_on.gif) no-repeat top left; padding-top:16px; } tfoot td.side {background: transparent url(i/bg_foot_td_side.gif) no-repeat top left;} #formcontainer { width:443px; height:239px; background:transparent url(i/bg_form.gif) no-repeat top left; position:absolute; top:24px; left:341px; } #formcontainer form { padding:8px 10px; margin:0; } #formcontainer h2 { margin:0; padding:0 0 14px 0; font:bold 21px/27px arial; color:#fff; } #formcontainer fieldset { border:none; padding:0; } #formcontainer label { display:block; float:left; font:bold 12px/18px verdana; color:#fff; padding-bottom:12px; } #formcontainer label.email { width:350px; } #formcontainer label.email input { width:340px; } #formcontainer label.password { clear:left; padding-right:40px; } #formcontainer label.password input, #formcontainer label.retype input { width:150px; } #formcontainer fieldset.buttons { padding-top:10px; clear:left; } #prices { position:relative; } - 22-08-2010, 12:12:58Aynı şekilde buda üst taraf için:antishareware adlı üyeden alıntı: mesajı görüntüle
ul.dropdown li:hover { background: #d2e3ff; color:#4f4f4f; position: relative; }
