ugrás a tartalomhoz

DIV height nem nő dinamikusan

newyorkerboy · 2010. Jún. 30. (Sze), 17.58
Ha megnézitek az oldalt Internet Explorer
és bármely másik ismert böngésző alatt, észrevehetitek, hogy a két külső DIV (left_boxes és right_boxes) Explorer alatt
a container DIV teljes hosszára kinyúlik
lefelé, míg a többi browserben nem.
Hogy tudnám rávenni őket, hogy az ezúttal helyesen működő IE-t utánozzák?
‹ DIV width és IE6 map-ra (kép) kattintva hogy tudok behivni egy htlm oldalt egy definiált keretbe ›
 ■
1

Szia, próbáld ki így, talán

mahoo · 2010. Jún. 30. (Sze), 18.47
Szia, próbáld ki így, talán jó lesz:

<div class="sub_footer">
Hirdetés
</div>
<div style='clear: both;'></div>
2

ha jol tudom

neogee · 2010. Jún. 30. (Sze), 19.11
ha jól tudom akkor a magasság az mindig akkora amekkora a benne lévő tartalom. kivéve, ha fix értéket adsz meg. persze lehetséges hogy rosszul tudom, de nekem még nem sikerült kisajtolni egyik böngészőből se, hogy teljesen leérjen egy doboz az őt tartalmazó aljáig :) esetleg próbáld meg egy height: 100% al :) hátha az segit:) ámbátor megjegyezém, hogy IE8 alatt sem ér végig :) legalábbis nálam nem :)
3

Ez a helyes működés

Kevlar · 2010. Júl. 1. (Cs), 12.18
IE8-ban sem ér le a kék háttér a content aljáig.
A float alapműködés az, hogy ha egy nem float-olt block-ban float-olsz más elemeket, akkor azok "kikerülnek" a befogalaló elemükből. Esetedben a 3 oszlop nincs benne a .container-ben, csak a min-height miatt látszik úgy, mintha a két külső div aljáig tartana.
Több megoldás lehetséges:

1. Teszel egy div-et clear: both tulajdonsággal a container legaljára. Ez valszeg mindenhol müködni fog, csak a HTML-t szennyezed vele feleslegesen. (Ezt tanácsolta fentebb mahoo is.)

2. A .container div-nek adsz overflow: auto -t. Ez régebbi IE-ben nem fog működni. De ott meg lehet, hogy nem lesz gond, hiszen alapból rosszul kezelik a float-ot. (Ezért látszik "jónak".)

3. Float-olod a .containert. De középre nem lehet float-olni.
4

margin

neogee · 2010. Júl. 1. (Cs), 14.26
Valóban igazad van, középre nem lehet floatolni, de elméletileg a margó beállításra reagálnia kellene a floatolt elemnek is, nem? :)
Amennyiben igen, akkor valami hasonló css el középre lehet tolni:
float: left;
margin-left: 50%;
left: -(szélesség fele)
5

nem értelmezhető a left tulajdonság

ironwill · 2010. Júl. 1. (Cs), 14.37
Sziasztok!

A float-olt elem elveszti a pozícionálási tulajdonságát (left, top), mint ahogy az absolute-al pozícionált elemet sem lehet float-olni.

üdv, Gábor
6

köszi

neogee · 2010. Júl. 1. (Cs), 14.56
Hmmm köszi szépen :))) Most már ezt is tudom :))
Egyébként én is ezzel a gonddal küzdök amivel a téma indítója, szóval már engem is érdekel baromira a megoldás...:S Mert én eddig nem tudtam megoldani. Akárhogyan, akármit csinálok, mindig akkora lesz mindkét oszlop mérete, amekkora a benne lévő tartalom, és ezáltal a háttérszín is odaveszik az adott elemnél :)
8

Faux Columns

Kevlar · 2010. Júl. 1. (Cs), 15.04
Van erre más megközelítés is:
http://www.alistapart.com/articles/fauxcolumns/
7

Rossz irány

Kevlar · 2010. Júl. 1. (Cs), 15.02
Left csak akkor van, ha pozicionálsz is. Meg az 50% minek a fele? Ez már nagyon gányolás, ki tudja, milyen böngészőben, hogyan megy...
Visszatérve az eredeti problémához, az 1.-es számú megoldás lehet a cross-browser út.
9

nem igazán értem

neogee · 2010. Júl. 1. (Cs), 15.24
Az van, hogy azt nem igazán értem, hogy egy celar:both tlajdonságtól miért nyújtaná ki a két szélső elemet a középső magasságára :) Csak azért, mert én általában beteszem azt a clear:both-t de ettől függetlenül ugyanakkora marad a side elem.

Lásd: http://mtfsze.hu/tabor/

Szóval egy kis okosítást én is szivesen olvasnék ez ügyben
10

Mert nem is nyújtja

Kevlar · 2010. Júl. 1. (Cs), 15.42
Mert nem is nyújtja ki a két szélső elemet. A befoglaló elem nővekszik meg ettől. És a nyitópéldában a kék háttérszín a .container-hez tartozik, csak úgy látszik, mintha a szélső oszlopok nyúlnának.
A faux columns módszer pedig arról szól, hogy a befoglalónak adsz egy háttérképet, ami ismétlődik lefelé.
Az oldaladon csinálsz egy 200px széles szürke képet, beteszed a #main hátterének, bepozicionálod oda, ahol a #bannerBar van, és beállítod, hogy csak lefelé ismétlődjön.
11

igen igen

neogee · 2010. Júl. 1. (Cs), 16.00
Vissza minden...
Bevallom töredelmesen, felületesen néztem meg a beszrt link kódját ellenben viszont okoskodtam... ráadásul jó sokat.. Teljes mértékig igazad van, az ő problémája teljesen eltér és valóban, ha beszúr egy clearer divet, akkor megoldódik.
Közben arra is rájöttem, hogy az én problémámra viszont ilyenformán nem nagyon van megoldás, csak amit javasolsz. Illetve láttam valami megoldást, miszerint:
.sidebar {
padding-bottom: 1000px;
margin-bottom: -1000px;
}

.container {
overlow: hidden;
}
De egyrészt ezt nem sikerült működőképessé tennem, másrészt pedig eléggé tákolás hatású, és nem is igazán értem, minden esetre a példában működött.
12

Hát

Kevlar · 2010. Júl. 1. (Cs), 16.18
Ennek a CSS kódnak nem sok értelme van. Legjobb megoldás a faux columns.
Vagy javascript, kb ennyi:
document.getElementById('bannerbar').style.height =
document.getElementById('content').clientHeight + 'px';
13

Tisztítás két oldalról

kerzo · 2010. Júl. 2. (P), 00.33
A megoldás egyszerűbb, mint gondolnád. A böngésző a sok floatolásban már nem tudja, hogy mit akarsz. Ezért azt kell csinálni, hogy a legalsó elemnek megadjuk, hogy tényleg a container div alján legyen. Ezt úgy érjük el, hogy megmondjuk a böngészőnek, hogy semmilyen elem nem lehet mellette. Vedd ki a .footer css-ből a floatot és írd be helyette, hogy clear: both.

.footer {
  background-image:url("footer_background.png");
  width:1000px;
  height:56px;
  clear: both;
}
Ezzel rákényszeríted a böngészőt arra, hogy tényleg a fizikailag legalsó elem legyen a containeren legalul, aminek hatására a container is kénytelen lesz teljes mértre nőni.
14

Jó

newyorkerboy · 2010. Júl. 2. (P), 20.12
Igen, ezaz, nagyon köszönöm a megoldást, és hogy foglalkoztatok a problémámmal!

Ugyan ezen az oldalon lenne még egy kis hiba, és ezzel kb. be is fejeztem a cross-browser-ré fejlesztését: a kereső kulcsszó mezője chrome és safari alatt 1px-el kilóg balra! :)
Túl aprólékos vagyok? Bár szerintem elég szembetűnő...
Ha valamelyikőtök ebben még segítene, nagyon hálás lennék!
...és bocsi, tudom, egy topic-egy kérdés! :$