Rigel-Computer


3-Spalten-Menu mit "float" - der Durchbruch! 

Wieviele Jahre ich mich schon mit CSS rumschlage, ist nicht zu beziffern. Aber eine Konstante gab es: Spalten haben NIE auf Anhieb so ausgesehen wie gewünscht. Sieht man von einem 2-Spalten-Layout einmal ab.

Endlich habe ich die Lösung gefunden. Wahrscheinlich konnten die meisten Betroffenen das mit Copy/Paste irgendwo aus dem Netz umgehen. Ich mag es jedoch, zu VERSTEHEN, was ich da mache - und was es bewirkt.
Schon allein, um es beim nächsten Mal reproduzieren zu können.

Das war bei Spalten und CSS seltenst der Fall.

Bis heute.

Der "Denkfehler"

Ist man im Lateinisch geprägten Sprachraum geboren, ist es üblich, von links-nach-rechts zu schreiben. Was auch sonst!

Das überträgt sich automatisch auf das Coden:

1. Spalte links - dann kommt die 2. Spalte - dann die äußere, 3.; von links-nach-rechts.

So strukturiert man automatisch das CSS. Dumm nur: CSS funktioniert gar nicht von-links-nach-rechts, zumindest nicht im Bereich "float"!

Will man eine Spalte links floaten, die rechts Spalte rechts, muss der

HTML-Code für die rechte Spalte zwingend direkt hinter die erste Deklaration der linken Spalte!!!!

 

    <div id="linkeSpalte">
Inhalt linke Spalte
    </div>

    <div id="rechteSpalte">
Inhalt rechte Spalte
    </div>

    <div id="MittlereSpalte">
Inhalt Mitte
    </div>



    <div id="footer">
      <p>Footer</p>
    </div>

Der - äußerst simple - CSS-Code zur Ergänzung

#linkeSpalte {
   width: 200px;
   float: left;
   height: 100%;
   padding-top: 10px;
}

#MittlereSpalte {
   margin-left: 200px;
   margin-right: 220px;
   padding: 5px;
   padding-top: 0px;
}

#rechteSpalte{
   width: 200px;
   float: right;
   padding: 5px;
}

#footer {
   clear: both;
   background-color: #333;
   color: #fff;
   padding: 10px;
   text-align: center;
}

Besondere Gefahren für das Responsive Design

Noch blödererweise muss man das ganze, hübsche Konstrukt für den Viewport <500px nochmals anpassen, indem man den HTML-Code um zusätzliche IDs erweitert...

Nämlich solche, die nur bei viewport <500px dann angezogen werden, während die PC-Ansicht auf HIDDEN gestellt wird.

Tja. Da das kein Hexenwerk ist, spare ich mir z.Z. die Details - gerne auf Anfrage nachgeliefert.