Autor Zpráva
liborse
Profil
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.
Plaváček
Profil
liborse

ad 1) Nastav si pro elementy html a body margin: 0 a padding: 0 (nebo použij * {margin:0; padding:0} nebo podobný CSS Reset - http://meyerweb.com/eric/tools/css/reset/

ad 2) Pomohou dvě věci - šířku stránky zkus nastavit jako sudé číslo (ne 955px, ale 956 px). Pokud to nezabere, udělej ten obrázek na pozadí široký třeba 3000px a nechej ho opakovat v ose y. Většinou to pomůže eliminovat problémy se zaokrouhlováním a umístěním pozadí na elementu body.

ad 3) jsem moc nepochopil
Plaváček
Profil
Doplnění - proč probůh pozicuješ všechno absolutně?
grimword
Profil
http://img143.imageshack.us/my.php?image=77963217mv7.png
fungue vam to krasne (odkaz na stranku pod titulkem 0000000000) - padne to pokazde
panther
Profil
grimword
není to k původnímu tématu, ale u mě na Win XP a FF 3 vše OK
grimword
Profil
maji rozdelany redakcni system crashujici uz 2 mesice naprosto spolehlivou verzi prohlizece, takze to asi bude k tematu :)
liborse
Profil
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!
liborse
Profil
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
Plaváček
Profil
liborse

Pořád nechápu, proč chceš obyčejný layout absolutně nebo relativně pozicovat. Co kdyby sis o tom něco přečetl, případně si vybral některý z těchto layoutů http://css.interval.cz/layouty/ a jenom upravil podle své potřeby? Zmizí ti i problém s pozadím ve FF.
liborse
Profil
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?
Chamurappi
Profil
Reaguji na liborse:
Spíše bych viděl chybu jinde, ten kód je validní až na ten neuzavřený tag <P>.
Odstavec nemá povinnou ukončovací značku.

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.
Prohlížečům je úplně jedno, jestli je kód validní. Validita vůbec nesouvisí s tím, jestli stránka shodí prohlížeč.

Běžně však dávám přednost vlastní tvorbě.
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.

Že je vůbec pozicován? Ale to se pak vrať do minulého století, kdy stačilo pouze HTML.
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?

Na pozicování nevidím nic špatného. JPW ho upřednostňuje.
Ukaž.
Plaváček
Profil
liborse

Nezrazuji tě od tvorby vlastního designu, upozorňuji tě na úskalí naprosto zbytečně použitého absolutního pozicování.

Layout, který tak pracně pozicuješ a bojuješ s různými zákeřnými problémy, lze postavit za použití čtyř DIVů a několika řádků CSS - spíchnul jsem to narychlo a práce mi zabrala asi tři minuty: http://klient.plavacek.net/redakcni-system.html

Závěrem podotknu, že máš právo dělat si, co chceš, ale ptal jsi se na radu a já ti dal tu nejlepší dle svého vědomí a svědomí. Vynalézat znovu kolo, když většina populace drandí na motorovém kolečku, je kontraproduktivní a jedná se o zbytečnou ztrátu času.
liborse
Profil
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.
Plaváček
Profil
liborse

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

V tomto případě bych se s tak minoritním prohlížečem vůbec netrápil. Zmíněná chyba sice lze obejít, ale za cenu poměrně nestandardní konstrukce, což dle mého soudu nestojí za to.

Klidně si můj rychlý pokus bezhlavě zkopíruj, nic tajného na něm není a navíc si ho stejně budeš muset upravit pro své potřeby.
liborse
Profil
OK, kouknu na to. A díky za rady, vážím si jich.
liborse
Profil
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í...
liborse
Profil
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: