✔ 3-Spalten als Mitte?

[allstar05]

Hi,

ich würde gerne 3 Spalten als Mitte einfügen.
http://www.vwtalk.de/test/

Ich habe mal ein Bild abgehängt wie ich das gerne haben möchte.
Wenn ich das selber mache, klappt es nie wie ich das will.

Danke schonmal für die Hilfe

 

[Maik]

Hast du auch mal die Suchfunktion im CSS-Board genutzt?

Das Thema bzgl. eines '3-spaltigen Layouts' wurde hier schon desöfteren behandelt, und so erzielt der Suchbegriff 3-spaltiges Layout aktuell 358 Treffer!

Merke: erst suchen, dann fragen

Okay..., das Grundprinzip für ein dreispaltiges CSS-Layout sieht folgendermassen aus:

div.leftColumn {
float: left;
width: 190px;
margin: 0;
padding: 0;
}

div.rightColumn {
float: right;
width: 190px;
margin: 0;
padding: 0;
}

div.centerColumn {
margin: 0 190px;
padding: 0;
}

div.clear {
clear: left;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
}

<div class="mitte">
          <div class="leftColumn">left</div>
          <div class="rightColumn">right</div>
          <div class="centerColumn">center</div>

          <div class="clear">&nbsp;</div>
</div>

Anmerkung:

Da die Spalten durch einen Rahmen voneinander getrennt werden sollen, und dieser (vermutlich) auf beiden Seiten gleich hoch sein soll, empfiehlt es sich, für das DIV.mitte eine Hintergrundgrafik zu verwenden, die 848*1 Pixel dimensioniert ist und die beiden Spaltenrahmen enthält.

Mit der CSS-Eigenschaft background-repeat:repeat-y wird die Hintergrundgrafik senkrecht wiederholt, und die Spalten sind somit immer gleich hoch, unabhängig vom jeweiligen Spalteninhalt.

div.mitte {
width: 848px;
background: url(bgImage.png) repeat-y;
border: 1px solid #4C6792;
}

 

[allstar05]

Morgen, wofür ist denn das hier gut?

<div class="clear">&nbsp;</div>

 

[Maik]

div.clear {
clear: left;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
}

Mittels der clear-Eigenschaft wird nach den floatenden DIVs im Dokument wieder der normale Textfluss hergestellt, damit nachfolgende Elemente unterhalb der Spalten angeordnet / dargestellt werden.

Die auf null gesetzten Eigenschaften dienen dazu, daß das Element nicht auf das Layout Einfluss nimmt und es ggfs. verschiebt.

Achja, und   erzeugt ein erzwungenes Leerzeichen im DIV-Element.

 

[allstar05]

Ich habe jetzt aus dem clear ein footer gemacht:

http://www.vwtalk.de/test/

Ist das jetzt alles so ok im Quelltext?

Und wieso ist im center text so ein kleiner Abstand zum border ? Links und rechts ist ja keiner.

 

[Maik]

Selbstverständlich kannst du das DIV auch als 'Footer' einsetzen, aber dann bitte auch mit der angesprochenen clear-Eigenschaft und ohne bzw. mit der gewünschten Höhenangabe.

Dann klappt's auch in den modernen Browsern, zu denen der IE nicht zählt.

div.footer {
clear:left;
/*height: 0px;*/ /* auskommentiert = deaktiviert */
margin: 0;
padding: 0;
border-top:1px solid #4C6792;
background-color:#95ADD3;
}

 

[allstar05]

Na dann wieder mal vielen Dank und einen schönen Tag noch

 

[Maik]

Und wieso ist im center text so ein kleiner Abstand zum border ? Links und rechts ist ja keiner.

Das ist ein IE-Bug: der 3px-Abstand bei floatenden Elementen -> IE Three Pixel Gap

Lösung:

div.leftColumn {
float: left;
width: 190px;
margin-right: 0 !important; 
margin-right: -3px; /* Für IE */
padding: 0;
border-right:1px solid #4C6792;
background-color: #FFFFFF
}

div.rightColumn {
float: right;
width: 190px;
margin-left: 0 !important; 
margin-left: -3px; /* Für IE */
padding: 0;
border-left:1px solid #4C6792;
background-color: #FFFFFF
}

div.centerColumn {
margin: 0;
padding: 0;
}

 

[allstar05]

Hmm okay das klappt jetzt, aber habe doch noch ein problem:

http://www.vwtalk.de/test/

Die anderen Spalten ziehen nicht mit runter.

 

[Maik]

Anmerkung:

Da die Spalten durch einen Rahmen voneinander getrennt werden sollen, und dieser (vermutlich) auf beiden Seiten gleich hoch sein soll, empfiehlt es sich, für das DIV.mitte eine Hintergrundgrafik zu verwenden, die 848*1 Pixel dimensioniert ist und die beiden Spaltenrahmen enthält.

Mit der CSS-Eigenschaft background-repeat:repeat-y wird die Hintergrundgrafik senkrecht wiederholt, und die Spalten sind somit immer gleich hoch, unabhängig vom jeweiligen Spalteninhalt.

div.mitte {
width: 848px;
background: url(bgImage.png) repeat-y;
border: 1px solid #4C6792;
}

Wer lesen kann, ist klar im Vorteil