| Autor | Zpráva | ||
|---|---|---|---|
| Lucy Profil * |
#1 · Zasláno: 15. 8. 2009, 01:43:02
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 |
#2 · Zasláno: 15. 8. 2009, 01:56:05
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 |
#3 · Zasláno: 15. 8. 2009, 02:25:55
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 |
#4 · Zasláno: 15. 8. 2009, 06:21:01
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 * |
#5 · Zasláno: 15. 8. 2009, 09:08:26
„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 * |
#6 · Zasláno: 15. 8. 2009, 09:21:06
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 |
#7 · Zasláno: 15. 8. 2009, 09:49:31
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 * |
#8 · Zasláno: 15. 8. 2009, 10:12:14
„Môžete to skrátiť na padding: 5px 17px“
Díky :) |
||
| Plaváček Profil |
#9 · Zasláno: 15. 8. 2009, 11:12:09 · Upravil/a: Plaváček
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 * |
#10 · Zasláno: 15. 8. 2009, 12:35:39
Plaváčku:
Díky za vysvětlení! |
||
| Bubák Profil |
#11 · Zasláno: 15. 8. 2009, 20:50:36
„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 |
#12 · Zasláno: 16. 8. 2009, 10:28:10
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 |
#13 · Zasláno: 16. 8. 2009, 20:58:23
Plaváček
Díky za objasnění. |
||
|
Časová prodleva: 15 let
|
|||
0