CSS XHTML: Automatyczna wysokość elementu div
Ostatnio napotkałem na następujący problem: div w którym miała znajdować się główna treść strony miał być z lewej i prawej strony ozdobiony grafiką, której wysokość miała się automatycznie dopasowywać do wysokości elementu div w zależności od ilości treści jaka się w nim znajdzie. Szerokość była z góry założona i stała.
Problem polegał na tym, że wysokość div nie jest dziedziczona w żaden sposób od obiektu nadrzędnego, jak również nadanie parametru height:auto nic nie pomoże z przyczyn oczywistych. Problem z poprawnym wyświetlaniem takiego efektu nie ma przeglądarka IE7.0. Poblem dotyczy pozostałych, zgodnych z najnowszymi standardami przeglądarek. Rozwiązanie problemu można obejrzeć tutaj (kod strony w pełni dostępny poprzez wybranie funkcji “Pokaż źródło strony”).
W powyższym przykładzie jest zagnieżdżonych kolejno 5 elementów div, przy czym div z zawartością (piąty, najbardziej zagnieżdżony) rozciąga w pionie pozostałe, które zawierają odpowiednie elementy graficzne. W IE7 strona wygląda dobrze, za wyjątkiem różnic w interpretacji parametrów margin i padding. W przeglądarkach Firefox/Opera rozciąganie możliwe jest poprzez zastosowanie div z parametrami clear:both oraz height:0px. Taki element będzie niewidoczny w przeglądarkach Firefox/Opera. Dopisanie jednak tych dodatkowych elementów div do kodu strony spowoduje, iż pojawią się one w… IE7! W ostatecznym rozwiązaniu problemu pomogą instrukcje warunkowe (ang. conditional comments), umożliwiające ukrycie części kodu dla wybranych przeglądarek.
Przydatne linki:
CSS DIV layouts
CSS Rollover, Columns, Rounded Corners, Margin/Padding
Brak powiązanych artykułów
(5 głosów, średnio: 3,80 z 5)
Loading ...
10.02.2008 o 21:28
Rozwiązanie ładne i ciekawe, choć trochę podpada mi pod Divitis. Problem kliku teł dla jednego elementu rozwiąże chyba jednak dopiero implementacja CSS3 we wszystkich popularnych przeglądarkach (na razie wspiera to jedynie Safari: http://www.css3.info/preview/multiple-backgrounds).
Poza tym nie podoba mi się twój sposób na poziomy separator. Użyłeś do tego akapitu i obrazka, a do tego celu służy znacznik hr. Nowoczesne przeglądarki powinny poradzić sobie z ostylowanym znacznikiem hr (hr i background -image). Dla starszych – trzeba wrzucić znacznik hr w… diva
11.02.2008 o 01:01
Sam doszedłeś do tego, dlaczego wrzuciłem poziomy separator w akapit. Kod jest na dzień dzisiejszy akceptowany przez wszystkie dostępne przeglądarki. Oczywiście CSS3 zmieni wiele, ale wątpię czy od razu, a w dodatku póki co go nie ma
. IE będzie oporne na pewno przez długi czas i konieczne będzie stosowanie półśrodków, jak dotychczas.
.
Pisząc nowoczesne strony internetowe nie można trzymać się kurczowo standardów bo może się okazać, iż strona będzie dwa razy większa niż taka napisana z drobnymi uchybieniami ale również poprawna. Dla przykładu: jeśli umieściłbym separator jako tło w znaczniku hr musiałbym stworzyć kolejny styl, a tak skorzystałem z już istniejącego
Niemniej jednak ja również nie mogę doczekać się CSS3.