Frage zu flexibler Breite

muxu

Grünschnabel
Moin,
ich habe eine Seite mit Hauptnavi als Block vertikal links (Breite 250px) und Unternavi als topmenu oben unter dem Header horizontal. (Höhe 30px).
Die Breite der Seite ist dynamisch mit max-width: 1600px und min-width:800px;

Das topmenu soll links gefloatet sein mit einem margin-left von 250px, so dass es sich nicht über die linke Hauptnavi schiebt.

Mein Problem: Wenn das Topmenu viele Punkte aufweist und eine dem entsprechend große Breite hat von meinetwegen 900px, dann möchte ich, dass sich das Topmenu doch links über das linke Menu schiebt und zwar maximal bis auf einen linken margin von null.
Mathematisch ausgedrückt also ungefähr so:
- Wenn Browserfensterbreite größer/gleich ( Topmenubreite + 250px ) -> dann margin-left:250px
- Wenn Browserfensterbreite kleiner ( Topmenubreite + 250px ) -> dann margin-left: 250px minus ((Topmenubreite + 250px) minus Browserfensterbreite)
- Wenn Browserfensterbreite kleiner Topmenubreite, dann margin-left:0

so sieht's aus, wenn der Viewport größer oder gleich der gesamten Breite des linken Menus und des Topmenus ist

<-250px->
- - - - - - - xxxx xxx xxx xxx xxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx

Und so soll es aussehen, wenn das Fenster zusammengeschoben wird:

<-250px->
- - - xxxx xxx xxx xxx xxx

xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx

und so, wenn es noch weiter zusammengeschoben wird:

<-250px->
xxxx xxx xxx xxx xxx

xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx

Hoffe, das ist verständlich und ich hab keinen Murks aufgeschrieben.

Greetz,
Muxu
 
Mathematisch ausgedrückt also ungefähr so:
- Wenn Browserfensterbreite größer/gleich ( Topmenubreite + 250px ) -> dann margin-left:250px
- Wenn Browserfensterbreite kleiner ( Topmenubreite + 250px ) -> dann margin-left: 250px minus ((Topmenubreite + 250px) minus Browserfensterbreite)
- Wenn Browserfensterbreite kleiner Topmenubreite, dann margin-left:0
Dafür wäre Javascript mit bedingten Anweisungen (if/else) vonnöten, denn CSS ist zu so einer Berechnung mit entsprechenden "Weichenstellungen" nicht imstande.
 
Zuletzt bearbeitet:
Die serverseitige Scriptsprache PHP kann keine clientseitigen Scriptaufgaben erledigen.
 
Zuletzt bearbeitet:
Unter Umständen helfen Dir auch Media Queries weiter.
Gibt auch fertige JavaScript Lösungen, die auch ältere Browser einbeziehen.

(Sorry fürs Editing)
 
Zuletzt bearbeitet:
Zurück