nicht angemeldet
Gunnar Bittersmann@@Shezua
Ich sollte für die Schule eine eigentlich leichte Aufgabe machen
Welche darin besteht, Heffalump, Tieger, Hund und Katze (seit wann gibt’s Hund und Katze im 160-Morgen-Wald?) in einem 2×2-Grid anzuordnen?
Nicht einfacher als das:
🐘 🐅
🐕 🐈
Gerngeschehen.
Aber mal im Spaß, ich zeig dir mal (und du kannst es deiner Lehrerin zeigen), wie man’s richtig macht:
Die HTML-Datei fängt natürlich mit der DOCTYPE-Angabe an und enthält eine Meta-Viewport-Angabe (es soll ja keine blöde Seite sein) und noch einiges mehr.
(Ich hab das gleich mal zum Anlass genommen, diese Seite und auch die Kopfdaten zu ergänzen/berichtigen.)
Sieht dann so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<title>Elefant, Tiger, Hund und Katze | Shezua</title>
<link rel="stylesheet" href="gallery.css">
</head>
<body>
<div class="gallery">
<img src="elefant.jpg" alt="Elefant">
<img src="tiger.jpg" alt="Tiger">
<img src="hund.jpg" alt="Hund">
<img src="katze.jpg" alt="Katze">
</div>
</body>
</html>
That’s it! Mehr sollte im HTML nicht stehen.
Es darf sogar weniger sein; das <div class="gallery"> ist hier nicht nötig. Ich hab das mal eingebaut,
- um die Komponente "gallery" wiederverwenden zu können,
- weil es ja noch mehr Inhalt auf der Seite geben könnte.
Hinzugekommen sind die Alternativtexte (alt-Attribute) bei den Bildern, die bedeutsam sind, wenn ein Bild nicht geladen wird (Netzwerkprobleme, Nutzer hat Laden von Bildern wegen Datenvolumen deaktiviert, …) oder nicht gesehen werden kann (Blinde/Sehschwache, die sich den Seiteninhalt von einem Screenreader vorlesen lassen).
Weggefallen ist der ganze Tabellenkram. Es ist lediglich der Inhalt im HTML; nicht aber dessen Darstellung.
Die Darstellung ist Sache des Stylesheets (CSS), welches mit <link rel="stylesheet" href="gallery.css"> eingebunden wird.
In der Datei gallery.css steht dann sowas wie:
body
{
max-width: 65vh;
margin: auto;
}
Beschränke die Breite des body-Elements (d.h. des Seiteninhalts) und zentriere den Seiteninhalt horizontal (was du mit <center> erreichen wolltest.
.gallery
{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2vmin;
}
Stelle die Bilder in einem Grid mit 2 gleichbreiten Spalten (columns) dar, zwischen denen etwas Abstand (gap) ist.
.gallery img
{
width: 100%;
}
Lass die Bilder so breit wie erforderlich werden.
That’s it!
☞ Zum Ansehen (unter „HTML“ steht bei CodePen nur das, was innerhalb des body ist)
Und wenn du das Fenster zusammenschiebst, siehst du, wie sich die Bilder in ihrer Größe dem verfügbaren Platz anpassen. Responsive design – oder anders gesagt: Webdesign 2018. Passt dann auch auf Handys, Tablets, Kühlschränken, …
Und wenn du dir das in einem Edge < 16 oder einem alten Internet Explorer ansiehst, dann sind die vier Bilder untereinander. Das ist OK so!
(Man könnte das für Edge < 16 und IE auch hinbekommen, aber ich wollte hier ein Grundprinzip des Webdesigns verdeutlichen: progressive enhancement.)
LLAP 🖖
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
marctrix
Rolf B
Matthias Apsel
JürgenB
Tabellenkalk