Autor Zpráva
peta
Profil
Na jednom foru jsem objevil zajimavy dotaz. Neprisel jsem ale na duvod, proc se to tak chova.

<div style="overflow:auto;margin-left:100px;background-color:green;width:100px;min-height:200px;">

<p style="float:right;width:200px;background-color:red; ">
block block block block block block
block block block block block block
block block block block block block
<p>

<div style="clear:right;color:#fff;">XXX</div>
</div>

Kdyz se float:right zameni za left, tak se ve FF objevi scrollbar, ale s right ne. Proc? Dela mi to i IE. Ten div clear jsem si tam doplnil navic, ale nic to nevyresilo.
kaktuss
Profil
scrollbar sa ti objaví preto, že tam máš overflow:auto, čiže akonáhle je niečo "mimo hranice", zobrazí sa scrollbar. Keby si nastavil overflow:hidden, tak sa scrollbar nezobrazí.

Doplnené: aj keď ti right posunie obsah mimo ľavej hranice, scrollbar sa zobrazí iba v prípade, ak obsah presahuje pravú hranicu. Chová sa to takto preto, lebo všetko je akoby zarované zľava. Aj keď okno browsera začneš zmenšovať z ľavej strany, tak keď sa ti zobrazí scollbar, stránka je zarovnaná zľava a obsah sa ti posunie mimo pravú hranicu okna.
margin
Profil *
Něco podobného je skrytí elementu pozicováním mimo obrazovku (element BODY) nahoru nebo doleva. Tenhle trik je starý, profláknutý a kupodivu se nikdo nepozastavuje nad tím, že se scrollbar neobjevuje.
peta
Profil
Je to uzivatelsky nelogicke. Jako, tve vysvetleni je ok, dava to smysl. Ono, zaporny scroll jsem vlastne nikdy nevidel :) Dela to i s position, kdyby si to nekdo chtel zkusit (ten scroll tam dela ten ramecek ve FF).

<style>
.a {overflow:auto;margin-left:100px;background-color:green;width:100px;min-height:100px;}
.b {width:200px;background-color:red; border:2px solid #08f;}
.ac {position:relative;}
.ba {float:right;}
.bb {float:left;}
.c {position:absolute;}
.ca {left:-100px;}
.cb {right:-100px;}
</style>

<div class="a">
<p class="b ba">
block block block block block block
<p>
<div style="clear:both;color:#fff;">XXX</div>
</div>

<hr>

<div class="a">
<p class="b bb">
block block block block block block
<p>
<div style="clear:both;color:#fff;">XXX</div>
</div>

<hr>

<div class="a ac">
<p class="b c ca">
block block block block block block
<p>
</div>

<hr>

<div class="a ac">
<p class="b c cb">
block block block block block block
<p>
</div>

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: