Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: automatyczna wysokość
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Immanuel
Mam taki plik CSS:

  1. .calosc {
  2. width: 780px;
  3. height: 100%;
  4. border-style: solid;
  5. }
  6. .lewa {
  7. float:left;
  8. width:250px;
  9. height: 100%;
  10. border-style: solid;
  11. }
  12. .prawa {
  13. float:right;
  14. width:510px;
  15. height: 100%;
  16. border-style: solid;
  17. }


i taki plik html:

  1. <div class="calosc">
  2. <div class="lewa">
  3. tutaj tekst
  4. </div>
  5. <div class="prawa">
  6. tutaj tekst
  7. </div>
  8. </div>


Uproscilem spejalnie, zeby latwo sie czytalo.
I teraz jak wladuje wiecej tekstu do lewlej lub prawej kolumny to:
- IE wyswietla tak jak tego oczekuję: lewa i prawa kolumna maja tę samą wysokość i sa w srodku ''calosci''
- opera po czesci wyswietla tak jak chce: jezeli jest wiecej tekstu w lewej to rozciaga lewą kolumnę i ''calos'' tak aby zajmowaly tyle ile jest potrzeba, ale prawa ''kolumna'' zostaje krotsza. i odwrotnie (jezeli w prawej jest wiecej tekstu to lewa pozostaje krotsza)
- FF calkiem swiruje i zawartosc wystaje poza DIV-a sad.gif

jest jakis sposb zeby wszystkie przegladarki wyswietlaly to tak jak IE ?
Kreton
Po pierwsze myślę, że masz złe podejście. Wyciągasz używając float, 2 divy z normalnej struktury (prezentacyjnej, powiedzmy), dzięki czemu rodzic nie wie jaką powinien mieć wysokość. Tutaj wcale nie potrzebujesz tego. Zadbaj aby przynajmniej jeden element determinował wysokość rodzica. Zdaj sobię sprawę, że IE nie wie co to height i traktuje to jako min-height.

Wbij sobie żelazną zasadę do głowy: Najpierw twórz stronę dla Opery, FF czy Safari, dopiero potem naprawiaj błędy dla IE.

Nie wiem czy dokładnie o to ci chodzi ale: poczytaj o Faux Columns, dodaj http://www.xs4all.nl/~peterned/examples/csslayout1.html.

Porponuje się zapoznać z spolszczoną dokumentacją CSS1, w szczególności z 4 rodziałem. Nie znalazłem nigdzie w necie, usunięto link na w3.org, więc odgrzebałem na dysku i oto jest: http://kret.jogger.pl/files/css1.htm
smialy
Witam

Popieram przedmówce. Jeśli dziala w ie a nie dziala w reszcie świata to na 99.(9)% jest źle :] A co do rówych kolumn, może czegoś nie wiem, nie da się tego zrobić w 'normalny' sposób przy użyciu divów aby działało na większości przeglądarek.
mewa
Ja obchodzę wyciągnięte float'y w ten sposób, że doklejam pod nie "diva przyklejającego" smile.gif
<div class="przyklej"></div>
gdzie
.przyklej {
clear:both;
font-size:0;
line-height:0;
height:0;
padding:0;
margin:0
}
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.