Autor | Zpráva | ||
---|---|---|---|
marek.skalka@gmail.c om Profil * |
#1 · Zasláno: 21. 7. 2005, 14:50:48
Snažím se spojit dva postupy pro rozvržení stránky využívající float a clear, ale nedaří se. Kvůli přehlednosti vysvětlím problém ve třech krocích:
1) Obtékání obrázku (není problém) Stránka s textem a obrázky. Obrázky chci obtékané vlevo, ale není žádoucí, aby byl (n-1)tý obrázek napravo od n-tého, pokud mezi nimi není dostatek textu. Řešením je použít vlastnost clear, která nařídí namísto obtékání posunout takovou věc níž. Ukázka (Stránka 1) 2) Dvousloupcový beztabulkový layout (není problém) V úzkém levém sloupci chci menu, ve zbytku stránky bude vlastní obsah. Úplně dole pak chci jeden řádek přes celou šířku pro patičku. Nevadí, pokud pozadí menu a vlastního obsahu budou končit v jiné výšce. Řešení: Levý sloupec bude mít pevnou šířku (200px) a bude plovoucí (float:left), pravý bude mít nastavený margin-left:205px, aby vlastní obsah tvořil vždy obdélník, a to i tehdy, když je výška pravého sloupce větší než výška menu. Patička má nastavevo clear:left. Ukázka (Stránka 2) 3) Kombinace 2 & 1 Vlastní problém nastává v okamžiku, kdy chci umístit Stránku 1 jako obsah do pravého sloupce Stránky 2. Přitom chci, aby obsah pravého sloupce vypadal a choval se stejně jako původní Stránka 1 samotná. Průšvih je v tom, že vlastnost clear:left u elementu <p> odsune takový odstavec dolů až na místo, kde končí levý sloupec s menu (Mozilla Firefox 1.0.4, Internet Explorer 5, Internet Explorer 6). Zajímavé je, že (jedině) v Mozille Firefoxu 1.0 Preview Relase to funguje přesně tak, jak jsem chtěl. (V tomhle browseru jsem to vymyslel, abych pak zjistil, že to jinde nefunguje:-( ) [b]Ukázka (Stránka 3)[b] Jesli jsem to dobře pochopil podle knížky o css od Petra Staníčka, clear:left zruší obtékání všech vlevo plovoucích prvků (to je to chování většiny prohlížečů, které se mi zrovna nehodí). Otázka zní: Dá se moje konstrukce nějak opravit, aby se stránka zobrazovala tak, jak chci (aby se clear vztahoval jen k floatům ve stejném bloku)? Případně, jak dosáhnout stejného výsledku jinými prostředky, pokud možno co nejjednodušeji a nejčistěji? S pevými rozměry obrázků nebo minimální/maximální délkou textu u nich nelze počítat. Díky. |
||
flying gentleman Profil |
#2 · Zasláno: 21. 7. 2005, 15:01:10
bohuzel jsem to moc nepochopil, zkus to prosim vysvetlit nejak polopatisticky v jedne dvou vetach co te vlastne trapi.prosim
|
||
marek.skalka@gmail.c om Profil * |
#3 · Zasláno: 21. 7. 2005, 15:25:53
OK, shrnutí:
- Chci stránku s menu pevné šířky vlevo a vlastním obsahem vedle něj. - Vlastní obsah jsou články - odstavce s obrázkem, obázek je vždycky vlevo a text ho obtéká. - Články jsou pod sebou. - Vymyslel jsem jednoduché a čisté řešení, které ale nefunguje, potřebuju lepší. Dík. |
||
flying gentleman Profil |
#4 · Zasláno: 21. 7. 2005, 16:35:20
a neslo by tem obrazkum dat pozici atributem align primo v html???treba align="left".vim, css by bylo lepsi, ale ja jen ze by to slo i takhle,snad.
jinak to muzes napozicovat absolutne se sirkou kolem 750px. a kdyz das tem obrazkum float:left; tak to dela co? |
||
marek.skalka@gmail.c om Profil * |
#5 · Zasláno: 21. 7. 2005, 19:25:03
flying gentleman:
- Použít html atribut align u obrázku by samozřejmě šlo a fungovalo by to, stejně jako udělat celý layout pomocí tabulek; o takové řešení mi nešlo:-( - nevím co jsi myslel "napozicovat absolutne se sirkou kolem 750px", ale na to bych u toho musel znát oba rozměry (a to neznám), navíc dávat něčemu pevnou šířku moc nechci - když dám obrázkům float:left (a nic víc), dojde u článků s krátkým textem ke kolizi obtékání (jakpsatweb.cz). (Totéž jako v odkázané stránce, ale vlevo, více obrázků zakousnutých vedle sebe) - když dám obrázkům float:left a následujícímu článku clear:left, posune clear další článek vertikálně až pod menu (Stránka 3) Ale stejně dík. Nějaké další návrhy? |
||
Plaváček Profil |
#6 · Zasláno: 21. 7. 2005, 19:30:47 · Upravil/a: Plaváček
No, zběžným pohledem by mohlo pomoci, kdybys do bloku označeného jako Vlastní obsah vrazil ještě jeden div. Tomu nastav šířku 100% a float: left. Pak i v rámci tohoto bloku můžeš použít clear:both u odstavce.
|
||
marek.skalka@gmail.c om Profil * |
#7 · Zasláno: 21. 7. 2005, 20:33:51
Plaváček:
Ano, to je ono. Díky moc. Pokud chcete vidět, co jsem měl na mysli, podívejte se na výsledek (Stránka 4). (Mozilla Firefox 1.0.4, Opera 8.0) _____ Internet Explorer (testován zatím 6.0 ve zpětně kompatibilním režimu) pochopí width:100% u toho "divu navic" po svém, a to tak, že tento div má být stejně široký jako celé okno prohlížeče, takže přesahuje o cca 205px doprava mimo průzor a ještě začíná vertikálně až pod menu. Protože to dělá jen IE a protože v CSS nejde zapsat šířka jako (100%-205px), udělám asi uživatelům tohoto prohlížeče extra styl s pevnou šířkou (nějak takhle), pokud nepřijdu na nic lepšího. |
||
peta Profil * |
#8 · Zasláno: 21. 7. 2005, 22:45:09
marek.skalka@gmail.c om
mas stary FF i operu :) |
||
Zdeněk Profil * |
#9 · Zasláno: 21. 7. 2005, 23:07:21
Hm, ja bych raději vycházel z toho, jak ta stránka dopadne s korektní hlavičkou, např.:
<b><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"></b> tj. ve standard compliant mode ... |
||
Zdeněk Profil * |
#10 · Zasláno: 21. 7. 2005, 23:09:12
Sorry, ta hlavička měla vypadat samozřejmě takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
||
marek.skalka@gmail.c om Profil * |
#11 · Zasláno: 21. 7. 2005, 23:57:03
Zdeněk:
No jo. Ve standard compliant mode se Internet Explorer 6 chová rozumně. (Opravil jsem stránku 4). Díky. |
||
Plaváček Profil |
#12 · Zasláno: 22. 7. 2005, 06:52:08
Pokud pošleš IE do quirk modu, mělo by ti to všechno fungovat správně. Ostatně, pokud chceš, aby ti web fungoval dobře i na IE 5 - 5.5, nic jiného ti nezbyde.
|
||
Zdeněk Profil * |
#13 · Zasláno: 22. 7. 2005, 10:25:04
Plaváček:
Problém je v tom, že IE6 v quirk mode má (kromě řady jiných už dostatečně profláknutých) nějaký hodně ošklivý bug (o kterém jsem zatím nikde nečetl): vypadá to, že box width počítá včetně margins! Alespoň pokud se u child boxu nastaví width 100% a parent má nějaké margins, tak to přesně takhle blbě dopadne - viz právě tenhle thread. Myslím, že ani IE5.x to takhle úplně blbě nepočítá - tam je box width pouze včetně borders. To už je IMHO lepší používat standard compliant mode kde to jde, a s rozdílama pro MSIE 5.x se nějak vyrovnat - většinou to jde matrjoškou ... |
||
Časová prodleva: 19 let
|
Toto téma je uzamčeno. Odpověď nelze zaslat.
0