Autor Zpráva
DDD
Profil
Mám div a v něm odstavec s daným marginem, např.:
<html>
<body style="margin:0px">
<div style="height:600px;width:600px;background:#000">
<p style="height:100px;width:100%;margin:100px 0 0 0;padding:0;background:red">text</p>
</div>
</body>
</html>

Očekával bych, že div zůstane nahoře a text odstavce se posune o hodnotu marginu, místo toho se ale (ve FF a Opeře) posune celý div, jako by margin měl nadefinivaný on a text zůstane u okraje divu. V IE6 to funguje tak, jak chci, přestože rozdílný box model má jen u paddingu a borderu. Čím to je?

Potřebuji to z tohoto důvodu:
Měl jsem nastylovaný nadpis h1 na šířku obrazovky a pod ním vycentrovaný div s pevnou šířkou se zbytkem obsahu. Pak jsem si ale usmyslel, že chci mít patičku vždy dole a na to potřebuju mít div s výškou 100%, tak mě napadlo, že nahoře nějak udělám mezeru s pomocí prvního vnitřního prvku (drobečky) a h1 tam pak absolutně napozicuji:
-u marginu mi vznikl problém, který jsem popsal
-padding tam dát nemůžu kvůli různým box modelům (drobečky mají danou šířkou)
-když zvýším výšku drobečků, jejich text zůstane nahoře a h1 by je překryl, jedině když zvýším hodnotu line-height na skoro dvojnásobnou hodnotu šířky, text bude dole - pokud nevymyslím nic lepšího, tak budu muset použít tohle
-ještě jsem zkoušel jiné věci, ty ale zase fungovaly jen v IE (např. nastylovat nějak odkazy v drobečcích)
-další div tam dát nechci

Napadá vás, jak ještě to udělat? Děkuji.
Davex
Profil
V tomto případě dochází ke slučování okrajů podle CSS 2.1 - Collapsing margins. Obalovému divu definuj overflow jiné než visible nebo přidej padding-top, border-top, a nebo ho rozplavej pomocí float.
DDD
Profil
Díky moc! To jsem potřeboval...
DDD
Profil
Už jsem se radoval... a mám další problém:
Když obalovému divu nastavým výšku 100%, patička je vždy dole. Když se ale text uvnitř divu nevejde na obrazovku a začne zajíždět pod patičku (obalovanému divu jsem nastavil overflow:hidden), což je normální, protože div má pevnou výšku. Stejně se to ale chová i v IE, přitom ten by měl brát height jako min-height. A když nastavím min-height, tak bych čekal, že bude patička dole a pak se roztáhne, jenomže se to chová, jako by tam nebylo napsáno nic - patička zůstane za textem.
Nevíte, co dělat s tímhle?

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: