Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wiele divów wewnątrz siebie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
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:



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.


  1. <div id="w1" style="width: 95%;">
  2.  
  3. <div id="w2" style="float: left;">
  4. <div id="w5"></div>
  5. <div id="w6"></div>
  6. <div id="w5"></div>
  7. </div>
  8.  
  9. <div id="w3" style="float: left;">
  10. <div id="w7"></div>
  11. <div id="w7"></div>
  12. <div id="w7"></div>
  13. </div>
  14.  
  15. <div id="w4" style="float: left; width: 170px;">
  16. <div id="w8"></div>
  17. <div id="w9"></div>
  18. </div>
  19.  
  20. </div>
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 smile.gif)

Z góry dziękuję za okazane wsparcie.
charlie-cherry
Tutaj musisz już sam zagłębić się w tutoriale dotyczące floata 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 sad.gif
charlie-cherry
Wycentrować można kontener za pomocą CSS:

  1. margin: 0 auto;


Na dalsze twoje pytania odpowiedź znajdziesz w tym tutorialu - http://kurs.browsehappy.pl lub innych.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.