SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:Container-card-2.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">
    <title>Variable Cards mit Container Queries</title>
    <style> 
.card-container {
    container: card/ inline-size;
}

@container card (width >= 20em) {
  .card-container .card {
	  --color: pink;
    grid-template-columns: 33% 1fr;
    grid-template-areas: "image title"
												 "image content";
		gap: 1em;
    align-items: center;
		background-color: var(--color);			
  }
	
  .card-container .card__title {
    grid-area: title;
  }	
  
  .card-container .card p {
    grid-area: content;
  }
  
  .card-container .card img {
    grid-area: image;		
  }
}

@container (width >= 50em) {
  .card-container .card {
	  --color: skyblue;
    grid-template-columns: 20em 10em 1fr;
    grid-template-areas: "image title content";
  }
}

.card {
    display: grid;	
	border: thin solid;
	font-size: 1rem;
}

.card .card__title {
	text-align:center;
	font-size: 2em;
}

.card .card__content {
	padding: 0.5em;
	hyphens: auto;
}

.card img {
	width: 100%;
	vertical-align: bottom;
}


body {
  display: grid;
  grid-template-columns: 1fr 25em;
  gap: 1em;		
max-width: 70em;	
}
article {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

article .card-container {
  flex: 1 0 30%;
  gap: 1em;
}
article .card {
	min-height: 14em;
}

aside {}

footer {
	overflow: auto; /* overflow is needed */
	resize: horizontal;
	width: 100%;
	margin: 0 auto;
	padding: 1em;
	border: thin solid;
}

h1,
article h2,
footer {grid-column: 1/ -1;}
		</style>
</head>
<body>
<h1>Variable Cards mit Container Queries</h1>

<article> 
<div class="card-container">
  <div class="card">
      <h3 class="card__title">Karte</h3>
      <div class="card__content">
      <p>
        Karten (<em>cards</em>) sind ein Entwurfsmuster um Inhalte zu präsentieren, die aus verschiedenen Elementen bestehen.</p>  
<p>Ihr Aufbau wird in CSS einmal festgelegt und dann mit <em><strong>Container Queries</strong></em> an den verfügbaren Platz im Elternelement angepasst.</p>
      </div>
      <img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Landschaft mit Berg und Kirche als Symbolbild">
  </div>
 </div>
 
<div class="card-container">  
<div id="2" class="card">
	<h3 class="card__title">1995</h3>   
  <div class="card__content"> 
		<p><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Wie_alles_begann_%E2%80%93_Stefan_M%C3%BCnz_erz%C3%A4hlt">Wie alles begann – Stefan Münz erzählt</a></p> 
    <p>In einer Kneipe namens Forum hört Stefan Münz von <b>Word Wibe Web</b> und <b>HTML</b>.</p>
    <p>Da es keine Doku dazu gibt, schreibt er halt eine!</p>
</div>
<img src="https://wiki.selfhtml.org/images/7/7a/Doku-4%281996%29.png" width="50" alt="Screenshot Doku 4.0 (1996)" >
</div>
</div>

<div class="card-container">
<div id="3" class="card">
	<h3 class="card__title">2010- Das Wiki startet</h3>
   <div class="card__content">   
	<p>heute:</p>
	<ul>
      	<li>2877 Seiten</li>
        <li>70.888 Bearbeitungen</li>
        <li>7.49 Revisionen / Seite</li>
        <li> ...</li>
	</ul> 
  </div>
  	<img src="https://wiki.selfhtml.org/images/c/c8/Wiki-2012-Screenshot.png" alt="Screenshot SELF-Wiki 2010" >
</div>
</div>
<div class="card-container">
<div id="4" class="card">
	<h3 class="card__title">Schliersee 1999</h3> 
   <div class="card__content">       
    <p>erstes Treffen am <a href="http://selfspezial.atomic-eggs.com/artik002.html">Schliersee</a> mit 26 Selfern in einem Hotel!</p>
   </div>
   <img src="http://selfspezial.atomic-eggs.com/sss/ximap.jpg" alt="Gruppenbild Schliersee" >
</div>
</div>
<div class="card-container">
	<div id="5" class="card">
		<h3 class="card__title">Japanisch?</h3>     
   <div class="card__content"> 
   <p> 2001 gab es die Doku in Englisch, Französisch, Spanisch und Japanisch!</p>
   </div>
   <img src="https://wiki.selfhtml.org/images/0/07/Doku-japanisch.png" alt="screenshot">
</div>
</div>  
</article>  

<aside class="card-container">
<h2>Aside</h2>
  <div class="card">
      <h3 class="card__title">Überschrift</h3>
   		<div class="card__content"> 
        <p>Dies ist eine Karte mit Überschrift, Beschreibungs&shy;text und Symbolbild.<br>Ihr Aufbau wird in CSS einmal festglegt und dann mit 		
        <em><strong>Container Queries</strong></em> an den Platz im Elternelement angepasst.</p>
      </div>
      <img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Landschaft mit Berg und Kirche als Symbolbild">
  		
   </div>   
</aside>  

<footer class="card-container">
	<div id="12" class="card">
		<h3 class="card__title">2023 Container Queries</h3>     
   <div class="card__content"> 
   <ul>
    	<li>Zurück zum Wiki-Tutorial <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries/Container_Queries">Container Queries</a></li>
        <li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik">SELFHTML:Verein/Chronik</a></li>
        <li>SELF-Blog: <a href="https://blog.selfhtml.org/2020/10/17/quadratisch-praktisch-gut/">Jetzt wird containert!</a></li>
    </ul> </div>
    <img src="https://wiki.selfhtml.org/images/2/22/Container-queries-icon.svg" alt="Container Icon">   
    </div>    

</footer>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Container-card-2.html&oldid=92931“