nicht angemeldet
Rolf BHallo Eddi,
viel Spaß dabei. Und wenn Du schon dran bist:
- Mach Dir eine logische Gliederung deiner Inhalte
- Versorge diese Gliederung mit Heading-Elementen <h2>, <h3>, <h4> etc, je nach Gliederungstiefe. <h1> ist die Seitenüberschrift, die sollte es genau einmal geben
- Verwende semantische HTML Elemente, die mit HTML 5 eingeführt wurden. <header> und <footer> für Seitenkopf und -fuß, <main> für den Hauptteil. <section> für die Hauptabschnitte deiner Seite, <article> für die einzelnen Artikel. Jede section und jeder article sollten ein Heading-Element bekommen.
- Vermutlich ist es richtig, wenn deine Linkziele aus der .blackbox die h2 Überschriften werden.
- Elemente wie center und font verwendet man heute nicht mehr. Statt dessen gibt man den Bereichen, die man zentrieren oder mit Texteigenschaften versehen möchte, Klassen und setzt die gewünschten Eigenschaften via CSS
- Großbuchstaben macht man auch nicht von Hand. Ein sehbehinderter Nutzer mit Screenreader hört dann nicht "Politikblog", sonder "Peh Oh Ell Ieh Teh Ie Kah" usw. Verwende CSS (Beispiel in meinem Fiddle, siehe unten).
- Dein <center><div class="blackbox">...</div></center> möchte auch semantisch sein und ein <nav> Element werden.
- Statt mit position:fixed kannst Du auch mit Flexbox arbeiten. Grundkonstrukt:
<body>
<nav>
</nav>
<main>
</main>
</body>
Im CSS:
body {
display: flex; flex-direction:column;
margin:0; padding: 0;
height: 100vh;
}
nav {
flex: 0 0 auto;
}
main {
flex: 1 0 1em;
overflow: scroll;
}
Ich habe da mal etwas mit JSFiddle gebastelt. Durch die Flexbox im Navigationsbereich wird ein Umbruch bei schmalen Viewports erreicht.
Guck mal, was Du davon brauchen kannst.
Rolf
--
sumpsi - posui - clusi
sumpsi - posui - clusi
Gunnar Bittersmann
Matthias Apsel