• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hilfe bei 3 Spalten Layout

B

bigfailor

Neues Mitglied
Hallo,

ich hänge schon seit gewiss 5 Stunden an folgendem Problem. Vorweg: Ich habe mir schon einige Beiträge durchgelesen und gegoogelt wie ein weltmeister. Leider ohne erfolg. Ich hoffe Ihr könnt mir helfen.

Ich möchte ein drei Spalten Layout erstellen, wobei die beiden äußeren Spalten keinen Inhalt besitzen, sondern nur als Schattenrand dienen. In der mittleren Spalte soll der Inhalt erscheinen. Das ganze soll eine Höhe von 100% haben. Nun habe ich das Problem, dass die Schattenspalten nicht angezeigt werden. Hat jemand eine Idee?

Hier mein HTML Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>

<body>
<div id="page">
<div id="shadow-page-left"></div>
<div id="shadow-page-right"></div>
<div id="content">

Inhalt

</div>

<div id="clear"></div>
</div>

</body>
</html>

und der css code:

html {
height: 100%;
}

body {
background-image:url('images/background.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
margin: 0px;
text-align:center;
height: 100%;
}

#page {
margin:0px auto;
width: 820px;
min-height: 100%;
height: auto !important;
height: 100%;
}

#shadow-page-left {
float: left;
width: 10px;
margin: 0px;
height: 100%;
background-image:url('images/shadow-left.png');
background-repeat: repeat-y;
}

#shadow-page-right {
float: right;
width: 10px;
margin: 0px;
height: 100%;
background-image:url('images/shadow-right.png');
background-repeat: repeat-y;
}

#content {
min-height: 100%;
height: 100%;
margin: 0px auto;
width: 700px;
background-color: #ffffff;
text-align: left;
padding: 25px 50px;
}

#clear {
clear: both;
}
 
Lass mal das "margin: 0px auto;" beim #content weg.
Zum Vergrößern anklicken....
das hat leider gar nichts gebracht. das sagt dem content doch auch nur das er in er mitte des #page divs sein soll. seltsamer weiße funktioniert das ganze mit festen höhenangaben, sprich bspw. 1000px. dann wird halt genau 1000px schatten angezeigt. aber das kann ich nicht gebrauchen. ich benötige eine höhe von 100%.
 
Entferne min-height auf #page und setze height dort auf 100%. Klappt in meinem Firebug problemlos.
 
wenn ich min-height und height: auto !important; entferne dann wird zwar der schatten angezeigt, jedoch nur für genau eine seitenhöhe, wenn der inhalt größer ist und man runter scrollt, hört der schatten quasi auf halber strecke auf, ebenso der hintergrund von #page.
 
Mmh, merkwürdig. Gib der linken und rechten Spalte mal noch einen Inhalte, also nur ein geschütztes Leerzeichen und probiere nochmal die height-Werte zu variieren. Theoretisch ist es korrekt, wenn alle height-Werte auf dem Web im DOM von html zu den Spalten 100% betragen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben