Verschobene Div´s | Jörg Kruses Webmaster-Forum

1 tommik

Hallo,
irgendwie klappt hier alles nicht :-(

Sobald man das Fenster verkleinert, versinkt der Conentbalken im Menü. Außerdem will er irgendwie die Länge nach rechts zum Browser nicht weiter ausbauen. (Sollte den gleichen Abstand zum Rand haben wie das Menü links).
Und im IE sieht´s auch ganz anders aus. Der Contentbalken ist über dem Menü.

Gruß,
Thomas

2 Jörg Kruse

Die Länge von #inhalt beträgt 70% + 120px + 120px;

#inhalt {
float:right;
width: 70%;
margin: 15px 120px;
background-color: #353535;
}

Bei einer Fensterbreite von 800px sind das 800px - für das Menü ist dann kein Platz mehr; wegen dem float:left wird #inhalt von der rechten Seite unter das Menü geschoben. Um solche Effekte zu vermeiden, sollte die Gesamtbreite (width + padding + margin) noch ausreichend Platz lassen für das Menü

3 Rudy

Ich würde das ul#menu absolut positionieren, dem eine fixe Breite geben und dem div#inhalt einen margin-left von der Breite des Menüs+Abstand setzen (ohne float). Der Inhalt ist dann dynamisch breit und das menu fix.

4 tommik

Danke!
Aber irgendwie passt es immer noch nicht so ganz
Jetzt geht es zwar beim verkleinern des Browserfensters, aber das Menü...Naja, du siehst es ja selber.

Gruß,
Thomas

5 Jörg Kruse

Was ist mit dem #links - das ist im HTML-Quelltext gar nicht vorhanden?

6 tommik

Oha ja, habs geändert. Aber geht trotzdem nicht :(

7 Rudy

Ne, #links gibts nicht. Ist anscheinend ein Überbleibsel, dort sollten wohl die Links rein ;)

Ein Vorschlag:

body { background-color: #000; font-family: trebuchet ms, verdana, arial, sans-serif; }
html, body { margin: 0; padding: 0; }
ul#nav { background: #353535; margin: 10px 0 0 10px; padding: 0; position: absolute; top: 30px; left: 30px; width: 200px; }
#inhalt { background-color: #353535; margin: 10px 10px 0 250px; }
#logo { background-color: #cccccc; background-image: url(bilder/hintergrund.gif); height: 30px; margin: 0px 10px 0px 10px; }
#nav a{ background-color: #353535; color: #ffffff; display: block; height: 1.1em; padding: 0.1em 0.6em 0.6em 0em; text-decoration: none; width: 12em; }
#nav a:hover{ background-color: #b4d82e; background-image: url(bilder/hintergrund.gif); color: #1a1a1a; display: block; }

8 tommik

Scheint zu klappen, danke Rudy!

9 tommik

Hallo,
nun gleich zum zweiten Problem: Wieso wird, wenn ich das h1-Tag benutze, #inhalt weiter nach unten verschoben?

//Edit:
Mir ist noch aufgefallen, dass das Menü im Internet Explorer größer ist (Geht man mit der Maus über ein Menüpunkt, so erscheint ein wenig mehr vom Hover-Hintergrund-Bild als erwünscht)

10 Jörg Kruse

Wieso wird, wenn ich das h1-Tag benutze, #inhalt weiter nach unten verschoben?

#inhalt verschiebt sich nicht, aber h1 hat einen Außenabstand, vielleicht meinst du das? Dieen Abstand kannst du mit CSS beseitigen:

h1 {color:#b4d82e;letter-spacing:1px;font-size:1.5em;text-align:center;margin-top:0;}

Mir ist noch aufgefallen, dass das Menü im Internet Explorer größer ist (Geht man mit der Maus über ein Menüpunkt, so erscheint ein wenig mehr vom Hover-Hintergrund-Bild als erwünscht)

Das betrifft wohl nur den IE 6, nicht den IE 7. Das Problem schau ich mir später nochmal genauer an