Footer nicht an korrekter Stelle

[Rolf B]

Hallo franzsen,

dein main Element hat eine feste Höhe von 60em. Die ist schon von der Navigation ausgefüllt (das div.container Element, das gerne ein nav sein möchte, wie sein großer Bruder in der Hauptnavigation). Das div#mitte Element ist zu breit, um daneben zu passen, deswegen steht es darunter. Die vier anderen Sections stehen ebenfalls darunter.

Das ist aber alles im Überlaufbereich des main Elements, das main-Element selbst ist, wie vorgeschrieben, 60em hoch. Der Footer steht vorschriftsmäßig unter dem main-Element und wird von dem überlaufenden Inhalt von main überlagert.

An der Stelle musst Du Dir gründlich Gedanken über dein Gesamt-Seitenlayout machen. Da kann ich schlecht raten, weil ich nicht weiß, was Du wann wo anzeigen willst. Wo sollen die Zusatzsections angezeigt werden? Unter dem Footer? Anderswo? Sollen sie je nach Menüauswahl sichtbar werden?

Ein Problem ist auch das Hauptmenü, bei schmalen Bildschirmen bricht es um und überlagert den Rest. Unterhalb von 961px Viewportbreite bricht es bei mir um. Das kannst Du verbessern - bis zu einem gewissen Grad –, indem Du das Padding der Menülinks verkleinerst. Etwas knifflig ist der rote Rand der a Elemente, den Du beim :hover blau machst. Wenn Du den über die ganze Breite des Fensters gehen lassen willst, braucht man ein paar Tricks, glaub ich.

Aber trotzdem, da würde ich zuerst ansetzen:

nav#nav1 {
    width: 100%;
    height: 60px;
    display: inline-block;}

ganz weg, unnötig. Ein inline-block Element mit 100% Breite ist im Prinzip ein block-Element, und die Höhe sollte sich automatisch ergeben. Vor allem dann, wenn die li Elemente mangels verfügbarer Breite umbrechen.

nav#nav1 ul: Ertens: #nav1 reicht, denn eine ID darf nur einmal vorkommen. Deswegen ist nav#nav1 unnötig detailliert. Zweitens: inline-block. Ersetze es durch display:flex.

Entscheidungsbedarf: sollen sich die Hauptmenüpunkte – wenn Platz ist – über die ganze Breite verteilen oder linksbündig sein?

nav#nav1 ul li: Mit der Flexbox kann das float:left weg. Wenn die Menüpunkte sich über die Breite verteilen sollen, füge noch flex: 1 0 auto; hinzu. Heißt: Element verbreitert sich nach Bedarf (die 1), verkleinert sich aber nicht unter seine Basisgröße (die 0) und die Basisgröße ist auto - basierend auf dem Menüinhalt. Die jetzige Darstellung kannst Du eh nur für eine Fensterbreite über 40em verwenden (was Du im CSS mit @media (min-width:40em) abfragen kannst) - schau im Selfwiki mal nach Media-Queries.

Die a Elemente in den Menüs können dann auch display:block sein. inline-block verwendet man eigentlich nur, wenn es einen Textfluss gibt, in dem sich ein Blockelement bewegen soll.

Das Designprinzip ist "mobile first", d.h. Du gestaltest dein CSS so, dass es für einen kleinen Viewport passt, und mit @media-Queries aktivierst Du bei genügend breitem Viewport weitere CSS Regeln, die die Seite für "breit" anpassen. Dein Menü könnte dann zu einem Hamburger-Menü werden. Oder Du baust es so, dass es eigentlich in der schwarzen Navi links steht, aber bei breiten Bildschirm per position:absolute da rausgerissen und oben angezeigt wird. Die Kombi von Grid und @media macht interessante Sachen möglich.

Jedenfalls hast Du da einiges vor Dir, viel Glück 😉

Rolf