✔ 3 Spalten Layout mit variablen Bereichen

[Gladiator6]

Hallo

Ich versuche im Moment gerade ein eher komplexes Layout mit CSS IE und Firefox konform umzusetzen. Im Moment habe ich 2 Probleme: Ich bekomme die Fusszeile nicht so hin, dass sie in IE und Firefox richtig angezeigt wird. Zudem möchte ich einige Bereiche variabel, was auch noch nicht klappt!

Das ganze sollte so aussehen, wie in der angehängten Grafik!

Hintergedanke des Layouts ist folgender:

Ich habe für die Navigation eine Grafik als Hintergrund, welche fix ist. Da ich möchte, dass auch grössere Inhalte noch im Text Feld platz haben, ich aber dennoch vermeiden will, dass dann jede Seite so hoch ist, möchte ich nach der Navigation einen variablen Bereich einbauen, der sich dann der Grösse des Text Feldes anpasst. Die Fusszeile ist dann wieder fix.

Ich habe versucht, den variablen Bereichen einfach margin-top und margin -bottom zu zu weisen, und dafür keine Höhe zu geben. Das hat aber nicht funktioniert.

Den CSS und HTML Code habe ich in ein zip File gepackt!

 

[Maik]

Ich hänge meinen Lösungsvorschlag als ZIP-Datei an, da in diesem Modell eine Hintergrundgrafik verwendet wird, die die drei Spalten farblich simuliert und im DIV #container vertikal wiederholt wird. So ist gewährleistet, daß die beiden äußeren Spalten #navigation-left-var und #navigation-right-var bei zunehmenden Inhalt in der mittleren Spalte #text "mitwachsen". Die Hintergrundfarben der äußeren Spalten in der Grafik entsprechen denen der variablen Boxen.

 

[Gladiator6]

Vielen Dank! Scheint bis jetzt zu funktionieren!

Allerdings kann ich noch nicht nachvollziehen, wie das mit der Hintergrundgrafik funktioniert! Kannst du mir das noch etwas näher erläutern?

In Firefox gibt es am Schluss zwischen Text und Fusszeile eine ca. 20 pixel Hohe weisse Linie

EDIT:

Ich habe begriffen wie es funktioniert! Gute Idee mit dem Hintergrund, der quasi durch die variablen Boxen durchschimmert! Vielen Dank!!

 

[Maik]

Die Grafik bgImage.png ist 850*1px dimensioniert und besitzt drei Bereiche: die linke Spalte (blauer Hintergrund), die mittlere Spalte (weißer Hintergrund) und die rechte Spalte (orangener Hintergrund).

In dem DIV #container wird sie nun als Hintergrundbild eingebunden nun mittels background-repeat:repeat-y vertikal wiederholt.

Somit sind die drei Spalten immer gleich hoch, unabhängig von ihrem jeweiligen Inhalt.

 

[Maik]

In Firefox gibt es am Schluss zwischen Text und Fusszeile eine ca. 20 pixel Hohe weisse Linie

Erweiter mal das Stylesheet mit folgender Regel, damit sich im Firefox die Lücke zum Footer schliesst:

#text p {
margin: 0;
}

Zudem solltest du noch eine Fehlerkorrektur für den IE vornehmen, um seinen 3px-Bug bei floatenden Boxen zu beheben:

#leftCol {
width: 135px;
float: left;
margin-right: 0 !important;
margin-right: -3px; /* Für IE */
}

#rightCol {
width: 135px;
float: right;
margin-left: 0 !important;
margin-left: -3px; /* Für IE */
}

#text {
background-color: black;
color: white;
margin: 0 135px !important;
margin: 0 132px; /* Für IE */
min-height: 650px;
padding: 0px;
}

 

[Gladiator6]

Habe die 2 Zeilen eingefügt! Danke für den Tip!

Unterdessen ist ein neues Problem aufgetaucht:

Ich habe im #header Text eingefügt, und dann mit einer Klasse relativ positioniert.
Der IE zeigt immer noch alles ok an, der Firefox macht nun jedoch eine ca. 10 px hohe Linie oberhalb des Headers!

 

[Maik]

Wie sieht denn der dazugehörige Quelltext (HTML + CSS) aus?

 

[Gladiator6]

.font_headline {

position: relative;
top: 240px;
left: 50px;
color: white;
font-size: 12pt;
}

<div id="container">
     <div id="header"><h1 class="font_headline">Home</h1></div>
</div>

 

[Maik]

Reden wir jetzt von deiner demo_gladiator6 v2.htm in ihrer Ur-Fassung?

Denn darin ergibt der CSS-Code keinen Sinn, da der Header nur 230 Pixel hoch ist.

 

[Gladiator6]

Ja wir reden von dieser Datei.
Ich habe die Höhe auf 290 px gestellt.

Die Angaben für font_headline können beliebig sein, oberhalb des Headers ist eine ca. 10 px hohe Linie.

Sobald sich im #header etwas anderes als das Hintergrundbild befindet, rutscht das ganze im Firefox 10 Pixel nach unten!