nicht angemeldet
Hallo,
Nicht den Containern, sondern deren Block-Inhalten (
p, …) die Breite und den weißen Hintergrund zu geben hat den Charme, dass die Container bis zum Viewportrand reichen. Aber den Nachteil, dass man nicht für alle Inhalte (ul,ol,table,blockquote,figure, …) gewappnet ist.
Stimmt. Am besten ist es zudem Inhalt und Layout strikt zu trennen, also auch keine unnötigen HTML-Elemente nur für das Layout hinzuzufügen.
Deshalb habe ich jetzt folgende Lösung erdacht, die das alles berücksichtigt:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Trennbalken im Text</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="//html5shim.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: 100%;
}
body {
background: #FF0000;
padding: 0.01rem;
margin: 0;
}
main {
background-color: white;
max-width: 500px;
margin: 0 auto;
}
p {
padding: 0.5rem;
margin-top: 0;
margin-bottom: 0.3rem;
}
p:last-child {
padding-bottom: 0.5rem;
margin-bottom: 0;
}
h2 {
background-color: black;
line-height: 2;
background: #fff;
display: block;
border-top: 1rem solid silver;
border-bottom: 1rem solid silver;
box-shadow: 20rem 0px 0px black, 40rem 0px 0px black, 60rem 0px 0px black, -20rem 0px 0px black, -40rem 0px 0px black, -60rem 0px 0px black;
}
</style>
</head>
<body>
<main>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo liguladio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est.</p>
<h2>Dies ist im Balken</h2>
<p>HIER BEGINNT DER ZWEITE TEIL Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h2>Dies ist im Balken</h2>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</main>
</body>
</html>
Gruss
MrMurphy
Gunnar Bittersmann
robertroth
Tabellenkalk