nicht angemeldet
3 Spaltenlayout mit automatischer Größe
Hallo zusammen,
ich bin in CSS-Programmierung noch Anfänger, hab schon ewig jetzt herumgeguckt und ausprobiert und kriege es aber nicht hin. Ich möchte gerne ein 3-Spaltenlayout für eine Homepage entwerfen, bei dem die beiden "Außenspalten" automatisch mit der Höhe des Contents in der Mitte übereinstimmen. Der Spalte in der Mitte soll ebenfalls automatisch die Höhe einnehmen, die gebraucht wird, ohne dass ich eine feste Größenangabe mache. Zudem soll alles auf eine Breite von 100% entworfen werden, feste Pixelangaben möchte ich nicht machen.
Weiterhin soll in allen Spalten jeweils unten noch etwas untenbündig stehen.
Mein Ansatz ist bisher dieser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#container {
position:absolute;
top:0%;
left:0%;
width:100%;
min-height:auto;
color: black;
}
#linkeleiste {
position:absolute;
float:left;
top:0%;
left:0%;
width:14%;
min-height:100%;
background-color:#19194B;
color: white;
padding-top:8px;
}
#linkeleisteunten {
position:absolute;
bottom: 5px;
color: white;
}
#rechteleisteunten {
position:absolute;
bottom: 5px;
color: white;
}
#rechteleiste {
position:absolute;
float:right;
top:0%;
left:86%;
width:14%;
min-height:100%;
background-color:#19194B;
color: white;
padding-top:8px;
}
#mittlererbereich {
position:absolute;
float:left;
top:0%;
left:14%;
width:72%;
min-height:100%;
background-color:#ffffff;
color: black;
padding-top:8px;
}
#mittlererbereichunten {
position:absolute;
bottom:5px;
width: 10%;
left:45%;
}
</style>
</head>
<body bgcolor="#dddddd">
<div id="container">
<div id="linkeleiste">links<br>links<br>links<br><div id="linkeleisteunten">linksunten<br></div></div>
<div id="mittlererbereich">
Content<br>Content<br>Content<br>Content<br>
<div id="mittlererbereichunten">mitteunten<br></div>
</div>
<div id="rechteleiste">rechts<br><div id="linkeleisteunten">rechtsunten<br></div>
</div>
</body>
html>
Nun habe ich einige Baustellen:
-
Die Außenspalten sind nicht entsprechend der Größe der Mittelspalte mit dem Content.
-
"linksunten" und "rechtsunten" stehen falsch
-
Das "mitteunten" steht nicht unterhalb des Contents.
Wie muss ich das Ganze programmieren, um meine Ziele zu erreichen?
Vielen Danke schon im voraus, ich hoffe Ihr könnt mir helfen,
Zaiman
-
Moin,
dein Ansatz zeigt schon mal dass du auf dem richtigen Weg bist ;-)
- Die Außenspalten sind nicht entsprechend der Größe der Mittelspalte mit dem Content.
Dieses Problem kenne ich nur allzu gut... Folgende Lösung habe ich kürzlich verwendet:
Die mittlere Spalte wird per border so zurecht gestutzt, dass rechts und links genügend Platz für beiden anderen Spalten bleibt. Die borders rechts und links bekommen die gleiche Hintergrundfarbe wie die rechts und linke Spalte.
Die rechte und linke Spalte sind absolut positioniert. Dazu ist es notwendig, dass
- Ein eventueller Header eine bekannte Höhe hat (mir fällt gerade auf das man
das eventuell umgehen kann indem man die drei Spalten in ein <div> packt.
Sollte man aber nur tun, wenn es semantisch sinnvoll ist... - Die linke und rechts Spalte eine bekannte Breite haben.
- Eventuell muss das Element, in dem sich die drei Spalten befinden noch
position:relative erhalten, damit sich position:absolute darauf bezieht.
Das ganze kann in bestimmten Fällen aber auch zu Problemen führen: Wenn die mittlere Spalte kürzer ist als die äußeren Spalten. Dann kann es zu seltsamen Ergebnissen führen. Das ganze lässt sich aber durch eine Angabe von min-height möglicherweise umgehen (Für den IE6 leider nicht).
Gruß
Stareagle
-
Moin,
danke für Antwort,
leider hilft es mir so nur wenig, da ich nicht genau verstehe, wie es gemeint ist.
Kannst Du den entsprechenden Code (vielleicht angewandt auf meinen Code) hier mal posten?
Gruß
Zaiman
-
Hallo nochmal,
Kannst Du den entsprechenden Code (vielleicht angewandt auf meinen Code) hier mal posten?
Das kann ich gern tun. Hilfreich für mich wäre noch eine Skizze, da ich aus dem Test nicht ganz verstanden habe, wo du die beiden anderen Divs in haben willst.
Gruß
Stareagle
-
Hallo, schematisch so:
--------------------------------------------------------------
| links | Content | rechts |
| links | Content | rechts |
| links | | |
| | | |
| | | |
| linksunten | mitteunten | rechtsunten|
--------------------------------------------------------------Dabei soll linksunten, mitteunten, rechtsunten jeweils bottom: 5 px haben, also mit dem Content (der ja eine variable Höhe haben kann) nach unten rutschen.
Zaiman
-
Hallo, schematisch so:
| links | Content | rechts |
| links | Content | rechts |
| links | | |
| | | |
| | | |
| linksunten | mitteunten | rechtsunten|Dabei soll linksunten, mitteunten, rechtsunten jeweils bottom: 5 px haben, also mit dem Content (der ja eine variable Höhe haben kann) nach unten rutschen.
Sollen linksunten, mitteunten und rechtsunten sich am unteren Rand des Browsersfensters, wenn der Content/die Spalten nicht lang genau sind?
Gehören links und linksunten semantisch zusammen, sprich rechtfertig der *Inhalt* eine Gruppierung (entsprechend für linksunten).
Die unteren Elemente sollen sich - so entnehme ich dass aus deiner Skizze - sich auf gleicher Höhe befinden?
Gruß
Stareagle
P.S. Sorry für die vielen Nachfragen, aber wenn man die Informationen hat, ist es einfacher dir eine wirklich zutreffende und hilfreiche Antwort geben.
-
Sollen linksunten, mitteunten und rechtsunten sich am unteren Rand des Browsersfensters, wenn der Content/die Spalten nicht lang genau sind?
Sie sollen am unteren Ende der jeweiligen Spalten sein, mit einem Abstand von 5 px zum unteren Ende der Spalte.
Gehören links und linksunten semantisch zusammen, sprich rechtfertig der *Inhalt* eine Gruppierung (entsprechend für linksunten).
Sie gehören nicht zusammen, der Inhalt hat nichts miteinander zu tun.
Die unteren Elemente sollen sich - so entnehme ich dass aus deiner Skizze - sich auf gleicher Höhe befinden?
Auf gleicher Höhe, mit einem wählbaren Abstand nach unten.
Vielen Danke für Deine Hilfe,
die Fragen stören mich nicht.
Zaiman
-
Hallo nochmals,
hier mal mein Versuch, das ganze umzusetzen. Auf die Schnelle hab ich es leider nicht IE kompatibel hin bekommen. Ein wenig Spielerei mit margin und padding dürfte dort noch notwendig sein, eventuell mit Extra-Stylesheet für die IE. Mindestens für den IE6 wirst du ein extra CSS brauchen, in dem du einige Angaben für padding und margin überschreibst.
Das ganze liegt für dich (und alle anderen Interessierten) hier bereit:
http://www.jp-digital.de/shared/selfhtml/
CSS:
http://www.jp-digital.de/shared/selfhtml/dreiSpaltenAbschluss.cssDas ganze ist nur eine *Grundlage* noch nichts fertiges.
Gruß
Stareagle
-
Guten Morgen,
danke für diese sauber programmierte Lösung! Hast mir echt weitergeholfen!
Gruß
Zaiman
-
Hallo,
warum ewig selber herumprobieren, wenn es das doch alles schon gibt?
Grüße, luti
-
-
-
-
-
-
-
-
Hallo zusammen,
ich bin in CSS-Programmierung noch Anfänger, hab schon ewig jetzt herumgeguckt und ausprobiert und kriege es aber nicht hin. Ich möchte gerne ein 3-Spaltenlayout für eine Homepage entwerfen, bei dem die beiden "Außenspalten" automatisch mit der Höhe des Contents in der Mitte übereinstimmen. Der Spalte in der Mitte soll ebenfalls automatisch die Höhe einnehmen, die gebraucht wird, ohne dass ich eine feste Größenangabe mache. Zudem soll alles auf eine Breite von 100% entworfen werden, feste Pixelangaben möchte ich nicht machen.
Weiterhin soll in allen Spalten jeweils unten noch etwas untenbündig stehen.
Hi Zaiman,
kannst ja auch mal das probieren:
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Ist einfach und schlank.