nicht angemeldet
Liebe alle,
das Layout meiner Seite, für Browser die nicht auf touch-Geräten laufen und eine horizontale Auflösung > 900 Pixel haben, sollte folgendermaßen aussehen:
|----------------navigation--------------------------|
|____________________________________________________|
| | | | | | |
|--pre-content--|-------content-----|--post-content--|
| | s1 | s2 | s3 | sX | |
| | | | | | |
|_______________|____|____|____|____|________________|
Meine Frage lautet, welchen Ansatz würdet ihr für die Realisierung meines Vorhabens in CSS verwenden? Das Problem, bei meinem derzeitigen Ansatz ist, dass die variable Breite vom content-Div nicht berücksichtigt wird (siehe Codesample).
Nur der Vollständigkeit halber, mein Codesample, das nicht so funktioniert, wie ich will, da es die variable Breite des content-Div nicht berücksichtigt:
<html>
<head>
<style>
body{
margin: 0px;
padding: 0px;
}
#navigation {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 67px;
background-color: red;
}
#pre-content{
position: absolute;
left: 0px;
top: 67px;
width: 100%;
bottom: 0px;
background-color: pink;
}
#content {
position: absolute;
top: 67px;
bottom: 0px;
left: 100%;
width: 100%;
background-color: green;
}
#post-content{
position: absolute;
width:100%;
bottom: 0px;
top: 67px;
left: 200%;
background-color: lightblue;
}
.sx{
background-color: orange;
height: 100%;
float: left;
width: 350px;
margin-right: 2em;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
</head>
<body>
<div id="navigation">navigation</div>
<div id="pre-content">pre-content</div>
<div id="content">
<div class="sx">s1</div>
<div class="sx">s2</div>
<div class="sx">s3</div>
<div class="sx">s4</div>
<div class="sx">s5</div>
<div class="sx">s6</div>
</div>
<div id="post-content">post-content</div>
</body>
</html>
Leidensweg und einige Erklärungen:
Es handelt sich um eine horizontal scrollende Seite. Deshalb ist es wichtig, dass navigation-Höhe + content-Höhe = 100% des Browser-Fensters einnehmen. Die Höhe der Navigationsleiste beträgt 67px.
- Die Breite von pre-content und post-content beträgt 100% der Fensterbreite.
- Die Breite von content ist variabel und hängt von dessem Inhalt ab.
- s1, s2, sX sind Spalten, die vertikal gescrollt werden können. Die Anzahl der Spalten ist variabel und somit auch die Breite von content.
CSS Navigationsleiste:
#navigation {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 67px;
background-color: red;
}
Das erste Problem, auf das ich bei der Umsetzung gestoßen bin war, dass pre-content, content und post-content die verbleibende Fensterhöhe ausfüllen. Dafür habe ich einen kleinen Trick angewandt. Ich habe alle diese content-Felder auf position: absolute gesetzt; den Abstand oben auf 67px (top: 67px), was der Höhe der Navigationsleiste entspricht; und den Abstand unten auf 0 (bottom: 0px). Alle content-Fenster erhielten dabei die Breite von 100%.
Mit float, war es mir nicht möglich das selbe Ergebnis zu erzielen, da es bei einer Lösung mit float zu Überlappungen kommt. Die Navigationsleiste überlappt meine Content-Felder. Das führt dazu, dass die vertikalen Scrollbalken von s1, s2, sX überlappt werden. Es ist also wichtig, dass es nicht zu Überlappungen kommt. Eine Korrektur der 67px der Navigationsleiste mit padding kommt auch nicht in Frage, da hier ebenfalls die scrollbalken durch die Navigationsleiste verdeckt werden.
CSS pre-content:
#pre-content{
position: absolute;
left: 0px;
top: 67px;
width: 100%;
bottom: 0px;
background-color: pink;
}
Dadurch, dass ich aber position: absolute verwende ist es mir nicht mehr möglich, die Breite des content-Div variabel zu gestalten.
Ich habe auch schon versucht mit display:table und display: inline-block zu arbeiten, jedoch war keines meiner Ergebnisse zufriedenstellend. Wahrscheinlich deshalb, weil ich da nach mehreren Tagen probieren die Geduld verloren habe :) und so hoffe ich nun hier Hilfe zu finden.
Besten Dank im Voraus.
andres
Matthias Apsel