Autor Zpráva
marek.skalka@gmail.c om
Profil *
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
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 *
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
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 *
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
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 *
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 *
marek.skalka@gmail.c om
mas stary FF i operu :)
Zdeněk
Profil *
Hm, ja bych raději vycházel z toho, jak ta stránka dopadne s korektní hlavičkou, např.:
<b>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;</b>
tj. ve standard compliant mode ...
Zdeněk
Profil *
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 *
Zdeněk:
No jo. Ve standard compliant mode se Internet Explorer 6 chová rozumně. (Opravil jsem stránku 4). Díky.
Plaváček
Profil
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 *
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 ...
Toto téma je uzamčeno. Odpověď nelze zaslat.