Zur Navigation

Verschobene Div´s

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

22.01.2007 19:05

2 Jörg

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ü

22.01.2007 19:55

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.

22.01.2007 20:00

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

22.01.2007 20:07

5 Jörg

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

22.01.2007 20:51

6 tommik

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

22.01.2007 21:12

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; }

22.01.2007 21:13 | geändert: 22.01.2007 21:15

8 tommik

Scheint zu klappen, danke Rudy!

22.01.2007 22:03

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)

23.01.2007 16:37 | geändert: 23.01.2007 16:40

10 Jörg

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

23.01.2007 17:05 | geändert: 23.01.2007 17:05