Hallo,
du bist noch zu sehr dem dem Papierlayout verhaftet bzw. denkst zu statisch. Die Höhe sollten die Container, zumal in Zeiten von Responsive Design, selbst bestimmen.
Ähnliches gilt für die Breiten, die so flexibel sein sollten, das bei schmaleren Fenstern nicht seitwärts gescrollt werden muss.
Bei aktuellem HTML / CSS sollte zunächst der Inhalt erstellt werden und erst anschließend das Layout hinzugefügt werden. Zumindest sollte Leertext eingefügt werden, der in Größe und Anordnung dem erwarteten entspricht. Also mit Überschriften, Bildern u.s.w.
Zunächst leere Container erstellen und denen eine Zwangsgröße aufzudrücken war im letzten Jahrtausend mal Mode, hat sich aber als Irrweg gezeigt. Die hindern auch am heutzutage erforderlichen flexiblen Denken. Merksatz: Webseiten haben keine Größe.
So sind zum Beispiel das html und der body 100% groß (also bei mir so hoch wie mein Fenster), der Inhalt durch die festen Höhen aber höher als mein Fenster. Wie soll das funktionieren? Du solltest also mal spaßenshalber dem html einen Rand geben und deine Fensterhöhe ändern und dann rauf und runter scrollen.
EIn Beispiel könnte zum Beispiel so aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Layout 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 100%;
line-height: 1.3;
}
body {
padding: 0;
display: flex;
flex-wrap: wrap;
}
body>* {
width: 100%;
padding: 0.5rem;
border: 2px solid silver;
border-radius: 0.5rem;
margin: 0.5rem;
}
body>aside {
flex: 1 20%;
}
body>main {
flex: 5 20%;
}
main>nav {
padding: 0;
display: flex;
justify-content: space-between;
}
main>nav a {
text-align: center;
color: black;
background-color: yellow;
width: 100%;
display: block;
padding: 0.5rem;
/*border: 2px solid orange;*/
border-radius: 0.5rem;
margin-right: 0.5rem;
}
main>nav a:last-child {
margin-right: 0;
}
main>nav a:hover {
color: white;
background-color: green;
}
}
</style>
</head>
<body>
<header>
<h2>Bond, James</h2>
</header>
<aside>
<h2>Sublime</h2>
<nav>
<ul>
<li><a href="#">Volvo</a></li>
<li><a href="#">Jaguar</a></li>
<li><a href="#">VW</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">Maybach</a></li>
<li><a href="#">Mercedes</a></li>
<li><a href="#">Chevy</a></li>
<li><a href="#">Wartburg</a></li>
</ul>
</nav>
</aside>
<main>
<nav>
<a href="#">Kiwi</a>
<a href="#">Banane</a>
<a href="#">Kirsche</a>
<a href="#">Melone</a>
</nav>
<article>
<h1>Pangramm Blind-Text</h1>
<p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim.</p>
<p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung.</p>
<p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim.</p>
<p>Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. Heizölrückstoßabdämpfung. Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux</p>
</article>
</main>
<footer>
<p>Erstellt von MrMurphy</p>
</footer>
</body>
</html>
Alles anzeigen
Gruss
MrMurphy
