css Frage

[Pit]

Hallo,

wie muß ich eine Navigationsleiste per css formatieren, wenn ich möchte, dass diese 100% des Viewport der aktuellen Viewportbreite einnimmt, aber ohne einen eventuell vorhandenen horizontalen Scrollbereich?

Pit

[Gunnar Bittersmann]

@@Pit

100% des Viewport

Relative Längenmaße

LLAP 🖖

[Maetzzen]

Hallo Pit,

hast du vielleicht ein Code Beispiel zu deinem Problem? So wie ich dich verstehe, weißt du in etwa was du machen willst, bekommst aber einen horizontalen Scrollbalken nicht weg?

Gruß Maetzzen

[Pit]

Hallo Maetzzen,

hast du vielleicht ein Code Beispiel zu deinem Problem? So wie ich dich verstehe, weißt du in etwa was du machen willst, bekommst aber einen horizontalen Scrollbalken nicht weg?

Codebeispiel muß ich erst erstellen… Aber Du missverstehst mich, den hozizontalen Scrollbalken will ich durchaus haben. Aber die Navileiste soll quasi fix zu 100%-stehen bleiben.

Pit

[Gunnar Bittersmann]

@@Pit

den hozizontalen Scrollbalken will ich durchaus haben.

Es geht um überbreite Tabellen? Siehe dazu auch diesen Subthread.

Aber die Navileiste soll quasi fix zu 100%-stehen bleiben.

Die dreckige Variante:

position: fixed für die Navigation.

Warum das ziemlich doof ist: absolute Positionierung nimmt das Element aus dem normalen Fluss; nachfolgende Elemente werden so plaziert, als gäbe es die Navigation gar nicht. Damit es nicht zu Überdeckungen kommt, müsstest du den Platz, den die Navigation beansprucht, freihalten. Das Dumme ist nur: Du kannst nicht wissen, wieviel Platz das ist. Das hängt von Faktoren wie tatsächlich verwendete Schriftart und Schriftgröße ab, auf die du keinen Einfluss hast. Nicht machen.

Andere Lösung:

Du teilst den Viewport in Bereiche für Navigation und Hauptinhalt (und evtl. Footer) und sorgst dafür, dass nur der Hauptinhalt scrollt. ☞ Beispiel

LLAP 🖖

[Pit]

Hi Gunnar,

Es geht um überbreite Tabellen? Siehe dazu auch diesen Subthread.

Diesen Subthread sehe ich zwar zum ersten mal, aber Deine Glaskugel hat mal wieder fantastisch funktioniert. Ganz genau, es geht um Tabellen, ggf. überbreit, aber auf jeden Fall nebeneinanderstehend.

Deine Lösung gefällt mir sehr gut, danke hierfür. Kann mann den Inhalt der Vavigation auch rechtsbündig machen? Aber dergestalt rechtsbündig, dass es immer sichtbar rechtsbündig ist?

Vom Tabellenaufbau habe ich mich übrigens an Deinem Tip hierfür orientiert. Und ich würde dann gerne quasi immer eine Woche auf einem Viewport darstellen (1 Woche ist auf Dein Beispiel übertragen 1 Monat, d.h. Du hattest ja einen Monatskalender gemacht, ich habe das in einen Wochenkalender umgearbeitet.) Kriegt man das hin, dass immer 1 Woche je Viewport angezeigt werden kann? (aber was machen dann Mobiltelefon & Co?)

Pit

[Pit]

Kann mann den Inhalt der Vavigation auch rechtsbündig machen? Aber dergestalt rechtsbündig, dass es immer sichtbar rechtsbündig ist?

Ok, das geht mit text-align: right; ganz gut.

[Maetzzen]

Hallo Pit,

ich gehe von folgender Situation aus:

• Breite des Inhalts geht über die des Viewports hinaus
• Es besteht die Möglichkeit horizontal zu scrollen
• Die Navigationsleiste soll genau so breit wie die Breite des Viewports sein
• Die Navigationsleiste soll aber auch immer komplett sichtbar sein, auch wenn gescrollt wird

versuch es mal damit, die Position des <nav> Elements zu fixieren.

nav{
position: fixed;
}

Hier kannst du das mal ansehen, was ich mir gedacht habe.

Ist aber keine so schöne Lösung, da die fixierte Navigationsleiste nicht mehr im Fluss ist, sondern andere Teile überdeckt, was wiederum mit margin o.Ä. "gelöst" oder verschlimmbessert werden kann. Funktionieren tuts aber 😉

Gruß Maetzzen

[Gunnar Bittersmann]

@@Maetzzen

Ist aber keine so schöne Lösung …

Yep.

Funktionieren tuts aber 😉

Nope.

LLAP 🖖

[Pit]

versuch es mal damit, die Position des <nav> Elements zu fixieren.

nav{
position: fixed;
}

Hier kannst du das mal ansehen, was ich mir gedacht habe.

Ist aber keine so schöne Lösung, da die fixierte Navigationsleiste nicht mehr im Fluss ist,

Hi Maetzzen,

danke.

1. Für den Ansatz und

2. für fast denselben Wortlaut zur Lösung wie Gunnar.

Eigentlich hatte ich tatsächlich nach der "fixed-Position-Lösung" gesucht, aber ich glaube, Gunnar hat da noch was G'scheiteres gebastelt.

Pit

[Maetzzen]

Hi Pit,

danke.

gerne!

Gunnar hat da noch was G'scheiteres gebastelt.

Ja, dank dir und Gunnar hab ich auch wieder etwas neues gelernt.

Gruß Maetzzen