Beispiel:CSS-mehrspaltige Layouts-4.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>
.media {
  list-style-type: none;
  width: 30em;
}

.media li {
  display: grid;
  grid-template-columns: 7em 1fr;
  grid-template-rows: 2em 3em;
  gap: 1em;
	margin-bottom: 1em;
}

.media li>img {
  grid-row: 1 / 3;
  width: 6em;
}
      
.media h3 {
  font: bold 1.2em/1.5 Helvetica, Verdana, sans-serif;
	margin-top: 0;
}

.media p {
  font: 100 0.75em/1.5 Georgia, Times New Roman, serif;
	margin: 0;
}

li:hover {
  background: #F1F3F4;
  cursor: pointer;
}


  </style>
  <title>Media-Objekt</title>
</head>
<body>
<h1>Media-Objekt im Grid Layout</h1>

<ul class="media">
  <li>
    <img src="https://wiki.selfhtml.org/images/f/f1/Fr%C3%BChling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
    <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>
     <footer>
    optionaler Footer 
     </footer>  
  </li>

  <li>
    <img src="https://wiki.selfhtml.org/images/8/8f/Sommer.png" alt="Sonnenuntergang am Strand, Quelle Wikipedia">
    <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>
  </li>
  
  <li>
    <img src="https://wiki.selfhtml.org/images/5/59/Herbst.png" alt="Bild eines Ahorns im Herbst, Quelle Wikipedia">
    <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>
  </li>

  <li>
    <img src="https://wiki.selfhtml.org/images/a/a7/Winter.png" alt="Schneelandschaft, Quelle Wikipedia">
    <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>
  </li>  
    </ul>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-mehrspaltige_Layouts-4.html&oldid=81559“