• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Float hinter einem anderen Float durchlaufen lassen.

myoddo

Mitglied
Wenn ich das nur schon erklärt hätte!
So sollte es einmal aussehen.
layout-muster.jpg

Nun mein Versuch.

HTML:
<div id="wrapper">
               <div id="banner">
               </div>  <!-- Ende banner -->
              <div id="navibereich"
              </div> <!--ende navibereich-->
              <div id="textbereich">
              </div> <!--ende textbereich-->
        </div> <!--ende wrapper-->

Code:
#wrapper        {
                 width:780px;                 /* Breite feld grau */
                 height:auto;
                 margin:10px auto;  
}         
#banner         {
                 width:780px;    /*breite banner*/
                 height:auto;
                 float: left;
                 margin-top:30px;  /*abstand von oben*/  
                 background-color: #003;
                
#navibereich    {
                float:left;        
                background-color:#0C0;
                width:150px;
                     }
 #textbereich         {
                background-color:#FFFFFF ;
                 width:350px;
                 height: auto;
                 margin-left: 250px;

Bei mir bleibt aber der Navibereich unter dem Banner hängen.
Nehme ich das float im Navibereich weg, ist der Textbereich unter dem Navibereich.
Dieser soll aber rechts daneben bleiben.


Ich hoffe ihr spürt wie ich fühle.
Danke
 
Werbung:
Ich würde, wenn es vom Style her geht, den Hintergrund den Du gelb markiert hast in einem umgebenden Element wie z.B. body einkaufen. Die Navigation kannst Du dann wie gewollt floaten.
 
Werbung:
Z-Index wird u. U. von älteren IE Versionen ignoriert.

Was das die Eingangsfrage betrifft:
HTML: Nav -> Text -> Banner
CSS: Nav und Text mit float:left positionieren. Ein clear:left auf das Banner und anschließend mit position:relative/absolute an die gewünschte Position verschieben.
 
Z-Index wird u. U. von älteren IE Versionen ignoriert.

Nein, z-index wird schon von sehr frühen IE-Versionen unterstützt. Allerdings muss man, insbesondere noch bei IE6, darauf achten, dass die positionierten Elemente auf einer Ebene liegen. Verschachtelte Elemente (wie es z.B. bei Tabellen passiert) werden ggfs. ignoriert.

Floate ich die Beide (Navi und Textbereich)
Verschwindet der Wrapper als Hintergrund.

Du musst nach dem floaten auch wieder clearen.
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
CSS - Clearing floats
 
Werbung:
Zurück
Oben