Pytanie o layout na divach.

[fingoth]

Ostatnio bawię się pewnym layoutem na divach. Prosty i minimalityczny.
Do góry logo po lewej stronie menu po prawej teskt na dole stopka

-----------
| Logo |
-----------
|M| T |
|E| E |
|N| K |
|U| S |
| | T |
-----------
|Stopka |
-----------

I teraz mam problem, chcę aby menu miało np. zielone tło i zajmowało 100% bez
względu na czy tekst zajmuje 50% ekaranu czy więcej. Teoretycznie wszystko
powinno być dobrze jezeli w css dam przy div#menu min-height:100%; oraz
height:100%; Sprawa wygląda ok w IE. Jednak w FF i Operze menu zajmuje tylko
tyle miejsca ile odnnośniki w nim. I w tedy zamiast tła zielonego mam tło
szare z body. Pewnie wszystko wygląda elegancko na tabelkach, ale wiadomo
-tableki ;).

[tommy_from_cracow]

Allo!

Wiec mam dwa rozwiazania:
www.google.pl/search?hl=pl&q=Firefox+min-height&btnG=Szukaj+w+Google&lr=
www.dustindiaz.com/min-height-fast-hack
albo zamknij:

> |M| T |
> |E| E |
> |N| K |
> |U| S |
> | | T |

w jeszcze jednogo diva ktory bedzie mial kolora tla jak menu...

Pozdrawiam!


fingoth napisał:

> Ostatnio bawię się pewnym layoutem na divach. Prosty i minimalityczny.
> Do góry logo po lewej stronie menu po prawej teskt na dole stopka
>
> -----------
> | Logo |
> -----------
> |M| T |
> |E| E |
> |N| K |
> |U| S |
> | | T |
> -----------
> |Stopka |
> -----------
>
> I teraz mam problem, chcę aby menu miało np. zielone tło i zajmowało 100% bez
> względu na czy tekst zajmuje 50% ekaranu czy więcej. Teoretycznie wszystko
> powinno być dobrze jezeli w css dam przy div#menu min-height:100%; oraz
> height:100%; Sprawa wygląda ok w IE. Jednak w FF i Operze menu zajmuje tylko
> tyle miejsca ile odnnośniki w nim. I w tedy zamiast tła zielonego mam tło
> szare z body. Pewnie wszystko wygląda elegancko na tabelkach, ale wiadomo
> -tableki ;).

[fingoth]

Dzięki, ale to nie jest to. Troche trudno opisac to słowami.
Otóż menu i tekst mają inne tła. Menu np. ma jakis odcień zielonego a tło
smokewhite. Div#menu zawiera np 5 odnośników, które razem zamują 200px. Tenże
div także zajmuje 200px, natiomast div#teskt zajmuje 500px. I teraz cały problem
w tym, że chciałbym aby div#menu automatycznie zaja cały obszar, aż do stopki i
aby razem z div#tekstem tworzył 2 kolumny kończace się przy stopce. W obecnym
rozwiazaniu min-height:100%; i height:100%; div#menu zajmuje tylko te 200px.
Problemu nie ma w IE. tam div#menu zajmuje cały obszar, problem poajwia się w FF
i O.

[fingoth]

Zamnknięcie div#menu i div#teskt nie pomoże gdyż div#menu ma mieć dodatkowo
powtarzający się obrazek na całej długości.
Coś mi się wydaję, że zgrzeszę i zzrobię to na tabelakch, prościej i szybciej :(

[zsa-zsa]

troche trudno radzic 'na sucho' bez mozliwosci obejrzenia projektu.
ale moze sprobuj ustawic tlo menu jako tlo calej strony (body). dla pozostalych
elementow zdefiniuj osobne tla wg potrzeb.

(przy okazj: IE cos renderuje dobrze, a FF zle???to chyba niemozliwe :-P)))

--

[fingoth]

> troche trudno radzic 'na sucho' bez mozliwosci obejrzenia projektu.
> ale moze sprobuj ustawic tlo menu jako tlo calej strony (body). dla pozostalych
> elementow zdefiniuj osobne tla wg potrzeb.
Dzięki, ale odpada, cały urok tego layoutu polega na tym, że boki, czyli body ma
inni kolor niż menu i treść :/

Hehe znalazłem rozwiązanie problemu. Jak wynika z zagranicznych postów, więcej
osób ma ten problem. Jedni twierdzą, że IE nie trzyma się standardów i nie
prawidłowo interpertuje height:100%; inni, że FF, Mozilla, KHTMl oraz Opera źle
to robią. Nie mam zamiaru dociekać to ma rację i obarczę winą IE ;)
Zaproponowano też kilka rozwiązań. Między innymi zastowsowanie kilku divów. Na
ironię layout na divach będzie zawierać aż 6 elementów a na tabelkach tylko 4.
Dodatkowo za layoutem na 4 tabelkach przemiawia fakt, że będzię on wyglądać tak
samo w każdej przeglądarce. Muszę się zastanowić nad zrobieniem wyjątku i
olaniem zasady, żeby layoutów nie robić na tabelakch ;)

[fingoth]

Postaram się zamieścić prosty przykład bez grafiki jak najszybciej. Może to pomoże.

[tommy_from_cracow]

Witaj,
Chetnie zobacze rozwiazanie szczegolnie ze pamietam, ze przy jakiejs stronie sam sie z tym borykalem...
I jeszcze pytanie: w pierwszym poscie napisales:
>Sprawa wygląda ok w IE

A w drugim:

>Nie mam zamiaru dociekać to ma rację i obarczę winą IE ;)

Mozesz powiedziec czemu?
Pozdrawiam!!!

[fingoth]

> >Nie mam zamiaru dociekać to ma rację i obarczę winą IE ;)
>
> Mozesz powiedziec czemu?
> Pozdrawiam!!!
Na stronie dotyczącej problemu FF z height przeczytałem, dwie rodzaje wyjaśnień.
Pierwszą, że IE poprawnie interpretuje znacznik height i min-height, zgodnie z
W3C, drugą, że to właśnie FF, KHTML oraz Opera robią to właściwie i zgodnie z
oczekiwaniami W3C. Ponieważ od dawna cierpię na awersję do M$ ;) obstawiłem, że
IE robi to źle. Zresztą nie ma to znaczenia, i tak efekt koncowy musi być taki,
że strona wszedzie bedzie wygladac identycznie.

[fingoth]

kobi.ovh.org/css.html
Szybko napisałem prosty przyklład o co chodzi w moim problemie :)
kobi.ovh.org/css.html
Licząc na życzliwe uwagi forumowiczów przedstawiam problem.
Otóż w swojej głowie zaplanowałem taki wyglad strony.
Po lewej stronie znajduje się menu, w którym umieszczone są odnośniki oraz
powtarzający się obrazek. Po prawej tekst a na dole stopka. W sytuacji gdy
obszar zajmowany przez stopkę i tekst jest krótszy niż rozmiar okna, stopka
automatycznie ląduje na samym dnie okna przeglądarki a div menu i tresc rozciąga
się automatycznie do stopki. Jeżeli tekst jest większy, to w oknie przeglądarki
pojawia się suwak, a menu rozciąga się do poziomu tesktu.
Chyba za bardzo nie potrafię zwerbalizować swoich myśli więc narysowalem prosty
rysunek ;) jak to ma wygladać kobi.ovh.org/przyklad.png
Próbowałem już różnymi metodami.(position absolute, relative, float). Nic.
Pomocy !!!! Help I need someone help ;)

[k_r_m]

jeśli znajdziesz rozwiązanie opisz je tutaj, bo tez mam podobny problem

Rozwiązanie

[fingoth]

Wykorzystałem poradę tommiego from cracow oraz stronę powerarchiver.com i
rozwiazałem mój problem. Konstruncja ma jedną wadę. Otóż div zawierający tekst
musi być dłuższy niż div z menu. Zresztą zainteresowani sami zobaczą.
Przykład umiesciłem na serwerze, poniewaz miałem probelmy z forum, sam nie wiem
dlaczego.
Dzięki za pomoc.
Przykład: www.kobi.ovh.org