Autor Zpráva
Lucy
Profil *
AHoj,

Mám takový hloupý dotaz.
Rozvržení prvků na stránce řídím pomocí div a float.
Validuju podle http://jigsaw.w3.org/css-validator/ , css mám validní, ale asi 30 warnings - většinou všechny s tím, že nemám u elementů, u kterých mám nastavený float nadeklarovanou šířku. Opravdu musí být šířka vždy deklarována? Mám totiž stránku už rozvrženou a vše se zobrazuje dle mých představ. Tak mi zajímá, jestli tam všude musím připisovat šířku nebo jestli je to jedno.
Mufna
Profil
Nemusí, pokud <div>u nastavíš display:inline. Pokud ne, je to nutné (jinak se prvek s float roztáhne na celou šířku). Když bude nastaveno display:inline, tak plovoucí prvek svou šířku přizpůsobí šířce svého obsahu, ale musíš z něj odstranit všechny odstavce a další bloky, které se v inline prvku nesmí vyskytovat.
Jimmy Hayek
Profil
Mufna
Nemusí, pokud <div>u nastavíš display:inline.
Což je v tomto případě hloupost, protože floatovaný div nemůže být zároveň nastaven jako inline.

Lucy
Pokud nemají divy nastavenou velikost, tak se jejich velikost přizpůsobí jejich obsahu. Pokud vše funguje jak má, tak bych se hlášením validátoru vůbec nezabýval...
Plaváček
Profil
Jimmy Hayek

Což je v tomto případě hloupost, protože floatovaný div nemůže být zároveň nastaven jako inline.

Samozřejmě může, dokonce je to jedna z nejjednodušších cest, jak se zbavit double margin bugu v IE 6.
Lucy
Profil *
Nemusí, pokud <div>u nastavíš display:inline. Pokud ne, je to nutné (jinak se prvek s float roztáhne na celou šířku)



Pokud nemají divy nastavenou velikost, tak se jejich velikost přizpůsobí jejich obsahu. Pokud vše funguje jak má, tak bych se hlášením validátoru vůbec nezabýval...

takže co je pravda?
Mně osobně to funguje, jako napsala Jimmy Hayek, div se přizpůsobí svému obsahu. V jakých případech se tedy děje první citace?
Lucy
Profil *
Dám ještě jeden příklad. Mám menu dělané pomoci ul,li celé menu je umístěné v jednom divu, který nemá nastavenou šířku.
CSS k menu je toto:
#menu-top{margin:50px 0px 0px 350px; 
}

#menu-top ul {
			list-style-type:none;
			margin:0px;padding:0px;}
			
#menu-top li { 
			float:left;
			list-style:none;
			padding:0px;margin:0px;}

#menu-top a {font-size:75%;
			display:block;
			padding:5px 17px 5px 17px;
			}


tím floatem u li jsem dosahalo toho, že jsou položky vodorovně za sebou (obtékají se). Přitom nikde není nastavena šířka. Je to tedy chyba? Přijde mi to ale jako hloupost nastavovoat pevnou šířku pro li, jehož šířka je závislá na délce textu odkazu. Opravte mě, pokud se mýlím.
Yur4Y
Profil
Nemusíte nič nastavovať. Vodorovné menu riešim aj ja tak, že <li> sú plávajúce bez pevnej šírky a funguje to všade. Na validátor kašlite, aj tak je celý chybný.

padding:5px 17px 5px 17px;
Môžete to skrátiť na padding: 5px 17px.
Lucy
Profil *
Môžete to skrátiť na padding: 5px 17px
Díky :)
Plaváček
Profil
Lucy

Neděláš v zásadě nic špatného, každopádně se šířkou plovoucích prvků je to trošku ošemetné.

CSS ve verzi 2 pravilo, že plovoucí prvek musí mít povinně nastavenou šířku (nepoužívám W3C CSS validátor, ale tipuju podle varovných hlášek, že vychází z této verze CSS). V CSS 2.1 došlo k posunu a pro výpočet šířky plovoucích prvků byl doporučen (a výrobci moderních prohližečů implementován) nový algoritmus, takzvaný Shrink-To-Fit (pěkný článek si přečti u Pixyho http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082 ).

Z uvedeného vyplývá, že s tvou konstrukcí můžeš teoreticky narazit na problémy ve starších prohlížečích (typicky IE 5.5 nebo IE 6, pokud navíc ještě z vnořených odkazů vyrobíš display:block).

Chceš-li se podobným problémům vyhnout, nechej plavat i odkazy a nezapomeň na "Viktora čističe" :).
Lucy
Profil *
Plaváčku:
Díky za vysvětlení!
Bubák
Profil
Z uvedeného vyplývá, že s tvou konstrukcí můžeš teoreticky narazit na problémy ve starších prohlížečích
Není to tím, že float zapne v IE haslayout? Já jsem měl problém s podobným menu, odkaz jsem měl deklarován blokový a pomohlo mi deklarování šířky pro odkazy. Později jsem zjistil, že ve zmíněném případě pomohlo deklarovat cokoliv, co v IE zapne haslayout.
Plaváček
Profil
Bubák

Ano, drtivou většinu problémů především se staršími verzemi IE vyřeší zapnutí hasLayoutu. Klasicky stačí deklarovat třeba CSS nevalidní zoom:1 (nebo šířku či výšku, pokud to layout webu umožňuje) případně, jak jsem zmínil, udělat i z vnořených prvků plovoucí bloky.
Bubák
Profil
Plaváček
Díky za objasnění.

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: