nicht angemeldet
Feste Menüleite in flexiblem Design
Hallo,
Ich möchte gern am oberen Seitenrand eine feste Menüleiste anzeigen, hinter welcher der übrige Seiteninhalt beim Scrollen verschwindet.
Die Höhe der Menüleiste soll sich an dessen Inhalt orientieren.
Wie mache ich nun dem nachfolgenden DIV klar, dass es erst unterhalb des Menü beginnen soll, ohne feste Werte für Höhe und Position zu verwenden?
body {
margin: 0px;
padding: 0px;
}
#Menue {
margin: 0px;
padding: 10px;
width: 100%;
position: fixed;
opacity: 0.5;
background-color: #cccccc;
}
#Content {
margin: 0px;
padding: 10px;
???
}
<body>
<div id="Menue">
Das Menü...
</div>
<div id="Content">
Der Inhalt...
</div>
</body>
-
Hallo und "Frohes neues Jahr"!
Ich möchte gern am oberen Seitenrand eine feste Menüleiste anzeigen, hinter welcher der übrige Seiteninhalt beim Scrollen verschwindet.
Die Höhe der Menüleiste soll sich an dessen Inhalt orientieren.
Wie mache ich nun dem nachfolgenden DIV klar, dass es erst unterhalb des Menü beginnen soll, ohne feste Werte für Höhe und Position zu verwenden?kurze Antwort: gar nicht!
lange Antwort: Sobald du einem Element per position den Wert absolute oder fixed zuweist, wird das betreffende Element aus dem "normalen Fluß" der Elemente herausgenommen. Somit kann es keine anderen Elemente auf der Seite mehr "beeinflussen", bzw. sich diese an ihm ausrichten.
Hier fehlt in CSS leider eine Möglichkeit, Werte von anderen Elementen als Eigenschaftswert für ein Element anzugeben.
In deinem Fall bräuchtest du so etwas wie (ACHTUNG - Pseudocode!!!):#Content { margin-top: [height#Menue]px; }Aber wie gesagt, bis jetzt gibt es eine solche Möglichkeit nicht.
Hier hilft eigentlich nur eine Javascript-Variante weiter, denn von einem "Würgaround" wie etwa ein zweites DIV-Element mit identischem Inhalt, welches aber im "normalen Fluß" verbleibt, ist dringend abzuraten.Gruß Gunther
-
kurze Antwort: gar nicht!
Hier fehlt in CSS leider eine Möglichkeit, Werte von anderen Elementen als Eigenschaftswert für ein Element anzugeben.Hatte ich schon fast befürchtet... muss ich wohl doch auf feste Werte zurück greifen. :-(
In deinem Fall bräuchtest du so etwas wie (ACHTUNG - Pseudocode!!!):
#Content { margin-top: [height#Menue]px; }So etwas wäre natürlich ideal, warum haben die vom W3C das bloß vergessen? ;-)
Hier hilft eigentlich nur eine Javascript-Variante weiter...
Wie wäre denn hier die Vorgehensweise?
...von einem "Würgaround" wie etwa ein zweites DIV-Element mit identischem Inhalt, welches aber im "normalen Fluß" verbleibt, ist dringend abzuraten.
Warum eigentlich? Wenn man eine solche Kopie zu 100% Transparent macht könnte es doch als Platzhalter fungieren?
-
Hi!
Hier hilft eigentlich nur eine Javascript-Variante weiter...
Wie wäre denn hier die Vorgehensweise?Bspw. wenn das DOM ready ist, die Höhe des Menü-Containers ermitteln und dem Content-Container dann den entsprechenden Abstand verpassen.
BTW: Oben im Viewport fixierte Elemente bereiten aber auch noch zusätzliche Probleme, wie etwa beim Anspringen von Ankern auf der Seite. Molily hat dazu einen zwar etwas älteren (von 2005), aber nach wie vor "aktuellen" Artikel veröffentlicht - lesenswert!
...von einem "Würgaround" wie etwa ein zweites DIV-Element mit identischem Inhalt, welches aber im "normalen Fluß" verbleibt, ist dringend abzuraten.
Warum eigentlich? Wenn man eine solche Kopie zu 100% Transparent macht könnte es doch als Platzhalter fungieren?Nun, oberstes Gebot bei HTML sollte stets die korrekte Semantik sein, sowie die Vermeidung aller "Dinge", die nicht unmittelbar zum eigentlichen Inhalt gehören. Und du kannst/ darfst nicht davon ausgehen, dass in jedem Ausgabemedium auch CSS unterstützt, bzw. "verarbeitet" wird. Solche Clients würden also beide Elemente "ausgeben".
Gruß Gunther
-
-