✔ CSS Layout Problem

[Uli_87]

Hi,

Ich habe folgendes Problem: http://www.uliweb.ch/page/

Der Content sollte links neben der Navigation sein und nicht unten... Das ganze sollte centriert sein. Wie mache ich das? Mit position: absolute geht es nicht da es eben zentriert sein muss!

Vielen Dank
Uli

 

[Maik]

Hi,

dem DIV #navi fehlt die erforderliche float:left-Deklaration.

Zudem solltest du den HTML-Code validieren, denn eine ID muss in einem HTML-Dokument eindeutig sein, und darf darin nicht mehrmals vergeben werden. Für solch einen Fall ist die Klasse vorgesehen.

 

[Uli_87]

Hallo,

Vielen Dank.. nun hatt es geklappt... aber jetzt sollte ich das #content und #right so hoch wie die navigation machen...

Gibt es hierzu eine lösung?

Danke
Gruss
Uli

 

[Maik]

Möglicherweise helfen dir da die Faux Columns weiter.

 

[Uli_87]

Hallo,

Danke für die schnelle Antwort. Ich verstehe aber nicht wie das funktioniert. Könntest du es mir erklären?

Vielen Dank
Uli

 

[Maik]

Du erstellst zunächst eine Grafik, die die Hintergrundfarben der einzelnen Spalten enthält, und bindest sie dann als vertikal zu wiederholendes Hintergrundbild in einem übergeordneten Element ein, in deinem Fall im DIV #bottom.

Auf diese Weise besitzen nun die Spalten "optisch" die gleiche Höhe.

 

[Uli_87]

Herzlichen Dank,

Mit IE funktioniert es einwandfrei... aber mit Firefox sieht es aber nicht so gut aus! Kann man etwas machen? Oder nicht?

Uli

 

[Maik]

Die Floatumgebung muss zum Abschluss noch "gecleart" werden - siehe http://positioniseverything.net/easyclearing.html.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<div id="bottom" class="clearfix" align="left">

 

[Uli_87]

Wunderbar, vielen Dank!

Nun klappt es!

Gruss
Uli