ipsace i tiskace

Příklad je v poctatě triviální, ale nevím, jestli jsem jen objevil chybu gecka nebo je to nějaká CSS zapeklitost.

Věc se má tak. Jak všechny víte, jsem ortodoxní zastánce flexi šířky blogu. Při této příležitosti jsem na vlastní oči zjistil, že jsou i zoufalci, kteří můj bložínexledují v okně šířky 1600px!! A tak ve mě uzrálo rozhodnutí, že těmto úchylákům vyhovím a začal jsem pracovat na novém stylu. Pokud jste dočetly až sem, mám pro vás bonus. Nový styl se bude jmenovat kuličky.

A při experimentech jsem objevil dále zmíněný jev. Vezměme si modelový příklad. Máme stránku s boxíky ve stylu "fotogalerie". Každý boxík má pevně stanovené rozměry. Pokud uživatelka zadá text do boxíku delší, než by se vešel, musíme nadbytečnou část textu oříznout. K tomu běžně slouží CSS vlastnost overflow: hidden

Všechny neobarvené divy jsou pro názornost opatřeny rámečkem (border). Ostatně trik s borderem používám vždy, když vytvářím jakýkoliv lejout. Na začátek stylopisu dám pravidlo

v určité fási ho pak zruším.

Vnější div (široký světlešedý rámeček) to celé obaluje a pevně určuje prostor celku. Dále následuje (šedý) div, který bude později obtékán, div s hlavním textem (červený rámeček) a patička (žlutý rámeček ), která by měla být v každém případě viditelná.

Příklad bez lejoutu a posicování

Žádný float, pouze rozměry obalového divu. Výška má být 11em.

Vidíme, že žádná informace nezůstala skryta, ale požadovaná výška 11em nebyla dodržena. Octavec, který právě čtete, by začínal hned pod vodorovným oddělovačem a oba texty by tak šly "přes sebe", což by způsobovalo nečitelnot jak pokusného textu, tak tohoto vysvětlujícího octavce. Proto jsem zde v textu blogu musel udělat horní margin 10em.

Příklad s danými rozměry

Aby se nám patička neschovala, musíme omezit výšku hlavního textu. Patička zabere výšku asi 1.7em, proto zvolíme výšku vnitřního textu 9.5em. A obrázek necháme obtékat, což bude vidět na živé ukázce.

Text sice správně obtéká, ale překrývá patičku a vytéká z přiděleného místa.

Přidáme vlastnost overflow:hidden

Úplně stejný příklad, ale div s hlavním textem (červeně orámovaný) má navíc jedinou vlastnost overflow:hidden.

Dosáhli jsme toho, že text sice nikam nepřetéká, patička je viditelná, ale zpotvořilo se obtékání! Pravý okraj textu se natvrdo nastavil vedle obrázku a pod ním teď zeje prázdné místo. Červený rámeček je nyní vlevo od tohoto místa.

Alespoň v gecku (seamonkey 1.1) tam to prázdné místo je. Co u vás v jiných prohlížečích?

Řešení

Zkoušel jsem všechno možné, ale pomocí pouze zásahů do CSS se mi problém vyřešit nepovedlo. Pomohlo až přestrukturovaní dokumentu. Změna spočívá v tom, že div s hlavním textem nebude ležet za obtékaným obrázkem, ale pohltí ho, tedy plovoucí obrázek bude uvnitř (nikoliv před) tím červeně orámovaným blokem.

Jednoduché a účinné, ovšem jen potud, pokud si můžete dovolit přestrukturovat HTML. Což já v konkrétním příkladě nemohu. Ale aspoň se se mnou pokochejte fukčním příkladem.

ZdRojovy kódy každého příkladu si můžete prohlédnout, když si ho označíte do bloku a kliknete na něm pravým myšítkem. V objevivším se kontektovém menu vyberete Zobrazit zdrojový kód výběru a je to. Enjoy!