Spoločnosti Online s.r.o.

Zablokovaný užívateľ

Ja už fakt neviem čo sa deje. Pár mesiacov som s css moc nerobil a už sú problémy.
Dnes som nakódoval horizontálne menu s floatovanými položkami a chcel som pridať clearovač, aby sa obalovací alement nescvrkával, ako som to poznal doteraz.
Ešte som ho tam nedal a pozerám, že ani neni treba.
Hneď som začal prekopávať kód, že kde je ten clerovač a ako je to možné, že sa obal nescvrkol, ale nič som nenašiel.
Vyzerá to tak, že ho neni potrebné pridávať.
Pozeral som do všetkých možných brovserov a všade je to ok.
Aj IE7 to zobrazuje rovnako. To ma najviac metie....
Ale doteraz neviem či mi nešibe, preto sa pre istotu pýtam, či je to pravda, alebo nie?

Administrátor

Bez kodu ti toho vela nepovieme, ale ak mas na obalovacom prvku overflow: auto alebo hidden, vycisti ti to dany blok aj bez prvku s clear: both.

Zablokovaný užívateľ

Kód je len taký testovací zdrap, ale keď som to osekal tak mi z toho naozaj vyšlo to čo hovoríš a bez toho overflow je to tak ako som zvyknutý:

kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body, div, form, p, img, menu, ul, ol, li, a, h1, h2, h3{margin:0px; padding:0px}
</style>
</head>
<body>
<div style="background-color:blue; margin:50px auto; width:900px; overflow:auto">
<div style="float:left; width:200px; height:350px; background-color:green"></div>
bla bla bla bla bla bla
</div>
</body>
</html>

rozmýšľam či by sa to takto dalo používať, alebo je v tom nejaký háčik...

Administrátor

Da sa to normalne pouzivat, http://www.quirksmode.org/css/clearing.html

Zablokovaný užívateľ

Sorry, že zase otravujem, ale keď som sa dnes spokojný, že sa to vyriešilo, vrátil k tej šablone kde to vzniklo, tak som zistil, že to neni v tom overflow.
Ak má niekto náladu, tak tu je originál:

kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>title</title>

<style type="text/css">
html, body, div, form, p, img, menu, ul, ol, li, a, h1, h2, h3{margin:0px; padding:0px}
html,body{height:100%}
body, table, form, h1, h2, h3, h4{font-family:tahoma}

body{}
#obal{Nborder:1px solid red; min-height:100%; min-width:950px; position:relative;}
#header{Nborder:1px solid red; background-color:#bbbbbb; margin:0px auto; height:275px; position:relative; z-index:100/*koli hover menu*/}
#header h1{display:none}

#menuBG{color:#ff1a00; position:absolute; bottom:0px; left:0px; width:100%; background-color:#333333}
#menuBG ul{width:950px; margin:0px auto}
#menuBG ul li{position:relative; float:left; list-style-type:none;}
#menuBG li a{display:block; padding:15px 20px; font-weight:bold; color:#f9d577; text-decoration:none; outline:0}
a:visited{outline:0}
#menuBG li a:hover{color:#f9d577; background-color:#7f5555;}
#menuBG li:hover{color:#f9d577; background-color:#7f5555;}
#menuBG li ul li{float:none}
#menuBG li ul li a{padding:7px 20px}
#menuBG li ul{display:none; position:absolute; top:auto; left:0px; width:150px; background-color:#333333}
#menuBG li:hover ul{display:block;}

#obsah{Nborder:1px solid red; position:relative; margin:0px auto; width:950px; padding-bottom:180px;}

#pataBG{Nborder:1px solid red; background-color:#bbbbbb; color:#ff1a00; position:absolute; bottom:0px; left:0px; Nmargin-top:-110px; width:100%; height:120px; background-color:#bbbbbb}
#pata{Nbackground-color:red; width:950px; margin:17px auto 0px; text-align:center}
#pata li{display:inline; list-style-type:none}
#pata li a{display:inline-block; padding:5px 40px; color:#ffffff; text-decoration:none; font-weight:normal; letter-spacing:1px; font-size:0.8em}
#pata li a:hover{color:#f9d577; background-color:#aaaaaa}

form, #contentDiv{background-color:#f7fff7; position:relative}
h2{border-top:1px solid #e9f9ec; padding:5px 15px; position:relative; z-index:100; color:#955550; font-family:tahoma; margin:20px 0px 0px; background-color:#f7fff7}
form{border-top:1px solid #e7f9e7; padding:7px 15px; font-family:tahoma}
#contentDiv{Nborder-bottom:1px solid #e9ffc9; padding:5px 15px;}
#pridajTableJS{display:none; border-collapse:collapse; margin:0px -10px; width:940px; Nbackground-color:#eeeeff; font-family:tahoma;}
#pridajTableJS th{border:1px solid #eeffee; border:1px solid #e9d0d0; padding:20px 7px 10px; height:120px; min-height:120px; overflow:hidden; cursor:pointer; text-align:center; border-collapse:collapse; font-size:1em; background:url('../pictures/fajka3.png') right top repeat-x; background-color:#ffeeee;}

#help{height:15px; width:100px; overflow:hidden; position:absolute; right:0px; top:0px; z-index:100; padding:5px 15px; color:#ffffff; font-size:15px; text-decoration:none; background-color:#299540}
#help:hover{height:100px; width:300px; overflow:auto}

</style>



<script type="text/javascript">

</script>

</head>
<body>
<div id="obal">
<div id="header">
   <div id="menuBG">
   <div id="menu">
<ul>
      <li><a href="#">item1</a><ul>
      <li><a href="item11.php">item11</a></li>

            <li><a href="item12.php">item12</a></li>
            <li><a href="item13.php">item13</a></li>
            </ul></li>
         <li><a href="item2.php">item2</a></li>
            <li><a href="item3.php">item3</a></li>
            <li><a href="item4">item4</a></li>

            <li><a href="item5.php">item5</a></li>
            <li><a href="item6.php">item6</a></li>
            </ul>
                  </div>
   </div>
</div>
<div id="obsah">
</div>

<div id="pataBG">
</div>
</div>

</body>
</html>

Administrátor

Hovorime o plavajucich <li> v #menuBG ul? Ak ano, tak samozrejme to je v tom overflowe, kedze takto ma tento <ul> nulovu vysku.

Zablokovaný užívateľ

Ako to, že je to v tom overflowe?
Veď tam nikde neni zadefinovaný?
Ak ak má to ul nulovú výšku(čo by som čakal), tak ako to ,že všetko sedí tam kde má?

Administrátor

No ved ano, nie je zadefinovany, preto <ul> nie je vycisteny => ma nulovu vysku.
Od konkretne ktoreho prvku ocakavas, ze nebude sediet tam, kde ma?

Inak by tiez bolo pekne upozornit, ze svoj problem riesis aj na inych forach a najlepsie rovno poslat odkazy; ak by si sem prisiel s problemom, nad ktorym by sme sedeli desat-patnast minut, pricom niekto niekde inde uz riesenie ma, vies ako...

Zablokovaný užívateľ

Ide o to #menuBG.
Ten by podľa toho mal mať tiež nulovú výšku, nie?

Administrátor

To robi ta absolutna pozicia. Nejdem sa hrabat v specifikaciach, preco to tak je, ale zobraz si tento jednoduchy priklad a potom prvku #a pridaj position: absolute a pozri, co sa bude diat.

Zablokovaný užívateľ

Hmmm naozaj je to tak.
Rozmýšĺam prečo sa celé Československo prple s clearovačmi, keď existuje ten overflow...

kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body, div, form, p, img, menu, ul, ol, li, a, h1, h2, h3{margin:0px; padding:0px}
</style>
</head>
<body>
<div style="background-color:blue; margin:50px auto; width:900px; position:absolute">
<div style="float:left; width:200px; height:350px; background-color:green"></div>
bla bla bla bla bla bla
</div>
</body>
</html>

EDIT:
Tak ten overflov nieje celkom ideálny, lebo ak je v ňom nejaký prvok s position absolute, tak obaluje aj ten, aj keď chcem, aby bol mino obalu, ako napr. pri vysúvacom menu...
Skôr je lepšia position:absolute ak sa to dá použiť...

EDIT2:
No a position:absolute nefunguje v IE6. Tak preto sa celé Československo prple s clearovačmi

EDIT3:
Position:absolute v IE6 funguje(to ja som zabudol, že nefunguje hover na li), tak je to s tým CS diskutabilné...
K tomu prvému editu - treba použiť overflow:visible

Spoločnosti Online s.r.o.

Auto žiarovky - dobré ceny

NIVEA proti celulitíde

Zaregistruj sa!

Poistenie majetku UNIQA

float+clearovač

SEO - optimalizácia pre vyhľadávače

Freebsd