Forum PHP.pl > [CSS] nakładanie warstw

Pomoc - Szukaj - Użytkownicy - Kalendarz

piotrd

28.08.2011, 13:33:53

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)?

CuteOne

28.08.2011, 13:54:10

a ) możesz pobawić się z-index i position: relative
b ) z-index i marginesami (dla drugiego <li> np. margin-left: -20px)
c ) position: absolute i zabawy top, left

piotrd

28.08.2011, 13:57:10

musze zatem drugiemu li nadać jakieś id, ale dlaczego mam dać -20 skoro różnica między sumą (1) i (2) z [] równa się 120 px?

CuteOne

28.08.2011, 14:00:28

np. margin-left: -20px

UP: nie wiem czy samo z-index tu pomoże skoro ustawił overflow: hidden dla UL. Co za tym idzie różnica w szerokości powinna być "schowana"

piotrd

28.08.2011, 14:22:08

drugie <li> dostało id=im oraz dałem

[HTML] pobierz, plaintext 
#logo{padding:0; margin:0;position:absolute;}
#logo ul{overflow:hidden;list-style:none;}
#logo li{float:left;width:540px;}
#logo .im{right:-120px;z-index:-1;}
[HTML] pobierz, plaintext

ale pozycjonowanie warstwy im jest jakby nieaktywne, tylko rozmiar jest ok, nie chce nałożyć się na (1)

CuteOne

28.08.2011, 14:24:00

id to # nie .

piotrd

28.08.2011, 20:48:32

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?

Rid

28.08.2011, 21:03:18

Niech spróbuje zamienić:
<

Cytat

li id="shuffle">

Cytat

<li class="shuffle"> a

w CSS

Cytat

#logo li#shuffle{position:relative;left:-120px;z-index:-1;}

zamienić na

Cytat

.shuffle{position:relative;left:-120px;z-index:-1;}

W ogóle trochę straszny jest ten Pana CSS.

piotrd

28.08.2011, 21:05:27

zrobiłem jednak małą kosmetykę (metodą prób i błedów) i już jest OK

[HTML] pobierz, plaintext 
#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{position:absolute;margin-left:93px;margin-top:64px;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:absolute;margin-left:420px;z-index:-1;}
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.