nicht angemeldet
3 spalten + footer
0 0 
Matthias Apsel
3 spalten + footer
Hi,
ich möchte 3 Spalten, 1 Header über alle drei Spalten und ein Footer über alle drei Spalten.
Wie ich das mit den 3 Spalten hinbekomme habe ich schonmal gefragt, allerdings ohne Footer. Und ich denke nicht das mit der Lösung von Gunnar ein Footer möglich ist, da dieser zu weit oben sitzt wenn der Inhaltsbereich zu kurz ist? Zudem möchte ich den Spalten noch eine Hintergrundfarbe geben die so hoch ist wie die Seite (faux columns), das bekomm ich aber auch nicht hin. Der Header ist kein Problem.
Wichtig ist mir dass ich die Reihenfolge im HTML nicht ändern muss:
<body>
<h1>example.com</h1>
<h2>Hauptinhalt</h2>
<p>Lorem ipsum dolor sit amet.</p>
<div id="foo">
<h2>linke Spalte</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="bar">
<h2>rechte Spalte</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<footer>footer</footer>
</body>
Mein derzeitiges CSS:
html
{
position: relative;
}
body
{
border-left: 200px solid green; /* breite der linken Spalte plus etwas Abstand */
border-right: 300px solid lightblue; /* breite der rechten Spalte plus etwas Abstand */
padding:10px;
}
#foo /* linke Spalte */
{
left: 40px;
position: absolute;
top: 10px;
width: 120px;
}
#bar /* rechte Spalte */
{
position: absolute;
right: 40px;
top: 10px;
width: 220px;
}
footer {
position:relative;
background:orange;
}
Und hier zum anschauen bzw. rumspielen.
Ich hab das Ganze dann mal etwas umgebaut:
<body>
<div class="content">inhaltsbereich mitte</div>
<div class="column first">linke spalte<br/><br/>abstand</div>
<div class="column second">rechte spalte</div>
<header>header oben drüber</header>
<footer>footer unten drunter</footer>
</body>
html {
background:grey;
}
body {
max-width:800px;
min-width:600px;
margin:100px auto 0;
position:relative;
padding:0;
}
.column {
float:left;
width:200px;
position:relative;
margin: 0;
padding:10px;
}
.column.second {
float:right;
}
.content {
position:absolute;
left:0;
top:0;
right:0;
border-right:220px solid lightblue;
border-left:220px solid green;
min-height:100%;
background:white;
padding:0 10px;
}
header {
position:absolute;
top:-100px;
height:100px;
left:0;
right:0;
background:orange;
}
footer {
clear:both;
position:relative;
background:black;
color:white;
display:block;
}
Hier gehts wenn die Spalten zu hoch werden und meine Faux-Columns-Zeugs wird auch wie gewünscht angezeigt.
Nur jetzt rutscht der Footer selbstverständlich nicht nach unten wenn der Inhaltsbereich höher wird.
Wichtig ist mir die Reihenfolge des HTML-Codes: Inhalt, erste Spalte, zweite Spalte, (Header), Footer.
Hat jemand eine Idee?
~dave
-
Das Problem hatte ich auch.
Bei mir ging es hiermit; musst du vielleicht noch anpassen.
Vielleicht ist es auch kompletter Unsinn (funktioniert und wird auch validiert, aber das macht es ja nicht unbedingt gut).div#Fusszeile { position: absolute; bottom: 0px; width: 98%; /*vemeidet horizontalen Scrollbalken*/ } div#Fusszeile p { margin: auto auto; text-align: center; }-
Das Problem hatte ich auch.
Bei mir ging es hiermit; musst du vielleicht noch anpassen.
Vielleicht ist es auch kompletter Unsinn (funktioniert und wird auch validiert, aber das macht es ja nicht unbedingt gut).div#Fusszeile {
position: absolute;
bottom: 0px;
width: 98%; /vemeidet horizontalen Scrollbalken/
}
div#Fusszeile p {
margin: auto auto;
text-align: center;
}-- Seems we made our greatest error when we named it at the start for though we called it "Human Nature" - it was Cancer of the heart Öh... vergiss es. Wenn der Text länger wird als die Seite hat man die Fußzeile dann mittendrin. :(
-
-
Om nah hoo pez nyeetz, dave!
Du könntest für deine drei Spalten in ein gruppierendes Element packen, ihnen display: table-cell geben und sie mit absoluter Positionierung verschieben.
Matthias
--
1/z ist kein Blatt Papier.
