[CSS] nakładanie warstw Opcje

[piotrd]

mam taki oto układ divów
[(1)(2)]

gdzie:
[] = width 960px
(1) i (2) = width 540px każdy

kod

[HTML] pobierz, plaintext 
<div id="logo">
<ul>
<li>
   text1
</li>
<li>
   text2
</li>
</ul>
</div>
 
#logo {width:960px;height:180px}
#logo ul{overflow:hidden;list-style:none;}
#logo li{float:left;width:540px;}
[HTML] pobierz, plaintext 

jak zrobić aby (1) i (2) nachodziły na siebie i (1) był nadrzędny dla (2)?

Ten post edytował piotrd 28.08.2011, 13:50:59

[piotrd]

w dalszym ciągu jednak jest źle, <li id="shuffle"> pojawia sie pod <li> zamiast byc obok na zasadach left:-120px;z-index:-1;

[HTML] pobierz, plaintext 
<div id="head2">
    <div class="container">
      <div class="main">
		  <div id="logo">
			<ul>
			<li>
				<div id="title"><a href="./index.php" tabindex="1"><i>text</i><span></span><strong><i>text</i></strong></a></div>
				<div id="slogan">hasło</div>
 
			</li>
			<li id="shuffle">
				<img src="templates/img/top/4.jpg" class="th" alt="" border="0" /><img src="templates/img/top/12.jpg" class="th" alt="" border="0" /><img src="templates/img/top/3.jpg" class="th" alt="" border="0" /><img src="templates/img/top/11.jpg" class="th" alt="" border="0" /><img src="templates/img/top/5.jpg" class="th" alt="" border="0" /><img src="templates/img/top/1.jpg" class="th" alt="" border="0" /><img src="templates/img/top/6.jpg" class="th" alt="" border="0" /><img src="templates/img/top/2.jpg" class="th" alt="" border="0" /><img src="templates/img/top/7.jpg" class="th" alt="" border="0" /><img src="templates/img/top/9.jpg" class="th" alt="" border="0" /><img src="templates/img/top/10.jpg" class="th" alt="" border="0" /><img src="templates/img/top/8.jpg" class="th" alt="" border="0" />
			</li>  
			</ul>
		  </div>
      </div>
    </div>
  </div>
[HTML] pobierz, plaintext 

Kod

#container{width:100%;margin:0 auto;padding:0;position:relative;}
#head1, #head2, #head3, #body, #foot{float:left;width:100%;margin:0 auto;padding:0;}
.container{width:960px;margin:0 auto;text-align:left;}

#head1 .container .main{float:right;width:100%;margin:0;background:#FEF0C1;}

#head2{clear:both;}
#head2 .container{height:180px;background:#FEF0C1 url('img/tlo.png') no-repeat left bottom;}

#logo{padding:0;margin:0;position:absolute;z-index:1;}
#logo #title{float:left;padding:0px 0px 0px;}
#logo #title a{color:orange;font:bold 5.5em Verdana;text-transform:uppercase;text-decoration:none;}
#logo #title a span{color:orange;}
#logo #title a strong{color:#836b4c;}
#logo #slogan{clear:left;margin-left:80px;margin-top:30px;padding:0px 15px;background:inherit;color:#544d3d;font:italic 15px Verdana;}

#logo ul{overflow:hidden;list-style:none;}
#logo li{float:left;width:540px;}
#logo li#shuffle{position:relative;left:-120px;z-index:-1;}
.th{float:left;margin:0px;}

czy znajdzie ktoś błąd? może zamiast UL i LI stosować DIV?