3-Spalten-Layout mit CSS @ tutorials.de: Tutorials, Forum & Hilfe

Crashburn · 25.04.07 13:23

Hallo zusammen!

Also folgendes Szenario: Ich will ein 3-Spalten-Layout erstellen ohne feste Positionierung (also absolute angaben). Nach einiger Recherche ist mir dann klar geworden, dass dies anscheinend mit den CSS-Anweisungen clear und float zu realisieren ist.

Bis jetzt habe ich folgenden HTML- (eigentlich nicht wirklich nennenswert)

HTML-Code:

<body>
    <div id="colLeft">
         Foo
    </div>
    <div id="colMiddle">
         Bar
    </div>
    <div id="colRight">
         Baz
    </div>
</body>

und diesen CSS-Code.

Code :

div#colLeft{
    float:left;
    width:200px;
    height:200px;
    border:1px solid #000000;
}
div#colMiddle{
    float:right;
    width:200px;
    height:200px;
    border:1px solid #000000;
}
div#colRight{
    
}

Wie man sieht ist es bis jetzt noch nicht viel, aber das liegt hauptsächlich daran, dass ich absolut keinen Schimmer habe, wie ich mit clear und float arbeiten soll. Sicherlich habe ich einiges hin und her versucht, jedoch kam entweder nicht einmal annähernd das heraus, was ich wollte oder eben dass die mittlere Spalte zwar rechts der Linken ist, aber nicht auf gleicher Höhe, sondern darunter.

Etwa so:
http://img133.imageshack.us/img133/5...problemur1.gif

Irgendwie schon peinlich, dass ich schon an der zweiten Spalte scheiterte...

Nun denn, hoffentlich ist jemand so nett mir die Materie etwas näher zu bringen, denn ich würde wirklich sehr sehr ungern auf Tabellen zurückgreifen müssen.

Maik · 25.04.07 13:30

Hi,

versuch es mal auf diese Weise:

Code :

div#colLeft{
    float:left;
    width:200px;
    height:200px;
    border:1px solid #000000;
}
 
div#colMiddle{
    margin: 0 202px;
}
 
div#colRight{
    float:right;
    width:200px;
    height:200px;
    border:1px solid #000000;
}

und notiere die DIVs in dieser Reihenfolge:

Code :

1
2
3

<div id="colLeft">Foo</div>
<div id="colRight">Baz</div>
<div id="colMiddle">Bar</div>

Wenn die mittlere Spalte keine variable Breite besitzen soll, wird der Dreispalter in ein übergeordnetes DIV wrap mit fester Breitenangabe eingebunden:

Code :

1
2
3

div#wrap {
width: 600px;
}

Code :

<div id="wrap">
     <div id="colLeft">Foo</div>
     <div id="colRight">Baz</div>
     <div id="colMiddle">Bar</div>
</div>

Crashburn · 25.04.07 13:35

Vielen Dank, du hast mir wirklich sehr geholfen.

Ich lassen den Thread erstmal noch als nicht erledigt, falls ich noch Probleme habe.

Nachtrag: Schein alles astrein zu funktionieren. Danke nochmals!

Erledigt!

WebGeek · 06.05.07 15:50

Hallo Community,

ich habe das obige Beispiel noch etwas verfeinert und um das ganze auch optisch besser zu sehen, gestrichelte Rahmen in unterschiedlichen Farben den einzelnen Bereichen gegeben...
[mein Augenmerk habe ich auf 2 Eigenschaften gelenkt:
a) die mittlere Spalte sollte beim zusammenschieben des Browserfensters nicht über die linke Spalte geschoben weden können, da ich im body ein Hintergrundbild habe und das Design somit zerstört werden würde!
b) in der mittleren Spalte noch einen zentrierten div-tag zu bekommen]

hat jemand ne Idee, wie man den CSS code soweit optimieren kann, damit die linke und rechte Spalte gleich lange wird wie die mittlere Spalte...
[ich bin viele Stunden an einigen Varianten gesessen - hab's aber dann mangels Zeit mal gelassen... vielleicht hat jemand von Euch ja eine elegante Lösung... ]

ich würde mich über Vorschläge zur Optimierung freuen - DANKE

[ich habe den CSS Code mal in der Source gelassen und vorerst mal nur im IE7 getestet... ]

Code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>3-Spalten-Layout mit CSS</title>
<style type="text/css">
<!--
body { background-color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 15px; color: #FFFFFF; margin: 0px; }
div#ColLeft{ float: left; width: 50px; border: 1px dashed #999999; }
div#ColRight{ float: right; width: 50px; border: 1px dashed #999999; }
div#ColMiddle{ margin: 0 50px; border: 1px dashed #FFFF00; }
div#ContentArea { width: 810px; border: 1px dashed #DDDDDD; }
div#ContentAreaTop { height: 24px; border: 1px dashed #FF00CC; }
div#ContentAreaTopNav { line-height: 20px; border: 2px dashed #009900; }
div#ContentAreaMain { border: 1px dashed #FF0000; }
div#ContentAreaBottom { height: 51px; border: 1px dashed #FF00FF; }
-->
</style>
</head>
<body>
<div id="ColLeft">&nbsp;</div>
<div id="ColRight">&nbsp;</div>
<div id="ColMiddle" align="center">
  <div id="ContentArea">
    <div id="ContentAreaTop">&nbsp;</div>
    <div id="ContentAreaTopNav">&nbsp;</div>
    <div id="ContentAreaMain">&nbsp;</div>
    <div id="ContentAreaBottom">&nbsp;</div>
  </div>
</div>
</body>
</html>

Maik · 06.05.07 15:54

Hi,

Zitat von WebGeek

hat jemand ne Idee, wie man den CSS code soweit optimieren kann, damit die linke und rechte Spalte gleich lange wird wie die mittlere Spalte...

schau dir hierfür mal Stu Nicholls' three columns an.

WebGeek · 06.05.07 16:09

tja, Du wirst es nicht glauben, diesen Code kenne ich schon...
ist eigentlich optimal und ich habe mich auch schon viele Stunden mich damit auseinandergesetzt...

Code :

1	container {position:relative; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a;}

... ersetzt man hier solid durch dashed oder läßt es ganz weg bzw. entfernt auch die Farbe, dann ist die linke oder rechte Spalte auch nicht mehr vorhanden - somit ist dies noch nicht die Lösung

Maik · 06.05.07 16:16

Der linke und rechte durchgezogene Rahmen für das DIV container dient hier auch als Hintergrund für die beiden äußeren Spalten und ist somit ein Bestandteil des Workarounds, um die Spaltenhöhen automatisch anzugleichen.

WebGeek · 06.05.07 16:30

ich weiss, ich weiss...

da ich aber im body ein Hintergrundbild habe, müssen die 3 Spalten transparent sein...

also hat evtl. jemand der Community hierfür eine Lösung?
ich bin schon zu oft über genau die Problematik von div-tags in einer Zeile gestolpert - wäre fein für alle eine Lösung zu posten und den Tabellen good by zu sagen - ich verwende in meinem Code keine Tabellen mehr für's Layout - Tabellen und vor allem verschachtelte Tabellen machen den Code auch sehr unübersichtlich und sind in heutigen WebDesign's verpöhnt!

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

3 Spalten Layout

3-Spalten-Layout unter 2-Spalten-Layout setzen

3-Spalten-Layout / Moz vs. IE

3-Spalten-Layout mit 2-Spalten ContentArea

3 Spalten Layout

E-Mail:

Abonnieren Abbestellen