Fixierte Leiste und schmaler Viewport

[Gast]

Hallo,

ich habe dasselbe Problem wie diese Forums-Seite:

Wenn ich den Viewport schmaler mache. bricht meine fixierte Navigationsleiste um und belegt mehrere Zeilen, Sie verdeckt dann den oberen Teil der Seite.

Abhilfe: Nach dem fixierten Bereich kommt noch eine 1:1 Kopie ohne Fixierung, die in derselben Weise Höhe belegt. Funktioniert zwar, scheint mir aber keine "saubere" Lösung zu sein.

Früher hatte ich diese Kopie per Javascript erzeugt, das kann man abschalten.

Gibt es eine HTML oder CSS Lösung für dieses Problem?

Gruß, Gast

[Matthias Apsel]

Om nah hoo pez nyeetz, Gast!

Gibt es eine HTML oder CSS Lösung für dieses Problem?

Löse die Fixierung für entsprechende Viewports. Suchbegriff media-queries.

Matthias

[Gast]

Hallo Matthias,

Löse die Fixierung für entsprechende Viewports. Suchbegriff media-queries.

Das ist keine vernünftige Lösung für das beschriebene Problem. Ich kann nicht wissen, bei wieviel px oder em ein Text auf einem unbekannten Medium umgebrochen wird.

Und falls doch, wie hoch nun ein Zwei-, Drei- oder Vierzeiler wird. Und für n Fälle soll ich je eine CSS-Datei vorhalten? Ist doch nicht dein Ernst.

Ausserdem: Der Server wird nicht darüber informiert, wenn eine Anzeige im völlig neuem Format (A3, A4, hoch, quer) gedruckt wird.

Gast

[Matthias Apsel]

Om nah hoo pez nyeetz, Gast!

Und falls doch, wie hoch nun ein Zwei-, Drei- oder Vierzeiler wird. Und für n Fälle soll ich je eine CSS-Datei vorhalten? Ist doch nicht dein Ernst.

Nein, eine Datei für alle Fälle.

Ausserdem: Der Server wird nicht darüber informiert, wenn eine Anzeige im völlig neuem Format (A3, A4, hoch, quer) gedruckt wird.

Vom Drucken war bisher nie die Rede, aber warum sollte eine Navigation gedruckt werden? Der Server braucht das auch nicht zu wissen: Eine CSS-Ressource für alle Fälle.

Matthias

[Gast]

Vom Drucken war bisher nie die Rede

In deinem Suchbegriff "media-queries" ist davon die Schreibe:

"Medienabfragen bestehen aus einem Medientyp (z.B. Bildschirm oder Drucker), einem Medienmerkmal (z.B. Farbfähigkeit) oder einer Kombination aus beidem. Mithilfe der Kombinationsmöglichkeit können Stylesheets auf eine Vielzahl von Ausgabemedien zugeschnitten werden."

aber warum sollte eine Navigation gedruckt werden?

Naja, um mit der screen-Version übereinzustimmen und auf weitere Kapitel hinzuweisen?

Der Server braucht das auch nicht zu wissen: Eine CSS-Ressource für alle Fälle.

Okay, das ist aber viel Ballast auf der Leitung. Ich weiss, wovon ich schreibe, meine ist gelegentlich gestört und dann kommt das CSS nicht wg. Timeout. Die "vertrauten" Seiten sind kaum zu lesen.

Gast

[Matthias Apsel]

Om nah hoo pez nyeetz, Gast!

"Medienabfragen bestehen aus einem Medientyp (z.B. Bildschirm oder Drucker), einem Medienmerkmal (z.B. Farbfähigkeit) oder einer Kombination aus beidem. Mithilfe der Kombinationsmöglichkeit können Stylesheets auf eine Vielzahl von Ausgabemedien zugeschnitten werden."

Medienmerkmale sind auch Viewportbreiten, -höhen, Pixeldichten, ...

Okay, das ist aber viel Ballast auf der Leitung. Ich weiss, wovon ich schreibe, meine ist gelegentlich gestört und dann kommt das CSS nicht wg. Timeout. Die "vertrauten" Seiten sind kaum zu lesen.

Man soll ja auch nicht alles doppelt schreiben, zudem gibt es die Möglichkeit zu minimieren, d.h. Leerzeichen und Kommentare wegzulassen, das CSS komprimiert auszuliefern. Der Browsercache hilft ebenso.

@media screen and (max-width: 1023px) {  
	body {  
		margin-top: 1em;  
	}  
	#top, #selfforum-hauptseite.framed #top {  
		position: absolute;  
		bottom: auto;  
	}  
}

Das ist das CSS hier um die Fixierung zu lösen. Es werden nur die zu ändernden Eigenschaften notiert. Ob die Query gut gewählt ist, steht auf einem anderen Blatt.

Wenn du deiner Navigation eine (maximale) Breite von x em verpasst, weißt du, dass du da einen Breakpoint setzen solltest.

Matthias

[Gunther]

Om nah hoo pez nyeetz, Gast + Matthias!

Wenn du deiner Navigation eine (maximale) Breite von x em verpasst, weißt du, dass du da einen Breakpoint setzen solltest.

Auch das löst sein "Problem" nicht, bzw. ist keine Antwort auf seine Ausgangsfrage.

Gibt es eine HTML oder CSS Lösung für dieses Problem?

Bei "variabler Höhe" des fixierten Bereichs - Nein.
Und eine "feste Höhe" birgt das Risiko, dass nicht der gesamte Text sichtbar ist, bzw. die Abmessungen gesprengt werden.

Die Variante, die Matthias dir vorgeschlagen hat (Media Queries), ist die einzige Variante, wie es rein mit CSS überhaupt funktionieren kann.

Und zwar definierst du die Schrift- und Elementgrößen jewweils so, dass sie über den gesamten Geltungsbereich deiner jeweiligen @media rule sicherstellen, dass der fixierte Bereich

• einzeilig
• zweizeilig
• x-zeilig
  ist.

Somit hast du die entsprechende Höhe und kannst dein margin- oder padding-top entsprechend setzen.
Um auch noch Unterschiede durch eine ggf. andere Schriftart auszuschließen, kannst du per @font-face auch noch die gewünschte Schriftart mitliefern.

Mit Javascript ist es wiederum ganz einfach ...!

Gruß Gunther

[Gunnar Bittersmann]

@@Gast:

nuqneH

… fixierte Navigationsleiste …

Frage dich zuerst: Muss die Navigationsleiste fixiert sein? Will der Nutzer sie beim Lesen des Seiteninhalts ständig störend im Blickfeld haben? Kommt der Nutzer auf die Seite, um deren Inhalt zu lesen oder um schnell von der Seite wieder wegzukommen?

Wenn die Antwort ja ist, frage dich: Muss die Navigationsleiste *wirklich* fixiert sein? …

Qapla'

[Gunther]

@@Gunnar:

nuqneH

… fixierte Navigationsleiste …

Frage dich zuerst: Muss die Navigationsleiste fixiert sein? Will der Nutzer sie beim Lesen des Seiteninhalts ständig störend im Blickfeld haben? Kommt der Nutzer auf die Seite, um deren Inhalt zu lesen oder um schnell von der Seite wieder wegzukommen?

Wenn die Antwort ja ist, frage dich: Muss die Navigationsleiste *wirklich* fixiert sein? …

Vielleicht weil das seinem "gewohnten" Nutzerverhalten entspricht und er es von nativen Apps so kennt.

Allerdings ist gerade bei solchen Geräten, bzw. den darauf vorhandenen Browsern 'position:fixed' äußerst "problematisch".

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Vielleicht weil das seinem "gewohnten" Nutzerverhalten entspricht und er es von nativen Apps so kennt.

http://forum.de.selfhtml.org/archiv/2012/3/t209631/#m1427056

Allerdings ist gerade bei solchen Geräten, bzw. den darauf vorhandenen Browsern 'position:fixed' äußerst "problematisch".

Kann ich aus jüngster Vergangenheit bestätigen.

Wenn ein Eingabefeld fokussiert wird, ist es mit der fixen Positionierung von anderen Elementen bei manchen mobilen Browsern vorbei.

Qapla'