Beispiel:CSS-Anwendung-4-Kindelemente.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<style>
main {
background:transparent;
}
* {margin: 0; padding: 0;}
ul {
list-style-type: none;
width: 30em;
}
li {
padding: 10px;
overflow: auto;
display: table;
}
li:hover {
background: #F1F3F4;
cursor: pointer;
}
li img {
margin: 0 15px 0 0;
width: 5em;
display: table-cell;
}
li div {
display: table-cell;
}
li h3 {
font: bold 1.2em/1.5 Helvetica, Verdana, sans-serif;
}
li p {
font: 100 0.75em/1.5 Georgia, Times New Roman, serif;
}
</style>
<title>Listen mit CSS gestalten - 3</title>
</head>
<body>
<h1>Beispiel: Listen mit Kindelementen</h1>
<main>
<ul>
<li>
<img src="//wiki.selfhtml.org/images/f/f1/Fr%C3%BChling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
<div>
<h3>Frühling</h3>
<p>Endlich wird es wieder ein bisschen sonniger und wärmer.
Wer jetzt spazieren geht, sieht schon die ersten grünen Knospen sprießen.
</p>
</div>
</li>
<li>
<img src="//wiki.selfhtml.org/images/8/8f/Sommer.png" alt="Sonnenuntergang am Strand, Quelle Wikipedia">
<div>
<h3>Sommer</h3>
<p>Abends bleibt es länger hell und man kann draußen sitzen und die Abkühlung von der Tageshitze genießen.
</p>
</div>
</li>
<li>
<img src="//wiki.selfhtml.org/images/5/59/Herbst.png" alt="Bild eines Ahorns im Herbst, Quelle Wikipedia">
<div>
<h3>Herbst</h3>
<p>Hier kommt noch Text hin. ein ganzer Satz oder vielleicht auch mehr. In die zweite Zeile könnte auch noch etwas.</p>
</div>
</li>
<li>
<img src="//wiki.selfhtml.org/images/a/a7/Winter.png" alt="Schneelandschaft, Quelle Wikipedia">
<div>
<h3>Winter</h3>
<p>Hier kommt noch Text hin. ein ganzer Satz oder vielleicht auch mehr. In die zweite Zeile könnte auch noch etwas.</p>
</div>
</li>
</main>
</body>
</html>