Autor Zpráva
Machi
Profil
#1 · Zasláno: 12. 12. 2006, 15:56:16
Odpovědět Citovat
Zdravím, pracuju na nové verzi svého webu a řeším jeden problém. Hned nahoře mám panel s aktualitami, vedle kterého je reklama. V kódu to vypadá takto: 

<div id="header">

    <div id="aktuality">

    ...

    </div>

    <div id="rekl">

    ...

    </div>

</div>


A ten hlavní div má určovat rámeček pro oba dva dvořené divy, jenže problém je v tom, že když mu nedefinuju height, tak to prostě nejde a když mu to definuju (tak je to teď), tak to není univerzální, protože aktuality budou pořád měněny... Tady je ještě CSS: 

#aktuality {

  display:block;

  width:360px;

  background-color:#FFFFD9;

  margin:0 0 15px 0;

  padding:0;

  float:left;

}



#rekl {

  width:340px;

  float:right;

  margin-top:5px;

}



#header {

  width:720px;

  height:305px;

  border:1px solid #FC6;

  padding:5px 0 5px 0;

  margin-bottom:15px;

}


Rád bych věděl, zda lze nějak zvětšování toho hlavního divu zautomatizovat... Díky za každou radu :)
habendorf
Profil
#2 · Zasláno: 12. 12. 2006, 16:22:03
Odpovědět Citovat
Machi: Rád bych věděl, zda lze nějak zvětšování toho hlavního divu zautomatizovat

Div se automaticky natahuje dle svého obsahu. Tobě se nenatahuje, protože v něm žádný obsah nemáš. Přečti si něco o clear.
Machi
Profil
#3 · Zasláno: 12. 12. 2006, 17:08:18
Odpovědět Citovat
habendorf - Samozřejmě, že se nenatahuje, když v něm nic není, právě proto se ptám, jestli to jde nějak oblbouti... A ten clear na tohle nezabírá :(
habendorf
Profil
#4 · Zasláno: 12. 12. 2006, 17:13:55
Odpovědět Citovat
právě proto se ptám, jestli to jde nějak oblbouti
Právě proto ti odpovídám. Musíš tam mít obsah s clearem.
Machi
Profil
#5 · Zasláno: 12. 12. 2006, 17:48:21
Odpovědět Citovat
habendorf - jenže tam nemůže být obsah :(
habendorf
Profil
#6 · Zasláno: 12. 12. 2006, 17:53:38
Odpovědět Citovat
Machi: Asi mi nerozumíš. Ty tam máš obsah, ale teď je vyplavaný. Je třeba ukončit obtékání. Ještě jednou - přečti si o clearu.
Machi
Profil
#7 · Zasláno: 12. 12. 2006, 18:03:39
Odpovědět Citovat
habendorf - Asi ti fakt nerozumím. Mně jde jenom o to, aby se rámeček kolem těch dvou vnořených divů správně roztahoval a zmenšoval automaticky. Pokud použiju clear, tak to musím použít až na nadpis článků, který je pod tím, jinak to přece nemá žádný effect ne?
habendorf
Profil
#8 · Zasláno: 12. 12. 2006, 18:14:39
Odpovědět Citovat
Pokud použiju clear, tak to musím použít až na nadpis článků, který je pod tím, jinak to přece nemá žádný effect ne?

Já se ti pořád snažím říct, že tam musíš dát OBSAH s clearem.

Co třeba

<div id="header">
<div id="aktuality">
...
</div>
<div id="rekl">
...
</div>
<br class="cleaner" />
</div>

.cleaner {height:0; font-size:0;line-height:0.0;clear:both;}
Walter
Profil *
#9 · Zasláno: 12. 12. 2006, 18:18:45
Odpovědět Citovat
dej obalovacimu divu _height: 1px pro IE a min-height 1px. Nebo to muzes vyresit vnorenim divu ktery bude mit clear: both a tim ukonci priypusobi a natahne obsah.
Machi
Profil
#10 · Zasláno: 12. 12. 2006, 19:06:18
Odpovědět Citovat
habendorf - diky moc, tohle mě tak nějak vůbec nenapadlo, občas mám sklony k mírné imbecilitě, ale jede to krásně, akorát to, ikdyž je tam height:0 zvětšilo padding :)
Walter - s příchodem IE7 přestávám používat IE6 hacky :D
Gappa
Profil
#11 · Zasláno: 13. 12. 2006, 08:43:22 · Upravil/a: Gappa
Odpovědět Citovat
Nebo nemusíš používat cleaner vůbec:

#header {
width:720px;
height:305px;
border:1px solid #FC6;
padding:5px 0 5px 0;
margin-bottom:15px;
overflow: hidden;
}

hodnota pro overflow zaručí (dle potřeby se může dát visible i scroll), že se počká i na floatované objekty - funguje jak v FF a Opeře, tak i v IE - akorát s menším omezením, že prvek obalující floatované prvky musí mít zadanou šířku - ať v px, % nebo v čemkoliv jiném. Hodnotu "auto" IE nezblajzne :)

EDIT: šířku je nutné uvést jenom pro IE. FF a Opera to nepotřebují.
Machi
Profil
#12 · Zasláno: 13. 12. 2006, 14:03:39
Odpovědět Citovat
Gappa - Vypadá to sice funkčně, ale zase je to takový ten bastl, kdy pro IE musíš použít jiné hodnoty, než pro ostatní. Já se snažím teď, na přelomu mezi IE6/7 udělat web, který se zobrazuje bez hacků stejně ve všech prohlížečích, což asi splňuje líp ten clear :) ale dík za tip
habendorf
Profil
#13 · Zasláno: 13. 12. 2006, 14:11:42
Odpovědět Citovat
Machi: Pokud ti to nějak odsouvá, tak místo toho br dej třeba <div class="cleaner">&nbsp;</div>, styl nech jak je. Dost často je také vhodné použít třeba hr.

Ale odsouvat by to stejně nemělo, tu font-size a line-height jsi doufám nevyhodil?
Jinak je pravda, že s tím br někdy zlobí Firefox 2.0, ale dle mého pozorování zlobí jen v situaci, kdy floatovaný je jen jeden element, ty máš ale floatované oba.
Machi
Profil
#14 · Zasláno: 13. 12. 2006, 14:13:18
Odpovědět Citovat
habendorf - Zapomněl jsem to sem napsat :) To odsouvání byla moje chyba, zapomněl jsem u jednoho floatovaného divu margin-bottom :)
Gappa
Profil
#15 · Zasláno: 13. 12. 2006, 18:14:14
Odpovědět Citovat
Machi:...ale zase je to takový ten bastl...

Ne, je to plně použitelné a funkční. Sám to používám téměř všude, kde to jen lze - určitě lepší, než všude dávat nějaký element navíc pro vyclearování floatů.

Jinak tohle hack není žádný, to prostě funguje a jsem rád, že jsem to objevil :)

Má to sice to omezení, že se IE musí dodat šířka, či výška, aby se (někdo jsem to vyčetl) aktivovalo "hasLayout" a mateřský element čekal na vykreslení floatů, ale nějakou hodnotu umíme většinou dodat, takže není problém. Tam, kde toto řešení použít nelze je samozřejmě nutné použít klasické stylování :)
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0