DIV height dinamikusan
Üdv,
Adott egy másodszintű headline, egy div és egy paragraph egymás alatt, után. Szeretném megoldani, hogy a divemnek a magassága dinamikus legyen, mivel található benne egy a tag, mely float: left -elve van, a benne lévő img tartalommal együtt, illetve egy paragraph, szöveggel. A fejtörést az okozza, hogy ha a paragraphban növelem a szöveg mennyiségét, a szöveg rányúlik chrome alatt az alatta lévő szövegre, s nem nyúlik az egész. Már sok mindent kipróbáltam rá, de semmi :S Ötletek, tippek?A befoglaló div kódja css-ben pedig most:C.
■ Adott egy másodszintű headline, egy div és egy paragraph egymás alatt, után. Szeretném megoldani, hogy a divemnek a magassága dinamikus legyen, mivel található benne egy a tag, mely float: left -elve van, a benne lévő img tartalommal együtt, illetve egy paragraph, szöveggel. A fejtörést az okozza, hogy ha a paragraphban növelem a szöveg mennyiségét, a szöveg rányúlik chrome alatt az alatta lévő szövegre, s nem nyúlik az egész. Már sok mindent kipróbáltam rá, de semmi :S Ötletek, tippek?
<div>
<a href="#" title="blablabla" class="image" style="float: left;" >
<span><img src="images/image.jpg" alt="blablablaimage" /></span>
</a>
<p>
Nulla neque fringilla nunc vehicula lacus venenatis gravida in. Vitae libero varius dignissim praesent
condimentum.
</p>
<div class="clear"></div>
</div> div#kontener div {
position: relative;
height: 100%;
min-height: 190px;
width: 660px;
}
huh
Alapvetoen nagyobb kodreszletet es tobb css-t kene latnom.
div#kontener div -> ez <div class="clear"></div> erre is vonatkozni fog...
Alapertelmezett esetben amit leirtal konnyen megvalosithato es mukodik is... Ha megengeded hogy meg adjak egy javaslatot... Ne hasznalj 2011ben clear classt... clearfixet hasznalj ahol tudsz... Ha kered adok sok forrast is errol bar remelhetoleg te is utana tudsz nezni :)
Ne hasznalj 2011ben clear
Creative: Ha van egy konténered, amiben van float elem, akkor a clear: both-ot a konténer után kell tenni.
<float>...</float>
<normál>szöveg</normál>
</konténer>
<clearboth></clearboth>
Szabvany szerint jo helyre
Magyarazat: Ha ertelmezed a clearfixek barmelyiket akkor tudod hogy az after pseudoval mindig a container vegere fogja rakni es nem utana. A tobbi az csak fallback a pseudo elem tamogatasanak hianya miatt.
Talan a legjobb magyarazatok miert elavult technika mar 3-4 eve (vagy tobb):
http://pathfindersoftware.com/2007/09/developers-note-2/
http://www.positioniseverything.net/easyclearing.html
Szabvany szerint jo helyre
Ha már annyira 2011-ben tartasz, akkor igazán megnézhetnéd, hogyan kell linkelni a weblaboron ; )
És ha már annyira ragaszkodsz a szabványhoz, nem értem, mi a bajod <div class="clearboth"> és társaival, hisz a clearfix pont ezt csinálja: a .clearfix:after beszúr egy új elemet az aktuális után (akkor most ez mégsem szabványos?), és annak beállítja a definícióban megadott stílusait. A végeredmény tehát ugyanaz, csak egy csomó extra hack kell a régebbi böngészők miatt. Ráadásul eddig akárhány oldalt néztem meg a clearfixről, egy helyen sem tudták beállítani egy elem magasságát 0-ra. Most akkor előrébb vagyunk?
Tehát szerintem mindegy, hogyan csináljuk, és nem azzal van baj, hogy ajánlasz egy alternatívát, hanem a stílusoddal, ahogy ezt előadod. Így gondolom én.
ui.: tapasztalataim szerint ez a három stílus szükséges ahhoz, hogy egy elem magasságát 0-ra állítsuk a lehető legtöbb böngészőben:
font-size: 0px;
line-height: 0px;
"hisz a clearfix pont ezt
"Ráadásul eddig akárhány oldalt néztem meg a clearfixről, egy helyen sem tudták beállítani egy elem magasságát 0-ra" -> pedig nem okoz nagy fejtorest :)
Az hogy elorebb vagyunk - e? Mert aki elolvassa a cikkeket az tudja a helyes valaszt...
A stilusom? Valaki utalja valaki szereti... Altalaban nincs koztes... Nyers vagyok, de 90%ban nem mondok hulyesegeket... ;)
nezz utana mit csinal
- a böngésző beszúr az adott elem elé vagy mögé egy új node-ot
- alkalmazza rá a :after vagy :before-ben megadott stílusokat
<p> Text </p> p:before { display: block; content: 'Some'; }
...would render in exactly the same way as the following document fragment and style sheet:
<p><span>Some</span> Text </p> span { display: block }
Az egészet a következő kavarja meg:
Ezt nem tudom hol olvasod de
https://developer.mozilla.org/en/CSS/:before
Idezem:
Kovetkeztetes: Az elem a megadott elem elso vagy utolso eleme lesz ami a domban nem jelenik meg. Nem pedig ele vagy moge fogja rakni hanem BELE az elejere / vegere.
Ergo amit elozoleg leirtal az semmin sem valtoztat.
Es hogy ne a levegobe irkaljak gyakorlatba is megmutatom: http://jsfiddle.net/6R3FR/
Hát, ezt rosszul gondoltam (a
A linkelést még egy picit gyakorold : )
pici off
Ez a mondatod asszem a 10%-ban van...
Ez ütött : )
CSS 2 flow control:This