Warstwa z-index:2; nie ładuję się do końca

[PDI]

Witam serdecznie!

Mam drobny kłopot z CSS. Potrzebuję tak skonfigurować tło na warstwie z-index:2; aby pokrywało 100% strony. Jednak coś jest nie tak i warstwa ta nie działa do końca. Jeżeli macie jakieś rozwiązanie to będę bardzo wdzięczny.
Z góry dziękuję za odpowiedź i poradę dotyczącą dostosowania tego CSSa do IE.

Dane do strony:
http://www.nlp.ayz.pl/nowa/
http://www.nlp.ayz.pl/nowa/css/template_css.css

Pozdrawiam i życzę dobrej nocy,

Kamil

[Labsta.com]

Co do IE to spróbuj mojego ulubionego triku. Daj w sekcji head

Kod:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Dużo pomaga, ale nie jest lekiem na całe zło...


Co do problemu z warstwami, to na moje oko nienajlepiej jest pocięty layout. Raczej ciężko to opisać w kilku słowach, bo zbyt wiele rzeczy bym zmienił. Osobiście z-indexy uważam za mało eleganckie rozwiązanie.
Jeśli o tym samym tle myślimy to się nie rozciąga bo ma:

Kod:

height:324px;

a dodatkowo box z treścią nie znajduje się wewnątrz tego, który ma rozciągać. No lepiej tego nie opisze.

W uproszczeniu struktura tej strony mogłaby wyglądać tak:

Kod:

body
--kontener
---top
---menu
---treść
----lewa
----prawa
---stopka

Pozdrawiam

[PDI]

Dzięki za wszystkie informację. Zainspirowałeś mnie. Wrzuciłem to problematyczne tło na oddzielny z-index i jest okej. Dziękuję. Ale pojawił się kolejny kłopot, przy zmianie ilości tekstu, przy wysokość height:100% dla warstwy div#tlo powoduję wysuniecie się tego tła z dołu strony. Dzieję się tak dlatego, że zastosowałem margines top. Jednak jak z niego zrezygnuję to tło nadal jest za krótkie.

Jak dobrać margines top i wysokość, aby we wszystkich przeglądarkach i przy różnych ilościach tekstu na stronie cała strona wyświetlała się poprawnie.
W tej chwili strona działa poprawnie w Opera 9.6, Firefox 3.0.9, Safari 3.2.
Ale w przeglądarce Opera 9.5 już tło nieznacznie się wysuwa.

Dziękuję za informację.

Pozdrawiam,

Kamil

[Labsta.com]

Ta wysokość div#tlo to 100% czegoś, prawdopodobnie elementu nadrzednego (rodzica).

Z tą konstrukcją będą różne problemy. Nadal obstawałbym przy strukturze, którą pokazałem poprzednio.

Mówiąc dość obrazowo o wysokości div-ów, można by powiedzieć, że div to balon który coś otacza i tylko jeśli włożysz jeden balon w drugi i nadmuchasz ten wewnętrzny to zewnętrzny się rociągnie.

Kod:

<div id="tlo">
  <div id="tresc">
       Powietrze :)
  </div>
</div>

W tym przykładzie tlo to balon zewnętrzny, a treść wewnętrzny. Często dodatkowo dla elementu wew. dodaje się w CSS(jesli są float'y i/lub nie rociąga rodzica):

Kod:

overflow: hidden;

Walcz dalej, będę tu wpadać zobaczyć jak idzie.
Pozdrawiam.

P.S. Zmień

Kod:

<link rel="stylesheet" href="css/template_css.css" type="text/css" charset="utf-8" />

na:

Kod:

<link rel="stylesheet" href="css/template_css.css" type="text/css" />

Aha i w FF3 też jest źle to tło.