Komplexes Konstrukt vereinfachen

[Jenny]

Moin,

das fürchterliche Konstrukt soll ich vereinfachen, aber wie am einfachsten?

Gruß Jenny

[Rolf B]

Hallo Jenny,

• definiere fürchterlich
• definiere die Semantik der Seite, davon hängt vieles ab.

Bisher ist das eine Tabelle mit 2 Spalten und die Spalten enthalten je ein Bild mit data-URL als Quelle.

Hauptfrage wäre: Was ist der Zweck der Tabelle? Kommen da tabellarische Daten 'rein? D.h.: muss das eine Tabelle bleiben oder kann es etwas anderes sein? Bei echt tabellarischen Daten wäre es sinnvoll, einen thead-Bereich mit th Elementen als Spaltenüberschriften vorzusehen.

Zweite Frage: Was ist mit den Bildern?

• Ist es der Demo geschuldet oder ist es auch später so, dass die Bilder in den beiden Spalten identisch sind?

• Sind die Bilder auch in der realen Seite Flaggen oder ist das nur die Demo? Wenn real: Welchen Zweck erfüllen die Flaggen? Sprachauswahl oder Sprachbezeichnung? Das wäre dann falsch, Flaggen symbolisieren Staaten, keine Sprachen.

• Haben die Bilder inhaltliche Bedeutung oder sind sie Dekoration?

  • Bei inhaltlicher Bedeutung brauchen sie eine aussagekräftige alt-Angabe. alt="cross" für beide Bilder stelle ich mir nicht als aussagekräftig vor.
  • Dekoration hingegen kann man mit alt="" oder als CSS Hintergrundbild realisieren. Bei CSS wäre dann auch data-URL aus dem HTML raus. Und wenn es dann nicht nur 2 Bilder, sondern viele kleine, aber gleich (oder ähnlich) große Bilder sind, kann sich ein externes Bild mit Sprites anbieten.

Sorry für den Fragenkatalog, aber die Frage lässt sich nicht allgemein beantworten. Oder ich müsste alle Alternativen durchdeklinieren, und dann reichen die 5000 Zeichen pro Posting nicht.

Einen Hinweis zum Thema "fürchterlich" hätte ich noch: Klassen sollen nicht die technische Funktion beschreiben, die man damit erreichen will. Bei CSS-Frameworks ist das so, ja, aber bei eigenen Klassen mit eigenen CSS Regeln sollen die Klassen die Fachlichkeit beschreiben. Mal angenommen, das wäre eine Vokabelliste. In dem Fall sollte die Tabelle class="vokabeln" haben. Die Spalten brauchen nicht unbedingt eigene Klassen, hierfür kann man auch mit Kombinatoren arbeiten:

<table class="vokabeln">
  <colgroup>
    <col />
    <col />
  </colgroup>
  <thead>
    <th>Lateinisch</th>
    <th>Grammatik</th>
    <th>Deutsch</th>
  </thead>
  <tbody>
    <tr>
      <td>laudāre</td>
      <td>A-Konjugation (laudō, laudāvī, laudātum)</td>
      <td>loben</td>
  </tbody>
</table>

.vokabeln {
   width: 100%;
}

.vokabeln col {
   width: 50%;
} 
.vokabeln td {
  text-align: center;
} 

Warum colgroup und keine Spaltenbreiten für die td Elemente? NORMALERWEISE ist das egal. Aber falls Du td Elemente mit colspan hast, dann wird das Festlegen von Breiten über die td Elemente schwierig. Deswegen ist es besser, für jede Spalte ein col-Element vorzusehen und für diese Spaltenbreiten zu geben. Generell ist es auch nicht sinnvoll, die Spaltenbreite einer Tabelle zu rigide festzulegen. Für col bedeutet width eine Minimalbreite, und je nach Tabelleninhalt kann es dem Browser helfen, wenn die Spalten etwas „atmen“ können.

th braucht man nicht zu zentrieren, das ist eh schon der Fall. Aber wenn Du sicher gehen willst, dann verwende .vokabeln :is(th, td) als Selektor. Heißt: Suche in den direkten oder indirekten Kindelementen der Elemente mit Klasse vokabeln nach th- oder td-Elementen (dieses "oder" wird durch :is() gebildet).

Beachte: Wenn du keine tabellarischen Daten anzeigst, ist table das falsche Element, dann reden wir eher über ein Grid.

Rolf

[Jenny]

Hallo Rolf

• definiere fürchterlich

Ausrichtung von zwei icons auf der Seite mit Hilfe einer Tabelle

Bisher ist das eine Tabelle mit 2 Spalten und die Spalten enthalten je ein Bild mit data-URL als Quelle.

Die Quellen sind zwei Icons

Hauptfrage wäre: Was ist der Zweck der Tabelle? Kommen da tabellarische Daten 'rein? D.h.: muss das eine Tabelle bleiben oder kann es etwas anderes sein? Bei echt tabellarischen Daten wäre es sinnvoll, einen thead-Bereich mit th Elementen als Spaltenüberschriften vorzusehen.

siehe oben

Zweite Frage: Was ist mit den Bildern?

• Ist es der Demo geschuldet oder ist es auch später so, dass die Bilder in den beiden Spalten identisch sind?

Die Bilder sind unterschiedlich und sollen das nachfolgende veranschaulichen. Hier habe ich einfach zwei angegeben, die ich gefunden habe. In der Realität sind es "Daumen runter" und "Daumen hoch".

Darunter zwei Spalten (je 50% Breite) mit entsprechenden Texten. Die beiden Spalten mit Fließtext(!) sind ebenfalls mit einer Tabelle realisiert!

Beachte: Wenn du keine tabellarischen Daten anzeigst, ist table das falsche Element, dann reden wir eher über ein Grid.

Genau dehalb hatte ich von "fürchterlich" gesprochen.

Gruß Jenny

[Jonathan Harker2]

Hallo zusammen,

Darunter zwei Spalten (je 50% Breite) mit entsprechenden Texten. Die beiden Spalten mit Fließtext(!) sind ebenfalls mit einer Tabelle realisiert!

Da würde ich Felix' Konstrukt als Ausgangslage nehmen:

<article class="decorated">
  <section id="german"></section>
  <section id="stop"></section>
</article>

Aber: Auf meinem Handy will ich keine 2 Spalten nebeneinander. Deshalb mobile first!

Erst bei genügend großer Breite sollen die 2 Bereiche nebeneinander platziert werden.

Die Bilder sind unterschiedlich und sollen das nachfolgende veranschaulichen. ... In der Realität sind es "Daumen runter" und "Daumen hoch".

Dann kann man die section-Elemente mit einer Überschrift versehen und dort auch ein Bild hinstecken - evtl. rechts floaten lassen. (Um ein Bild rechts in Fließtext oder eine Überschrift zu positionieren, mache ich kein Grid auf!)

Gruß JH

[Jenny]

Hi, jetzt habe ich versucht, das ganze nicht als Hintergrund darzustellen. Was mr nicht gelungen ist, die bilder zu zentrieren.

<!DOCTYPE html>
<html>
<head>
<style>
.decorated {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content:center;
}


</style>
</head>

<body>
<article class="decorated">
  <section><img width="32" height="auto" title="" alt="cross" src="data:image/webp;base64,
	UklGRoYAAABXRUJQVlA4IHoAAABwBACdASooABsAAgA0JagB3BfAPwrlmf9A
	wkD9APf/u0AGBrAFljez7+cLRAD+/p9hZ3svqll6///Cx16peF2iY3//30Vo
	Oh3orQcuwZYH/FRP2whL4Bpul/1Aa0D8jj/5GtyHeCzYN+9OA8FmwUkC9vgV
	hXCjKgIAAA=="></section>
  <section><img width="32" height="auto" title="" alt="cross" src="data:image/webp;base64,
	UklGRoYAAABXRUJQVlA4IHoAAABwBACdASooABsAAgA0JagB3BfAPwrlmf9A
	wkD9APf/u0AGBrAFljez7+cLRAD+/p9hZ3svqll6///Cx16peF2iY3//30Vo
	Oh3orQcuwZYH/FRP2whL4Bpul/1Aa0D8jj/5GtyHeCzYN+9OA8FmwUkC9vgV
	hXCjKgIAAA=="></section>
</article>
</body>
</html>

[Gunnar Bittersmann]

@@Jenny

Was mr nicht gelungen ist, die bilder zu zentrieren.

Am einfachsten geht das wohl display: block; margin-inline: auto.

---

  grid-template-columns: 1fr 1fr;

Das wurde schon angesprochen, dass das für schmale Viewports nicht funktioniert. Entweder per Media-Query nur ab einer gewissen Mindest-Viewportbreite oder – mein Favorit – mit den Grid-Hausmitteln

  grid-template-columns:
    repeat(auto-fit, minmax(min(12em, 100%), 1fr));

wobei 12em hier die beispielhafte Mindestbreite der Spalten ist.

Außerdem willst du noch Zwischenraum zwischen den Spalten: bspw. gap: 4em.

  align-items: center;
  justify-content:center;

Du willst sicher nicht, dass die Bilder auf unterschiedlicher Höhe stehen. align-items: center muss weg. justify-content: center ist überflüssig, also auch weg damit.

☞ Beispiel: Sonne und Mond

---

<article class="decorated">
  <section>

Ich glaube nicht, dass article das richtige HTML ist. Manchmal ist ein div einfach nur ein div.

section nur, wenn der Abschnitt eine Überschrift hat (oder man mit ARIA eine geben kann, siehe Beispiel).

  <img width="32" height="auto" title="" alt="cross" src="data:image/webp;base64,
	UklGRoYAAABXRUJQVlA4IHoAAABwBACdASooABsAAgA0JagB3BfAPwrlmf9A
	wkD9APf/u0AGBrAFljez7+cLRAD+/p9hZ3svqll6///Cx16peF2iY3//30Vo
	Oh3orQcuwZYH/FRP2whL4Bpul/1Aa0D8jj/5GtyHeCzYN+9OA8FmwUkC9vgV
	hXCjKgIAAA==">

Das hast du jetzt nur in deinem Beispiel base64-codiert als Data-URL? Ansonsten ist das keine so gute Idee.

🖖 Live long and prosper

[Jenny]

Hallo Gunnar,

besten Dank.

Am einfachsten geht das wohl display: block; margin-inline: auto.

Das klappt bei mir leider nicht

  grid-template-columns: 1fr 1fr;

Das wurde schon angesprochen, dass das für schmale Viewports nicht funktioniert. Entweder per Media-Query nur ab einer gewissen Mindest-Viewportbreite oder – mein Favorit – mit den Grid-Hausmitteln

  grid-template-columns:
    repeat(auto-fit, minmax(min(12em, 100%), 1fr));

wobei 12em hier die beispielhafte Mindestbreite der Spalten ist.

OK, ist angekommen

Außerdem willst du noch Zwischenraum zwischen den Spalten: bspw. gap: 4em.

  align-items: center;
  justify-content:center;

Du willst sicher nicht, dass die Bilder auf unterschiedlicher Höhe stehen. align-items: center muss weg. justify-content: center ist überflüssig, also auch weg damit.

☞ Beispiel: Sonne und Mond

Das ist mir noch zu schwierig😉

---

<article class="decorated">
  <section>

Ich glaube nicht, dass article das richtige HTML ist. Manchmal ist ein div einfach nur ein div.

OK

section nur, wenn der Abschnitt eine Überschrift hat (oder man mit ARIA eine geben kann, siehe Beispiel).

Das hast du jetzt nur in deinem Beispiel base64-codiert als Data-URL? Ansonsten ist das keine so gute Idee.

Ja, nur zur Demo.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Jenny

Am einfachsten geht das wohl display: block; margin-inline: auto.

Das klappt bei mir leider nicht

Schrödingers Display? Gleichzeitig grid und block?

Nö, hier überschreibt die spätere Angabe die frühere, deshalb ist das kein Grid mehr. Das ist wohl nicht so gedacht, also kann da was nicht stimmen.

Ich dachte, aus dem Zusammenhang ging hervor, dass display: block; margin-inline: auto für die Bilder (img) zu setzen ist.

Du hättest das auch in meinem Beispiel wiederfinden können.

☞ Beispiel: Sonne und Mond

Das ist mir noch zu schwierig😉

Und was genau? Wenn du gezielte Fragen dazu hast, nur her damit, dann kann ich die beantworten.

🖖 Live long and prosper

[Felix Riesterer]

Liebe(r) Jenny,

vereinfachen, aber wie am einfachsten?

vielleicht so?

<article class="decorated">
  <section id="german"></section>
  <section id="stop"></section>
</article>

.decorated {
  display: grid;
  grid-template-columns: 1fr 1fr;

  & section {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 32px;
    min-height: 3em;
  }
}

#german {
  background-image: url(
    data:image/webp;base64,UklGRoYAAABXRUJQVlA4IHoAAABwBACdASooABsAAgA0JagB3BfAPwrlmf9AwkD9APf/u0AGBrAFljez7+cLRAD+/p9hZ3svqll6///Cx16peF2iY3//30VoOh3orQcuwZYH/FRP2whL4Bpul/1Aa0D8jj/5GtyHeCzYN+9OA8FmwUkC9vgVhXCjKgIAAA==
  );
}

#stop {
  background-image: url(
    data:image/gif;base64,R0lGODlhUABQAMIFAMwAANlAQOaAgPK/v//+/v///////////yH5BAEKAAcALAAAAABQAFAAAAP+eLrcviTKSaudL+vNz/3g140kE55oVK5b6oZsbE4BYN94ru92QMkxSo1HLOJ8GCBJaGwakRJlh+ms8qAqaYZq7eawBK2D6y33fmIF2WwGp9fsNloJj8uTsrr9Hg3S9oA3bit6gXxZI4WGh2FTf4uQgxqKkGySY4+VlZcQmZqbc2qen6B4lKR7bqeoqR9DrKxgEkYCtYu1Aq9fuLhNF1cDBcLCA68Cw8jJBQI4x8nMOc7KxTy/OgHKw0PS2cPQAMHZA9HdxDvWR+XCNtzl0OHd3wDtyvI26Dfw8fPq3vz9zfoV0IEPALZh4wwm04HMHrhn7b5JgxZAn72C3NJpy9H+kCFCQcgS/lsG0h8OjMg4mrzRUaUweRnZrQSw8KQFcsNcksTRkufMmCPl1byBMmeVnix/ppT50qdRojcDbnSC1AZSoBOdrrNZweNUI1VpKn2aNenTe1Fx6Hupy+tOrTCXBi1pjiuFa92o7Qh7VW7ZilUL9ijX1upMw01vYBVIMK0OesIK8x27deS+HIKjrRVp9m3nuGTVcYbatcnBs4g9pwZdGXIBvY1LN+HWdnJipq0bOox99+hh254XoyaSmUdV4KwH4lbuy7HY26t1Ouwbeng158d/H34e3K9cIwX1aYws3S1rkUDBO+eWEPBw4CJPv01fRLDA0dwdRmwntbK9etmKAWTeDms90x9z//WWQ4FfwcUDg6/h5F99zgWYDGzl8UBPYfQRV+ERvRgSQC2FxXFBibBE4kqKpKgyCouASLIKjE5wMiONRHAiigQo4mhaKA3c6OMZeGzx4pBXAGkkj0g+oeQkRzZp0JMtRDmkjolYSSOWS2iZIpclCKlikXR4+QmYfjC5JZVlqvklm1KIyUgaS0bQYyBovmGmJXDS6cGeXuTp558vFNrnoDsaWiiiXSrqAqNhOoqCFgkAADs=
  );
}

Liebe Grüße

Felix Riesterer

[Jenny]

Hallo Felix, im Prinzip ist es das, was ich erreichen wollte, allerdings nicht als Background. Gruß Jenny

[Felix Riesterer]

Liebe(r) Jenny,

das, was ich erreichen wollte, allerdings nicht als Background.

warum nicht? Warum verheimlichst Du, was Du wirklich erreichen willst? Immer diese Frager, die eine spezialspezielle technische Feinheit diskutieren, weil sie meinen, dass das der ideale Weg zu ihrem generellen Ziel sei.

Kann mir ja egal sein.

Liebe Grüße

Felix Riesterer