[HTML][CSS] Jaki podział będzie najlepszy Opcje

[redelek]

Witam,

Zmagam się z mały problemikiem i dlatego piszę do Was o poradę.
Założenia strony
1. nagłówek ( 100% ) czyli na całą stronę razem z menu
2. środek będzie podzielony na dwie części jedno menu a drugie to treści
3. stopka ( 100% ) strony

Teraz mój problem
Wariant 1

[HTML] pobierz, plaintext 
<div id="naglowka>
   < div id="menu">
   </div>
</div>
 
<div id="srodek">
   <div id="strona_lewa">
   </div>
   < div id="strona_prawa">
   </div>
</div>
 
<div id="stopka">
</div>
[HTML] pobierz, plaintext 

(IMG:http://img509.imageshack.us/img509/7012/wariant1.png)

Wariant 2 ( czy zamknąć to wszystko w jednym wielkim pudle div

[HTML] pobierz, plaintext 
<div id="wielki_box">
<div id="naglowka>
   < div id="menu">
   </div>
</div>
 
<div id="srodek">
   <div id="strona_lewa">
   </div>
   < div id="strona_prawa">
   </div>
</div>
 
<div id="stopka">
</div>
 
</div><!-- koniec wielkiego box -->
[HTML] pobierz, plaintext 

(IMG:http://img509.imageshack.us/img509/355/wariant2.png)

Chodzi mi o stronę żeby dobrze wyglądała w małych i dużych rozdzielczościach ( wiadomo nie przewidzę telewizorów 36 cali ) u użytkowników, oraz na różnych przeglądarkach.
Pomóżcie podjąć decyzję zanim się narobię (IMG:style_emoticons/default/smile.gif) Wy jako fachowcy

[tog]

ja zamykam w divie
pozniej gdybym chcial np. dac reklame na gorze to wszystko mi sie ladnie przesunie, czy cos (IMG:style_emoticons/default/winksmiley.jpg)

[redelek]

ja zamykam w divie
pozniej gdybym chcial np. dac reklame na gorze to wszystko mi sie ladnie przesunie, czy cos (IMG:style_emoticons/default/winksmiley.jpg)

ale wszystko w jednym divie czyli taki wariant 2 u mnie tak ?
Czy jakaś inna kombinacja ?

[tog]

robie div#body, ktoremu ustalam szerokosc(szerokosc calej strony), wysrodkowuje go, czy cos i buduje w nim
ale z css mam do czynienia od niedawna, takze moze lepiej niech ktos jeszcze sie wypowie

[Kujski]

Najczęściej robi się to w tzw. kontenerze (IMG:style_emoticons/default/smile.gif) ustawiasz sobie div'a "container", któremu określasz szerokość i pozycję i dajesz w niego całą resztę (IMG:style_emoticons/default/smile.gif) jak coś niejasne napisz dam przykład (IMG:style_emoticons/default/smile.gif)

[redelek]

Najczęściej robi się to w tzw. kontenerze (IMG:style_emoticons/default/smile.gif) ustawiasz sobie div'a "container", któremu określasz szerokość i pozycję i dajesz w niego całą resztę (IMG:style_emoticons/default/smile.gif) jak coś niejasne napisz dam przykład (IMG:style_emoticons/default/smile.gif)

Czyli to u mnie drugi wariant tylko u mnie nazywa się to wielki_box,
a w nim dopiero reszta stronki. Głównie chodzi mi o to ,żeby nie ważne przy jakiej rozdzielczości nagłówek i stopka był od na całą szerokość strony.
Rozumiem, że w moim div "wielki_box" mogę dać width 100% tak. Jak byś był miły i pokazał przykład to by było super. Nie musi być gotowiec tylko zarys

[thek]

Jeśli dobrze odczytuję myśli kolegów to mają oni ciut inne wyobrażenie tego.
Mają duży kontener zawierający części header, body i footer, który jest ustawiany z określoną szerokością na sztywno (zapewne 960px) i wyśrodkowany z użyciem margin: 0 auto. To sprawia, że layout się nie rozjeżdża na szerokościach wyższych. Mogą też mieć kombinację trzech sekcji jako osobne i tylko body byłaby tak marginowana jak wspomniałem. Z width: 100% są problemy jeśli dobrze nie przemyślisz layoutu, bo przy dużych rozdzielczościach strona będzie wyglądać koszmarnie. Chodzi między innymi o tła pod div-ami czy wszelkie użycie pływających elementów, które tekst będzie raz w pełni opływał na niższych, ale na wysokich mogą być problemy ze "schodkami" gdy elementy mogą się wzajemnie opływać i rozstrzelą Ci układ. Posłanie z floatem jakiegoś elementu może wystąpić po tekście, który nie doszedł "do końca wysokości" poprzednio opływanego i utworzysz piramidę. Dlatego stosuje się raczej "static layouts", bo są znacznie bardziej przewidywalne, choć kosztem problemów z miejscem na stronie (za duża szerokość - suwaki w poziomie, za mała - pustka po obu stronach). Poczytaj ciut o "fluid layouts" lub "fluid width layouts" to może nasunie Ci to jakieś pomysły jak rozwiązać problemy z tego typu rozwiązaniami.

Ten post edytował thek 18.12.2009, 09:39:49

[redelek]

No to wymyśliłem tak, co Wy na to.
W przeglądarkach IE 7, 8, Opera 10, FF 3.5.6, Safari, SeaMonkey 2.0.1 wygląda identycznie.
Na rozdzielczościach 800x600 pojawiają się suwaczki ( nagłówek jest krótszy i stopka prawy pasek wystaje poza nie (IMG:style_emoticons/default/sad.gif) )), 1024x768 dobrze wygląda, 1440x900 też jest super.
Jak macie inne rozdzielczości to chętnie zobaczę screen jeśli podeślecie piotr.redel[ET]gmail.com

Zobaczcie czy to będzie ok czy coś jednak pozmieniać i dopracować. Będę wdzięczny za uwagi

LINK do stronki