Main-Content steht über und schiebt sich unter die Sidebars

Hallo

erst mal, weil es so weh tut: Gewöhne dir ab bei kleineren Viewports die Schrift zu verkleinern. Genau das Gegenteil ist benutzerfreundlich: Grundsätzlich eine größere Schrift wählen und die bei kleinerem Viewport noch zu vergrößern.

Zu deinem Problem:

Laß die unnötigen min-height-Angaben weg und ersetzte die auch nicht durch height-Angaben. Grundsätzlich sollten height und min-height nur dort verwendet werden, wo sie sachlich erforderlich sind und nicht, um planlos Platz zu schaffen.

Die Höhe der einzelnen Container bestimmt sich durch ihren Inhalt. Wenn zum Beispiel header, nav, footer etwas höher dargestellt werden sollen vergrößere zunächst die Schrift. Spendiere dem Inhalt (in diesem Fall also dem p-Element) eine geringe line-height. 1.3 (ohne Einheit) hat sich Bewährt, auch für den Fließtext.

Für noch mehr Höhe kannst du den p-Elementen im header, nav, footer ein oberes und / oder unteres padding auf den Weg geben.

In deinem Beispiel solltest du folgende min-height-Angaben ersatzlos entfernen:

header {
    min-height: 12%;
}
nav {
    min-height: 6%;
}
#content_wrap aside {
    min-height: 10%;
}
footer {
    min-height: 5%;
}

Gruss

MrMurphy

Hallo

Zitat

Dadurch wird mein Problem dann auch gelöst?

Klar, wenn du keine anderen Probleme einbaust. Probier es einfach mal aus. Wenn du Angst vorm Löschen der Einträge hast kannst du sie zunächst ja einfach auskommentieren.

Zitat

Muss nämlich echt sagen, dass ich mich nur schwer davon verabschieden kann und diesen Ansatz irgendwie auch nicht hundertprozentig verstehe/nachvollziehen kann...

Es gibt festgeschriebene Regeln und bewährte, aber nicht festgeschriebene, auch bekannt unter dem Stichwort "Best Practices". Eine dieser Best Practices ist es halt Höhenangaben wo weit wie möglich zu vermeiden. Darum können und sollen sich die Browser selbst kümmern.

Gruss

MrMurphy

Hallo

Zitat

Würde mich freuen, wenn ein paar ihre Meinung dazu abgeben würden.

Vergiß das Video.

Der grundsätzliche Fehler ist die Behauptung das eine bestimmte Textlänge optimal sei.

Richtig ist hingegen, dass die Überschreitung einer maximalen Textlänge es schwierig macht beim Zeilenwechsel den Beginn der nächsten Zeile problemlos zu finden.

Die maximale Textlänge ist aber nicht einfach eine bestimmte Buchstabenanzahl. Solche Aussagen wünschen sich viele Anfänger und sogar fortgeschrittene Webseitenersteller glauben daran. Sogar soweit, das logische Aussagen daran nichts mehr ändern können.

Dabei hängt die maximale Textlänge vom Einzelfall ab. Wie gut ist eine Schrift zu lesen? Arial und Times schneiden dabei eher schlecht ab. Wie gut ausgerichtet ist der Buchstabenabstand? Die Länge der Buchstaben? Der Durchschuss? u.s.w. u.s.w.

Das Problem der Textgröße bei Smartphones und Tablets ist dabei ein ganz anderes, nämlich die Praxis.

Pixel sind bei Smartphones und Tablets 'eh bereits kleiner als bei Desktop-Monitoren.

Und dann kommt hinzu, dass sie in der Regel anders genutzt werden. Bei der Benutzung werden sie häufig vom (beweglichen) Körper gestützt, also in der Hand gehalten oder abends auf dem Sofa mit den Oberschenkeln abgestützt. Sie werden im PKW, Bus oder Zug benutzt mit entsprechenden Stoßbewegungen.

Kurzum: Sie bewegen sich.

Und dann soll eine kleinere Schrift von Vorteil sein? Das entbehrt jeder Logik. Sowas können nur Webseitenersteller behaupten, die Design vor Funktion stellen, denen die Benutzerfreundlichkeit vollkommen egal ist, sofern sie sich nur selbst verwirklichen können.

Erstelle doch einfach mal verschiedene Seiten mit Texten und lasse verschiedene Leute mit verschiedenen Endgeräten in Alltagssituationen beurteilen, welche Texte von Ihnen am angenehmsten zu lesen sind. Ich habe das bereits mehrfach gemacht - mit einen eindeutigen Ergebnis.

Komischerweise meiden die Theoretiker solche Tests wie der Teufel das Weihwasser. Ähnlich wie Verschwörgungstheoretiker Praxistests verabscheuen.

Gruss

MrMurphy