DIV überlapungen

[bleicher]

Шалом, друзи!

diese Frage wurde hier sicher shcon zig Mal beantwortet, aber ich vermute, dass es mir an Transferdenken mangelt.

Die frage:

Ich habe einen DIV mit Text.
Es wird ein DIV mit einem Bild in ihn "verschachtelt".
Die Höhe des Inneren DIVs ist größer als die des Äußeren.
Frage - wie erreiche ich , dass der InnereDIV den Äußeren die Höhe "zieht" und nicht einfach "raushägt" und Elemente drunter überlappt?

DiV

MFG
bleicher

[D.R.]

Hallo,

Ich habe einen DIV mit Text.
Es wird ein DIV mit einem Bild in ihn "verschachtelt".
Die Höhe des Inneren DIVs ist größer als die des Äußeren.
Frage - wie erreiche ich , dass der InnereDIV den Äußeren die Höhe "zieht" und nicht einfach "raushägt" und Elemente drunter überlappt?

Indem du ihm entweder keine, oder nur eine Mindesthöhe gibst.

mfg. Daniel

[bleicher]

Indem du ihm entweder keine, oder nur eine Mindesthöhe gibst.

keiner von beiden hat eine Höhenagabe.
MFG
bleicher

[D.R.]

Hallo,

Indem du ihm entweder keine, oder nur eine Mindesthöhe gibst.
keiner von beiden hat eine Höhenagabe.

Dann kommt der Effekt auch, wenn du CSS abschaltest?

Du meintest doch etwas in der Form…:

  
  
<div>  
 Text  
  <div>  
   <img />  
  </div>  
</div>  

…oder?
Normalerweise passen sich die <div>'s da dem Inhalt an.

mfg. Daniel

[bleicher]

<div>
Text
  <div>
   <img />
  </div>
</div>
[/code]
…oder?
Normalerweise passen sich die <div>'s da dem Inhalt an.

DOCH eigentlich in dieser Form.
ich habe eine "Demoversion" hochgeladen.
(tut mir leid, aber der Werbung-freie Host ist down ;(
http://koro.nm.ru/test.html
MFG
bleicher

[D.R.]

Hallo,

<div>
Text
  <div>
   <img />
  </div>
</div>
[/code]
…oder?
Normalerweise passen sich die <div>'s da dem Inhalt an.

DOCH eigentlich in dieser Form.
ich habe eine "Demoversion" hochgeladen.
(tut mir leid, aber der Werbung-freie Host ist down ;(
http://koro.nm.ru/test.html

Ah, jetzt versteh' ich das. Dein Problem ist, dass du ein Element floatest und nicht mehr clear-st.

Hierfür gibt es 2 Lösungen:

1. only with CSS:

  
#DeinaeusseresDiv:after  
 {content:"";  
 display:block;  
 clear:both;}  

2. IE6-kompatibel, aber mit zus. HTML:

  
<div>  
 Text  
  <div>  
   <img />  
  </div>  
 <div style="clear:both;"></div>  
</div>  

mfg. Daniel

[jeanlucpicard2]

Hi!

Hierfür gibt es 2 Lösungen:

1. only with CSS:

2. IE6-kompatibel, aber mit zus. HTML:

3. only with CSS:

  
#DeinaeusseresDiv  
{  
  […]  
  overflow:hidden;  
}  
  
/* für den IE<7 */  
* html #DeinaeusseresDiv  
{  
  height:1%;  
}  

[bleicher]

3. only with CSS:

#DeinaeusseresDiv
{
  […]
  overflow:hidden;
}

/* für den IE<7 */

• html #DeinaeusseresDiv
  {
    height:1%;
  }

  
falls ich die IE Lösunfg UND overflow:hidden kombiniere sieht das in IE ziemlich übel aus - die DIVS sind nur noch "halbe zeile" hoch.  
  
MFG  
bleicher

-- 
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_-  
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).

[jeanlucpicard2]

Hi!

falls ich die IE Lösunfg UND overflow:hidden kombiniere sieht das in IE ziemlich übel aus - die DIVS sind nur noch "halbe zeile" hoch.

Ja, sorry, mein Fehler. Hab noch was dazu geschrieben.

[bleicher]

Danke,
P.S: Verflucht sei "hasLayout" Konzept!
MFG
bleicher

[D.R.]

Hallo,

falls ich die IE Lösunfg UND overflow:hidden kombiniere sieht das in IE ziemlich übel aus - die DIVS sind nur noch "halbe zeile" hoch.

hehe, tja genau.
Du könntest es aber so schreiben:

  
html>body #DeinaeusseresDiv  
{  
  overflow:hidden;  
}  
  
/* für den IE<7 */  
* html #DeinaeusseresDiv  
{  
  height:1%;  
}  

Das müsste klappen…

mfg. Daniel

[jeanlucpicard2]

Hi nochmals!

Falls du "overflow:hidden;" dem IE<7 nicht vorenthälst, ist "height:1%" natürlich denkbar schlecht geeignet, um dem Element "Layout zu geben".
Es wäre hier auch eine beliebige andere Eigenschaft möglich, die den IE dazu veranlasst zu glauben, das Element "habe Layout", wie beispielsweise "zoom:1;".

[bleicher]

2. IE6-kompatibel, aber mit zus. HTML:

<div>
Text
  <div>
   <img />
  </div>
<div style="clear:both;"></div>
</div>

> mfg. Daniel  
  
Ja das funktioniert,Danke!  
  
:) wennauch der arme Server eine Schleife mehr zu verarbeiten hat ;P  
  
MFG  
bleicher

-- 
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_-  
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).