Arkadaş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;
}