Probleme mit CSS-Layout

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

bisher habe ich das Layout meiner Homepage mit Tabellen realisiert, doch aufgrund einiger neu aufgetretenen Probleme habe ich mich doch mal wieder an die Verwirklichung mit CSS herangewagt.

Mit Hilfe von einigen netten Personen ist nun folgendes rausgekommen:
http://www.christianmeesters.de/test/index.htm

Meine Frage ist nun, wie ich den div-Container (id=„content“) so hinbekomme, dass er das ganze Fenster ausfüllt, ohne rechts über den Rand hinauszuragen. Wichtig ist das für die Horizontallinien, da diese im Moment teilweise zu kurz sind und nicht schön aussehen.

Den originalen Quelltext und die Grafiken gibts übrigens als Zip-Archiv:
http://www.christianmeesters.de/test/test.zip

Wer Lust hat darf mir natürlich auch Tipps zur Abarbeitung der To-do-Liste gebem *g*.

Viele Grüße und danke schon mal
Christian

#2

Hi Christian,

Meine Frage ist nun, wie ich den div-Container (id=„content“)
so hinbekomme, dass er das ganze Fenster ausfüllt, ohne rechts
über den Rand hinauszuragen. Wichtig ist das für die
Horizontallinien, da diese im Moment teilweise zu kurz sind
und nicht schön aussehen.

Hier ist für meinen Geschmack zuviel absolut positioniert worden, deshalb tritt auch der von dir beschriebene Effekt auf. Ersetze folgende Blöcke im CSS durch diese:

div#menu {
 float:left;
 margin-top:-8px;
 background-color:#BFC7E4;
 color:#101010;
 text-align:right;
 width:150px;
 z-index:0;
}
div#content {
 margin-left:158px;
 padding:0;
}

weiters solltest Du bei body{} die font-size korrigieren, denn der IE verträgt 0.9em nicht so:

body{ 
 (..) 
 font-size:14px;
}

Zusätzlich wäre nun eine neue Klasse empfehlenswert:

.cl {
 clear:left;
}

und dann im HTML ganz unten in der Zeile vor

#3

Danke, aber…
Hallo Rudy!

Hier ist für meinen Geschmack zuviel absolut positioniert
worden, deshalb tritt auch der von dir beschriebene Effekt
auf.

Geschmäcker sind nun mal verschieden :smile:.

Ersetze folgende Blöcke im CSS durch diese:

div#menu {
float:left;
margin-top:-8px;
background-color:#BFC7E4;
color:#101010;
text-align:right;
width:150px;
z-index:0;
}
div#content {
margin-left:158px;
padding:0;
}

Du hast Recht, es funktioniert so, aber der IE kommt mit dem float nicht ganz klar, jedenfalls ist alles im content-Bereich unterhalb des Menüs leicht nach links verschoben.

weiters solltest Du bei body{} die font-size korrigieren, denn
der IE verträgt 0.9em nicht so:

body{
(…)
font-size:14px;
}

Bei mir verträgt der IE das aber.

Zusätzlich wäre nun eine neue Klasse empfehlenswert:

.cl {
clear:left;
}

und dann im HTML ganz unten in der Zeile vor