[CSS] Wiele divów wewnątrz siebie Opcje

[Homzik]

Witam,
Mam problem z ułożeniem wielu warstw jedna wewnątrz drugiej. To co jest proste na tabelkach, na divach sprawia mi spory problem, a z kilku przyczyn warstwy sprawdziłyby się u mnie lepiej. Aby lepiej zobrazować problem, przygotowałem prosty obrazek:

(IMG:http://pix.yyy.pl/divy.png)

Z góry dziękuję za pomoc doraźną (marchewkę) lub wskazanie dobrego kija tak, abym mógł się sam nauczyć, choć sam jakoś nie trafiłem na żaden wartościowy tutorial.

[JoShiMa]

No przecież sobie narysowałeś który w którym ma być, to w czym problem?

[charlie-cherry]

Też kiedyś przestawiałem się z tabelek na divy... Poniżej kod, który stworzy "szkicową" wersję tego co chcesz - marginesy wewnętrzne i zewnętrzne oraz ewentualne centrowanie trzeba ustawić dodatkowymi atrybutami. Usuń sobie tylko wartości "id" (bo nie powinny się powtarzać) - wpisałem je, abyś wiedział, co jest gdzie względem twojego szkicu.

[HTML] pobierz, plaintext 
<div id="w1" style="width: 95%;">
 
<div id="w2" style="float: left;">
 <div id="w5"></div>
 <div id="w6"></div>
 <div id="w5"></div>
</div>
 
<div id="w3" style="float: left;">
 <div id="w7"></div>
 <div id="w7"></div>
 <div id="w7"></div>
</div>
 
<div id="w4" style="float: left; width: 170px;">
 <div id="w8"></div>
 <div id="w9"></div>
</div>
 
</div>
[HTML] pobierz, plaintext 

[Homzik]

Dziękuję za pomoc, nie pisałem wczoraj bo wziąłem się za robotę, a dodatkowo pokomplikowałem ją o jeszcze jedną warstwę zagnieżdżoną w innej.

Niestety, mam kilka problemów:
- w Chrome warstwa rectangle pojawia się w jakimś dziwnym miejscu, zamiast pojawiać się między newsami czyli między dwoma warstwami newsframe
- przy szerokości strony np. 1024 pikseli, warstwa rightbox spada na doł w losowe miejsce - co zrobić aby zawsze była wyświetlana obok warstwy centerbox? Chodzi mi o to, aby strona wyświetlała się poprawnie przy szerokości 1000 pikseli (na tabelkach tak było i wszystko ładnie się skalowało)
- przy minimalizacji strony (znowu np. 1000 pikseli szerokości) w Chrome warstwa footer zmienia swoje położenie - dlaczego tak się dzieje?

Całość w praktyce można znaleźć pod adresem: http://yyy.pl/test/ (na tabelkową górę strony oraz badziewne logo prosze nie zwracać uwagi (IMG:style_emoticons/default/smile.gif) )

Z góry dziękuję za okazane wsparcie.

Ten post edytował Homzik 29.01.2011, 10:48:14

[charlie-cherry]

Tutaj musisz już sam zagłębić się w tutoriale dotyczące floata (IMG:style_emoticons/default/smile.gif) .

W dużym skrócie: elementy spadają ci do następnej linii, gdyż nie ma dla nich miejsca w starej pozycji. Kontener masz ustawiony na 100% - a to powinna być wartość stała, albo chociaż posiadająca min-width.

[Homzik]

od czasu umieszczenia tamtego posta sporo się zmieniło, obecnie to na http://yyy.pl/test/ za cholerę nie wiem czemu całość nie centruje się na środek ekranu, a poza tym nie umiem porozmieszczać elementów na http://yyy.pl/test/belkanew.html tak, aby się mieściły i miały zdefiniowane marginesy z każdej strony (IMG:style_emoticons/default/sad.gif)

[charlie-cherry]

Wycentrować można kontener za pomocą CSS:

[HTML] pobierz, plaintext 
margin: 0 auto;
[HTML] pobierz, plaintext 

Na dalsze twoje pytania odpowiedź znajdziesz w tym tutorialu - http://kurs.browsehappy.pl lub innych.