Zur Navigation

Positionierung

1 tommik

Hallo,
ich habe ein Problem bei der Positionierung von einem Menü.
Hier mal eben der Link zum Quellcode

Das Menü soll ganz links sein, ich weiß nicht wieso es so ziemlich in der Mitte rumschwebt?!

Gruß,
tommik.

13.06.2006 18:10

2 Jörg Kruse

Hallo tommik,

durch das margin und padding von .menu wird der erste Link insgesamt um 120 px nach rechts verschoben. Für den Abstand nach oben könntest du stattdessen den betreffenden Wert auf margin-top begrenzen und den Wert für padding auf 0 setzen:

/* linke Navigation */
.menu {
float:left;
width:142px;
padding:0;
margin-top:120px;
}

Dann befindet sich der erste Link am linken Rand

13.06.2006 21:39

3 tommik

Klappt, danke ;-)

Noch eine Frage... Ich habe noch ein Menü rechts gemacht, wenn ich nun aber das Fenster verkleiner, erscheint das rechte Menü nicht mehr, aber es gibt auch keine Scrollbalken?!

13.06.2006 21:50 | geändert: 14.06.2006 20:56

4 tommik

...noch ein Nachtrag

14.06.2006 20:56

5 Jörg Kruse

Wie sieht denn der Code aus? verwendest du dort irgendwo die Eigenschaft overflow:hidden?

14.06.2006 23:33

6 tommik

http://images.tp-server.de/index2.txt

15.06.2006 00:17

7 Jörg Kruse

Meinst du den Effekt, dass bei einer extremen Verkleinerung des Fensters das rechte Menü nach unten rutscht? Unterhalb von 300px Breite ist halt nicht mehr genug Platz für beide Menüs. Wenn du Menüs und Content in einenf Gesamtcontainer packst und für diesen eine feste Breite definierst, rutscht nichts mehr. Die Breite ist dann allerdings nicht mehr flexibel. Eine Mindestbreite mit der CSS-Eigenschaft min-width versteht der IE leider nicht, aber man könnte mit einem Blind-Gif eine Mindestbreite erzwingen. Alternativ könntest du die Menüs mit position:absolute und entsprechenden Werten für top und left bzw. right anstatt mit float positionieren.

15.06.2006 07:55 | geändert: 15.06.2006 08:03

8 tommik

Ja, den Effekt meine ich.
Ich habe nun einfach einen Gesamtcontainer erstellt, mit der Breite von 100%. So scheint es zumindest zu funktionieren.

Dann habe ich noch eine Frage ... Ich möchte das Design wirklich so anpassen, dass es sich so ziemlich jeder Auflösung anpasst.

Hier ein Bild zum Contentbereich

Wie kann ich diesen am besten umsetzen?

Gruß,
tommik.

15.06.2006 13:11

9 Jörg Kruse

Du meinst, dass sich dieses Hintergrund-Bild mit ausdehnt?

Dazu müsstest du die Grafik zerschneiden, und jeweils einem eigenen Div hinterlegen; diese erhalten eine feste Breite bzw. Höhe, während die Mitte, in der der Content platziert wird, flexibel ist.

15.06.2006 16:04 | geändert: 15.06.2006 16:05

10 tommik

Mit dem zerschneiden - das ist klar. Die Frage ist nur wie. Sollte ich die Grafik in drei Teile unterteilen? Einmal der Header, Puffer und Bottom. Das ich ein Div mache mit dem Header. Dort nehme ich die Anfangsgrafik (die Rundung links), dann einmal den mittleren Teil und einmal die rundung rechts. Genau das gleiche dann unten.
Nur wie mache ich den mittleren Teil?
Und wie kann ich das ganze schreiben?

Gruß,
tommik.

Nachtrag:
<div style="background-image:url(images/content_header_puffer.gif);float:left;padding:0;margin-top:125px;margin-left:15px;width:73%;"><img src="images/content_header_left.gif" style="float:left"><img src="images/content_header_right.gif" style="float:right"></div>
<div style="border-left:solid 1px #999; border-right:solid 1px #999;float:left;padding:0;margin-top:125px;margin-left:15px;width:73%;">Content</div>

ist der mommentane Code.
Und der Bereich zum schreiben ist nicht direkt unter dem "Content-Header"

15.06.2006 16:29 | geändert: 15.06.2006 17:43