Beispiel:CSS-Anwendung-4-Kindelemente.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>