nicht angemeldet
Hallo,
deine Höhenangaben können nicht funktionieren. Du hast vier Container, einer hat 30% Höhe, einer 70%, einer 100px und einer 30px. Mehr als 100% Höhe geht aber nicht. Ansonsten müssen die Browser halt tricksen.
Wovon soll überhaupt die Höhe genommen werden? Und was ist wenn der Text mit den 70% Höhe nicht mehr auskommt?
Ich mache mal folgenden Vorschlag:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Layout 02</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>
/* 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: 120%;
line-height: 1.3;
}
body {
margin: 0;
}
body>* {
padding: 0.5rem;
margin: 0;
}
body>aside {
padding: 0;
}
img {
max-width: 100%;
min-width: 100%;
}
header {
background-color: #285A72;
}
footer {
background-color: #285A72;
}
</style>
</head>
<body>
<header>
<h2>header</h2>
</header>
<aside>
<img src="http://www.bgu-umwelt.de/neu/b-tunnel.jpg" alt="Ich glaub ich bin im Wald">
</aside>
<main>
<h1>main</h1>
<p>amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</p>
</main>
<footer>
<h2>footer</h2>
</footer>
</body>
</html>
Schreib' bitte, wenn dich daran etwas stört bzw. was du anders gelöst haben möchtest.
Irgendwie habe ich das Gefühl, das wir noch nicht verstanden haben, was du überhaupt erreichen willst.
Gruss
MrMurphy
Gruss
MrMurphy
Gunnar Bittersmann
TS
MudGuard
Tabellenkalk
Matthias Apsel