title image


Smiley Re: Fehler im Firefox aber nicht im IE (CSS)
Das display:block; macht aus Inline-Elementen nun Blockelemente. Sie haben jetzt

zwar die Größe, die Du wolltest, stehen aber wie andere Block-Elemente nun

untereinander.



Um diese trotzdem nebeneinander darzustellen, muss zusätzlich noch eine float-Eigenschaft

hinzugefügt werden.



Je nach dem, wie Du Floaten möchtest, entweder float:left; oder float:right;



float hat aber den Nachteil, dass die gefloateten Elemente aus dem Textfluss

genommen werden, wodurch das übergeordnete Element die gefloateten Elemente nicht

mehr als Inhalt registriert.

Damit der übergeordnete Container weiß, bis wohin er sich ausdehnen muss, muss dem

ersten Element nach dem Floaten ein clear hinzugefügt werden



Je nach dem, wie Du gefloatet hast:



Bei einem float:left; mit clear:left;

bei 2 oder mehreren gefloateten Elementen mit float:left entweder mit clear:left;

oder clear:both;



Bei einem float:right; mit clear:right;

bei 2 oder mehrerern gefloateten Elementen mit float:right; entweder mit clear:right; oder clear:both;



Bei float:left; und float:right; nur mit clear:both;



Sollte kein Element nachfolgen oder kann die Höhe des übergeordneten Container nicht

auf andere Weise festgestellt werden, (zum Beispiel: Höhe der Inhalte ist bekannt),

kann alternativ der übergeordnete Container selbst zum Float-Container werden.



Gefloatete Elemente in einem Float-Container dehnen den Float-Container auf die Höhe

seiner Inhalte.



Hinweis:

Durch float: verlieren alle Block-Elemente ihr spezifisches Block-Element-Verhalten

und fallen bei nicht definierter Breite auf die Breite ihrer Inhalte zusammen.



Da die Inline-Elemente mit einer Breite und display:block; formatiert wurden, dürfte

es diesbezüglich aber keine Probleme geben.



Ein Beispiel:

<div style="background-color: #DFDFFF;">Dieses Div reicht vom linken zum rechten Rand</div>



Vorschau

Dieses Div reicht vom linken zum rechten Rand



Und jetzt das Ganze gefloatet:

<div style="background.color: #DFDFFF; float: left;">Dieses Div ist nur so breit, wie sein Inhalt</div>



Vorschau

Dieses Div ist nur so breit, wie sein Inhalt







Um es dennoch auf die Breite seines übergeordneten Container zu dehnen, ist die Angabe einer spezifischen Breite notwendig.

<div style="background-color: #DFDFFF; float: left; width: 100%;">Diese Div reicht nun wieder vom linken zum rechten Rand</div>



Vorschau:

Diese Div reicht nun wieder vom linken zum rechten Rand







mfg Achim

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: