CSS layout - problém hlavně s výškou

Zdravím,

s kamarádem vytváříme vlastní redakční systém a nyní jsme trochu začali pracovat na designu (jedná se o stránku http://webspen.mechenice.net/ ). Není problém s tím systémem, ale s jednou jeho šablonou. Prosím, neptejte se, proč vytváříme další RS, to není tématem tohoto dotazu. Hlavní problém je v tom, že nevím, jak vypočítat výšku celé stránky - mění se v závislosti na obsahu a na velikosti menu (klasika). Jde o to, že chci mít kolem obsahu takové ohraničení, stín. Zatím to řeším tak, že pomocí css definuji pozadí, opakující se po ose y. To pozadí nechávám vycentrovat. Bohužel zde ale nastávají 3 problémy (centrování jsem použil dle tohoto návodu http://tiso.wz.cz/articles/vycentrovanie-obsahu-stranky.php ):

1) celý obsah stránky je mírně posunut dolů, ale pozadí ne - vytváří to takový nepěkný prvek, který sice může vypadat jako záměr, ale není - prostě nahoře je vidět ještě stín, i když by tam mělo být logicky volno. Samozřejmě to mohu posunout díky záporným hodnotám, ale to mi nepřijde zrovna jako štastné. Napravil jsem to marginem, ale v Opeře na něj nebyl brán zřetel a IE6 měl myslím taky problém, dokonce snad i IE7, ale to nemohu nyní potvrdit.

2) např. v Opeře se občas jinak vypočítá center (tedy těch 50 %), takže se pozadí posune o 1px a design se rozhodí, v jiných prohlížečích to nemohu potvrdit, ale v jedné situaci mi to udělal i Firefox

3) pokud ve Firefoxu zmenším okno (i na 800x600), tak se začne pozadí chovat divně, já prostě chci, aby pozadí vždy lícovalo

Z toho plyne, že mé řešení buď není použitelné, nebo potřebuje nějaké hacky, nevím si s tím úplně rady.

Napadly mě i jiná řešení, ale ani jedno nefungovalo:

1) udělat tabulku, do které by se zavřel celý obsah jako pozadí by se nadefinovalo to pozadí s opakováním po ose y, problém je, že výšku 100% to nebere

2) napozicovat ten obrázek k hlavičce, menu a obsahu (to pro případ, že menu je delší), u hlavičky mi to krásně vykreslilo pozadí, ale tam byla definována i výška v px, u dalších prvků však definovaná není, takže tam se nic nevykreslilo

Rád bych tam měl tento design, shodli jsme se na něm s kamarádem (ovšem není to finální podoba), takže nechci dělat kompromisy, ale když nic jiného nepůjde, budeme je muset udělat, jako to mám na jiných webech. Předpokládám, že jsem něco opomněl a jde to udělat elegantněji. Když mě trochu nakopnete, budu rád. Všem, co přispějí dobrou radou, předem děkuji.

Takže úpravy zkusím. Díky za podnětné reakce.

„Doplnění - proč probůh pozicuješ všechno absolutně?“

Je to proto, že tak krásně vše napozicuji. S relativním pozicováním bych musel používat vysoké mínusové hodnoty. Pokud je použití absolutního pozicování v tomto případě nevhodné, předělám design na relativní pozicování. Můžete mi vysvětlit, proč je to špatné? Vždyť zrovna zde na webu je návod právě s absolutním pozicováním. Napadá mě jediná věc, proč je to špatně, protože to centruji? Rád se od vás poučím a opravím design. Vím, že validita není vše (uvědomuji si, že ne vše je v tuto chvíli validní). Tohle je opravdu ošklivá pracovní verze. Takhle to opravdu nechceme nechat. Díky za kritiku, mrknu na to.


„fungue vam to krasne (odkaz na stranku pod titulkem 0000000000) - padne to pokazde“

No, já nevím, ale Opera mi na Linuxu ani s tímto odkazem (který je tam jen jako pozůstatek testů) nepadá. Bohužel jsem tam našel při validaci jeden neuzavřený tag. Ale že to by způsobil pád Opery? Každopádně tu chybu co nejdříve opravím.

„maji rozdelany redakcni system crashujici uz 2 mesice naprosto spolehlivou verzi prohlizece, takze to asi bude k tematu :)“

Tedy to jsem nevěděl, že je náš teprve rozdělaný systém tak "známý". Já jsem žádné "crashe" neviděl. Já nevím, ale tohle mi přijde dost absurdní. Spíše bych viděl chybu jinde, ten kód je validní až na ten neuzavřený tag <P>. CSS by měl být též (nevím, jestli v této verzi je). Opravdu se omlouvám, ale tohle není verze určená pro provoz. Kód je generovaný, tak se občas může stát, že na něco pozapomeneme. Jsme snad lidi, ne? Nevím, co proti nám máte. Znám mnoho stránek s mnohem horším a především nevalidním kódem, přesto je zobrazí i právě Opera. Navíc modul, o kterém mluvíte, dva měsíce nemáme. Tak tu prosím neplašte!

Tak rady pomohly. Jinak pokoušel jsem se přejít na relativní pozicování, hlavička i menu v pohodě, ale problém je s obsahem, kdy nevím, jak je vysoký, tak nemohu posunout text nahoru a je až pod menu. Možná to vyřeší nějaký float. Musím pohledat. Zatím tedy nechávám absolutní pozicování. Také dodám, že IE to zobrazí taky. Krom toho je nyní kód validní (i css), s kamarádem jsme zkoušeli zmiňovaný 000... odkaz i v nejnovější Opeře, ale zmíněný "crash" jsme nepozorovali. Testováno na WinXP CZ.

EDIT: Jakmile zmenším stránku pod určitou mez, pozadí začne ve FF, ale i jinde dělat blbosti, nevíte někdo, jak ho přilepit k designu?

Jo a teď si uvědomuji, proč je to relativní pozicování lepší, v tom případě prvky NEBUDOU vyjmuty z dokumentu, tudíž by na pozadí mohla pomoci i ta tabulka? Ač se mi to trochu příčí. Vyřešilo by to ale možná to rozhazování pozadí. Je to tak? Díky

Díky za odkaz. Běžně však dávám přednost vlastní tvorbě. Vyznám se pak lépe v kódu. Ale určitě na to kouknu. Pozicování používám už docela dlouho a přečetl jsem k tomu desítky textů. Hlavně na JPW. Absolutně nechápu, proč se vyhýbat pozicování? Možná každý myslíme něco jiného. Co ti na tom mém layoutu tak vadí? Že je vůbec pozicován? Ale to se pak vrať do minulého století, kdy stačilo pouze HTML. ;) Já chápu, že to řešení s pozadím není zrovna elegantní, ale to je jediná věc, co mi u toho layoutu vadí. Na pozicování nevidím nic špatného. JPW ho upřednostňuje. Dle mých zkušeností jsem nejdříve navrhl obsah tak, aby se korektně zobrazil i bez CSS i třeba v textových prohlížečích, dále jsem dal důraz na validitu (stránky by již měly být validní, včetně CSS), takže pořád nevím, co dělám špatně. Každopádně já se nikdy za profesionála považovat nebudu a jsem přístupný všem radám, ale taky očekávám korektní přístup. Moc mi pomohla vaše první rada, oceňuji to, ale zrazovat mě od tvorby vlastního designu?

Plaváček

Já před vámi smekám, naprosto jste mě přesvědčil o nesmyslnosti pozicování, budu jej tedy používat jen v případě nutnosti, kdy to jinak nepůjde. Je vidět, že jste člověk na svém místě. Koukal jsem do kódu a použil jste tam pár věcí, které já prakticky zatím nepoužívám, spolehněte se, že si ty vlastnosti prostuduji. Je to má chyba. Omlouvám se tedy.

Co se týče vašeho návrhu, v Safari jsme opět narazili na to divné chování, kdy se obrázek posune mírně vlevo, takže je tam vidět bílá čára. Ne vždy, ale chtělo by to pozadí nějak svázat s tím designem.

Mohu se vaším návrhem inspirovat? Nechci ho však bezhlavě zkopírovat, ale napasovat některé části do mnou dnes předělávaného layoutu, kde problém s pozadím už není - pozadí jsem totiž dal do jiného divu, než do body, takže je jakoby svázané a tudíž to chování nepozorujeme.

Chamurappi
„Odstavec nemá povinnou ukončovací značku.“
I nyní? Snažil jsem se kód udělat plně validní, aby se validní i generoval.
„Prohlížečům je úplně jedno, jestli je kód validní. Validita vůbec nesouvisí s tím, jestli stránka shodí prohlížeč.“
Aha, ale pak mi poraďte, jak udělat web, aby prohlížeče nepadaly?
„Vyrob si klidně vlastní layout, ale nedělej ho pomocí pozicování. Předpřipravené layouty na Intervalu ti mohou posloužit jako inspirace. Nikdo po tobě nechce, aby sis je bezmyšlenkovitě okopíroval.“
OK
„Koukni se třeba na Plaváčkův web. Vidíš tam snad pouhé HTML? Vidíš v jeho CSS absolutní pozicování použité ke stavbě layoutu?“
Ano, přesvědčili jste mě, musím to pořádně nastudovat.
„Ukaž.“
No, uznávám, že je tam zmínka o tom, že že CSS by se mělo používat, ale už ne to, že je dobré používat absolutní pozicování. Někde jsem to tam viděl.

OK, kouknu na to. A díky za rady, vážím si jich.

Tak jsem design překopal. Pozicování jsem se nevyhnul u menu s výběrem jazyka a přihlášení, ale tam to snad doufám nevadí. Vše mi ve Firefoxu funguje výborně. Mám ale problém s Internet Explorerem 6 (u sedmičky jsem nemohl otestovat) - celý text odplave až pod úroveň poslední položky menu. Text se zobrazí v správně až když odečtu hodnotu obou marginů u šířky. Jenže v tom případě je text ve FF až moc odsazen. Snad si rozumíme. Zkusím se porozhlédnout po nějakém elegantním hacku. U IE to už není menšinová záležitost. Pro odsazení od krajů jsem použil právě margin. Myslel jsem, že ten je počítán správně, ale asi ne. U paddingu je mi jasné, že IE chybuje, ale u marginu... Alespoň tak jsem to pochopil z tabulky na JPW. Krom toho je bílá čára i v IE (po pravé straně nahoře). Jinak by to vše bylo ok. Tyhle dva problémy mě ale rozčilují...

Takže jsem udělal pár úprav a zdá se, že IE, FF i Opera stránky zobrazují prakticky stejně, zdá se i bez "posouvacího" bugu. To bylo mým cílem. Jako bonus jsou zobrazovány skoro stejně (liší se hlavně písmo) v mnoha dalších prohlížečích napříč platformami a druhy prohlížečů. Otestoval jsem to zde pomocí online služby - http://browsershots.org/http://webspen.mechenice.net/index.php?content =admin&id=11&lng=czech. Nevím, jestli se tomu serveru dá věřit, ale doufám, že ano. IE, Operu a FF jsem otestoval v nejnovějších verzích na Windows XP EN a Operu a FF na linuxové distribuci Ubuntu 8.10 CZ. Všude bez problémů. Na linuxu jsem ještě zkoušel IE6 a tam je to též OK. Též jsem testoval i nejnovější Operu a již zmiňovaný odkaz s nulami. Nic mi to neshodilo. Kód je nyní doufám snad všude validní (zběžné testy ukázaly, že ano) a css též. Problém s pozadím již není. Pro IE jsem nahodil alternativní styl pomocí podmíněných komentářů a funguje to. Myslím, že je to nejčistší řešení. Z testovaných prohlížečů stránky zobrazil špatně pouze IE 4 a ten se dnes již nepoužívá. A pokud, tak je to rarita. Myslím si, že kvůli němu dělat nějaký hack je spíše výsměch. Krom toho jsem obstál i u prohlížečů typu links (jede snad i na terminálu :-D ) atd. Kód možná není brilantní a obsahuje chyby, ale myslím si, že výsledek stojí za to. Snad jsem si u vás alespoň trochu napravil reputaci.

Tohoto výsledku bych bez vás asi nedosáhl, moc vám děkuji a budu vděčný za případné další připomínky.