nicht angemeldet
Hallo,
ich habe mal ein Grundlayout erstellt, wie du es dir wohl vorstellst.
Farben, Schriftgrößen, Abstände, Rahmen u.s.w. können nach angepasst werden, sowas sollte bei der Erstellung des Grundlayouts erst mal außen vor gelassen werden.
Dein HTML-Quelltext war in Ordung, ich habe nur HTML5-Container verwendet, da die auch die Lesbarkeit des Quelltextes erhöhen.
Und nochmal zur Erinnerung: Lass Höhenangaben (height) weg. Das geht schief. In der Breite sollen Webseiten nicht breiter als das Browserfenster werden, in der Höhe sollen sie sich automatisch dem Inhalt anpassen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<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="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.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;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
body>* {
border: 3px solid silver;
}
main {
overflow: hidden;
}
main>* {
border: 3px solid orange;
float: left;
}
nav {
width: 320px;
padding: 0.5rem;
}
article {
width: calc(100% - 320px);
padding: 0.5rem;
}
footer {
padding: 0.5rem;
}
p {
}
}
/* Vorlage zum Kopieren für Media-Query */
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<main>
<nav>
<ul>
<li><a href="#">Allgemein</a></li>
<li><a href="#">Ahnenforschung</a></li>
<li><a href="#">Rezepte</a>
<ul>
<li><a href="#">Abkürzungen</a></li>
<li><a href="#">Beilagen</a></li>
<li><a href="#">Gebäck</a></li>
<li><a href="#">Getränke</a></li>
<li><a href="#">Fleischspeisen</a></li>
<li><a href="#">Mehlspeisen</a></li>
<li><a href="#">Süßspeisen</a></li>
<li><a href="#">Eisrezepte</a></li>
<li><a href="#">Kuchen</a></li>
<li><a href="#">Torten</a></li>
<li><a href="#">Puddings</a></li>
<li><a href="#">Marmeladen</a></li>
<li><a href="#">Weihnachtsbäckereien</a></li>
</ul>
</li>
<li><a href="#">Garten</a>
<ul>
<li><a href="#">Allgemein</a></li>
<li><a href="#">Carnivoren</a></li>
<li><a href="#">Orchideen</a></li>
<li><a href="#">Kakteen</a></li>
<li><a href="#">Teich</a></li>
<li><a href="#">Steingarten</a></li>
<li><a href="#">Gemeüsegarten</a></li>
</ul>
</li>
<li><a href="#">Sprüche</a></li>
<li><a href="#">Witze</a></li>
<li><a href="#">Urheberrecht</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Suchmaschinen</a></li>
<li><a href="#">Foren</a></li>
<li><a href="#">Gästebuch</a></li><br>
<li><a href="#">Zur Sprachenauswahl</a></li>
</ul>
</nav>
<article>
<h2>Herzlich Willkommen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
<h2>Was Sie alles hier finden</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</article>
</main>
<footer>
<p>Impressum</p>
</footer>
</body>
</html>
Gruss
MrMurphy
Gunnar Bittersmann
Matthias Apsel
Auge