Problem: Wysokość div'ów

[Lucas]

Wiatm, robię stronę przy użyciu divów (dotychczas robiłem tabelami).

 

Struktura wygląda mniej więcej tak:

 

    //Te dwa divy są obok siebie w poziomie
menu...
Jakaś treść

 

Pojawił się problem z wysością menu i wysokością div'a z właściwym tekstem. W momencie gdy tekstu jest mało, divy osiągają wysokość wg min-height i wszystko gra. Gdy tekstu robi się więcej, niestety wysokość div'a z menu pozostaje taka jak była.

 

Nic nie daje height:100% - właściwie to działa, jeśli jest określona wysokość elementu rodzica, a ta akurat jest zależna od div'a z tekstem, który jest jakby równorzędny z div'em z menu. Myślałem, że ten div-rodzic "wyłapie" odpowiednią wysokość div'a z tekstem, dzięki czemu menu rozciągnie się na 100%, wygląda na to, że jednak nie:(.

 

Link bezpośrednio do strony: http://www.lucasgraphics.ovh.org/sq302/?page=historia

 

Mógłbym co prawda wstawić wysokość na sztywno, niestety to na pewno nie sprawdzi się w przypadku generowanej zawartości (np w newsach)

 

Próbowałem body, html height:100%, prawie się udało ale 100% tyczyło się chyba okna a nie strony i niestety część była obcięta na dole.

 

Jakieś pomysły?

[SSn4k3]

Ano spróbuj zrobić taki schemat:

Nie używaj

bo to już niezgodne z w3c. Żeby wycentrować całość użyj dla #container w css margin:0 auto;

 

dla menu używaj list

. Generalnie powienieś używać tagów zgodnie z ich przeznaczeniem, żeby strona bez stylu css wyglądała czytelnie. Pod wieczór podrzucę Ci parę linków o budowie takich rzeczy. Poczytaj też o float i clear w css. I staraj się nie hardkodować cssa w htmlu, tylko w osobnym pliku.

Pozdro.

[Lucas]

Dzięki za zwrócenie uwagi na te elementy:)

Oczywiście CSS mam w oddzielnym pliku, tylko kilka powiedzmy, że zapomniałem ta umieścić gdy szybko edytowałem, teraz już nieco uporządkowałem.

Wiem o co chodzi z float, o clear chwilę czytałem ale jakoś nie załapałem o co z tym chodzi.

[illy]

menu 1, menu2,

tekst 1 tekst2

i reszte juz w css, wtedy oba pola beda mialy taka sama wysokosc

[Lucas]

Później właśnie o tym pomyślałem, ale niestety po lewej stronie menu mam jeszcze kolejnego diva bez zawartości (ten cień dookoła całego zielonego pola).

 

Może jakbym pokombinował to dałoby się to jednak jakoś zrobić w ten sposób ale w końcu poradziłem sobie przy użyciu JavaScript - onload w body: pobieranie wysokości diva z właściwym tekstem i przypisanie jej do tych nieszczęsnych divów:).

 

Już wdrożyłem i powinno działać. Pytanie do was - jako bardziej doświadczonych, czy powinienem przewidywać, że użytkownik jednak nie będzie miał obsługi JS? Jak to np. jest z przęglądarkami w nowych telefonach, dają radą z JS?

[SSn4k3]

Jeśli chodzi o obsługę JS to zapraszam tutaj:http://perfectionorvanity.com/2007/11/07/kto-normalny-wylacza-javascript/

 

Jeśli chodzi o cienie dookola diva to polecam zainstalowanie firebuga do firefoxa (http://www.getfirebug.com) i obejrzenie nim jak inne strony są zbudowane. To jest najlepsza forma nauki... zaraz za praktyką;-)

[Burger]

Dla div id="zawartosc" ustaw min-height, a dla divów w srodku po height:100% i po sprawie :)

[Lucas]

No właśnie nie:) Bo o ile przypadku diva tekstowego niższego niż min-height jest ok, to jeśli nagle jest dużo tekstu jak w dziale "historia" to i tak jakoś te divy nie chcą osiągać 100%.

 

Narazie jakoś to gra, ale pewnie jeszcze popróbuję tak jak Illy napisał.

[illy]

cien robisz w trzech bitmapach

 

gorna z rogami, powtarzalna w pionie i dolna,

 

robisz jednego diva ktory to wszystko spina,

 

czyli

 

dalsza rzecz

calosci>

 

dalsza rzecz to div mniejszy o cien i troche marginesu (np. 20px z kazdej strony), teraz w nim umieszczasz

lewego menu>

 

cokolwiek wpiszesz w div tresci, rozciagnie w pionie div lewego menu. Dziala z kazdej strony, obojetnie co wpiszesz w ostatnie dwa divy, beda mialy rowna wysokosc