marctrix: HTML/CSS: Navigation links

Beitrag lesen

SELF-Forum

HTML/CSS: Navigation links

marctrix Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

Hej Pauli,

ich möchte den Platz meiner HTML Seite optimal nutzen. Links befindet sich eine Navigation, rechts daneben der Inhalt (ähnlich wie vertical_tabs).

Nun möchte ich die linke Spalte mit 250px fest setzen. Der Rest soll die restliche Seite ausfüllen. Geht so etwas wie links-width:250px und rechts-with:derRest.

Das wird aber viel zu eng. Wieso willst du rechts schmaler haben als Links? 250px plus ein paar Abstände dürften knapp 300 Pixel sein. Dann bleiben von den 360 Pixeln, die die meisten Besucher Deiner Webseite haben dürften, nur noch 60 für die Texte übrig.

Davon abgesehn: Mit flexbox oder grid überlässt du diese Rechnung bequem dem Browser. Und wenn du das geschickt formulierst, stellt der Browser auch automatisch eine andere Darstellung (nebeneinander statt untereinander) bereit, sobald genug Platz da ist.

Wenn du möchtest, dass für die Navigation mindestens 250px bereit stehen und für den Hauptteil auch, dann lässt du erneut die Bedürfnisse der Nutzer außen vor. Die interessiert nciht wie viele Pixel Deine Boxen haben, die möchten, dass Boxen ausreichend groß für gut lesbare Texte sind. Du solltest also gar nciht erst in pixeln denken, sondern in Buchstaben. Wie oft soll der Buchstabe "m" beispielsweise in eine Zeile passen?

Daher würde ich empfehlen etwas in dieser Art zu verwenden.

body {
    display: flex;
    flexwrap: wrap;
}
nav {
    flex: 1 2 15em;
}
main {
    flex: 2 1 30em;
}

Vorausgesetzt Dein HTML sieht so aus:

<body>
<nav>…</nav>
<main>…</main>
</body>

Aber das kann ich freilich nicht wissen.

Grundsätzlich solltest du dir angewöhnen, die Sicht des Nutzers einzunehmen.

w3schools ist übrigens nicht der Weisheit letzter Schluss…

Marc

Beitrag melden
–
Informationen zu den Bewertungsregeln