CSS figure

[Christian Andreas]

Hallo Forum,

Ich würde gerne meine Photos durch eine Checkbox auswählbar machen und hierzu je eine Checkbox mittig unter jedes Photo setzen.

Mir gelingt es aber weder, die Checkbox mittig innerhalb des Rahmens unter das datum/uhrzeit zu setzen, noch unterhalb des Rahmens.

Hilft mir mal jemand auf die Sprünge?

CA

[Rolf B]

Hallo Christian,

whoa, was für ein komplexes Werk mit der Positionierung. Ich weiß natürlich nicht, wofür Du die .uiS Klasse sonst noch brauchst, aber wenn Du möchtest, dass deine Bilder wie ein klassischer Printabzug mit Rand aussehen, dann kannst Du auch das ganze Border-, Schatten und Margin-Gedöns vom img Element wegnehmen. Gib der figure einen passenden Margin, dazu Padding für den Fotorand und box-shadow. Mach das Padding unten nicht extrabreit, sondern positioniere die figcaption ganz normal statisch, nicht absolut. Dann ergibt sich da alles von selbst.

Viele Angaben zu Margin, Padding oder Border kann man übrigens zusammenfassen. Statt margin-top, margin-right, margin-bottom und margin-left einzeln anzugeben, kann man die 4 Werte als "margin: ..." angeben. Guck mal hier.

Die Checkbox kannst Du dann in die figcaption mit aufnehmen. Da sie ohnehin eine Beschriftung braucht (label Element), kannst Du das als Block-Element stylen und mit text-align den Inhalt zentrieren. Die Beschriftung selbst kannst Du in einen span stecken und visuell verbergen, aber sie gehört für Leute, die einen Screenreader verwenden (Blinde, Analphabeten) dazu.

Ich würde Dir auch noch empfehlen, die figure zu einem Grid zu machen, um das a-Element, in dem das Bild steckt, mit justify-self/align-self zentrieren zu können (falls das Thumbnail schmaler ist als die figcaption).

Und 1500px ist für ein Thumbnail eine monströse Größe, das sollten eher 12em sein oder 150px. Deine Fontsize ist auch zu klein. 10px ist ungeeignet. Wenn's schon kleiner sein soll, unterschreite 80% der Browser-Defaultgröße nicht, und gib es als % an. Lass den Brille tragenden Anwendern die Möglichkeit, zu zoomen.

HTML:

<figure>
  <a class="clue" href="#" title="24.01.2021 17:47 Uhr" target="blank">
    <img class="uiS" src="https://i.postimg.cc/sxTzcgc1/Bild1.jpg" alt="thumb">
  </a>
  <figcaption>24.01.2021 17:00 Uhr
    <label>
      <span class="visually-hidden">Auswählen</span>
      <input type="checkbox" name="foto" value="Bild1.jpg">
    </label>
  </figcaption>
</figure>

CSS:

.uiS {
   background: #FFF;
}

figure {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr auto;
   font-size: 80%;
   font-weight: bold;
   max-width: 12em;
   margin: 1em;
   padding: 1em 1em 0.2em 1em;
   border-radius: 0.4em;
   background-color: #F2F2F2;
   box-shadow: 1px 2px 4px rgba(0,0,0,.5);
}

figure a {
   justify-self: center;    /* Zentriere Link in der Grid-Zelle */
   align-self: center;
}

figure img {
   max-width: 100%;      /* Bild nicht größer als figure */
   display: block;
}
figcaption {
   margin-top: 0.5em;
}
figcaption label {
   display: block;       /* Label auf eigene Zeile und volle Breite */
   text-align: center;   /* Inhalt zentrieren */
}
.visually-hidden {
   font-size: 0;         /* Beschriftung visuell verstecken */
   margin: 0;
   padding: 0;
}

Beispiel (mit großem Bild): https://jsfiddle.net/Rolf_b/Lbowde2z/

Rolf

[Christian Andreas]

Hi Rolf,

Deine Lösung gefällt mir noch viel besser als meine vorherige.

Grund: Bei mir war es so, dass jeglicher Text innerhalb des figcaption, der breiter als das thumb war, sich nach oben hin ins Thumb hinein geschoben hat (hätte).

Bei Deiner Lösung wird der Rahmen einfach größer. Leider zwar nicht nur in der Höhe, sondern auch in der Breite, aber dennoch schöner als bei mir.

Breite hierbei begrenzen geht vermutlich nicht?

Danke auch für Deine Erklärung zu dem Ganzen.

CA

[Rolf B]

Hallo Christian,

der Rahmen sollte nicht allzu breit werden können, weil ja ein max-width gesetzt ist. Eine einheitliche Rahmenbreite bekommst du mit width statt max-width.

Wenn Du für die Thumbnails oder die Gesamt-Figure irgendwelche anderen Größenrestriktionen setzen willst, müsstest Du das genauer formulieren.

Rolf

[Christian Andreas]

Hallo Rolf,

der Rahmen sollte nicht allzu breit werden können, weil ja ein max-width gesetzt ist. Eine einheitliche Rahmenbreite bekommst du mit width statt max-width.

Ok, deshalb.

Wenn Du für die Thumbnails oder die Gesamt-Figure irgendwelche anderen Größenrestriktionen setzen willst, müsstest Du das genauer formulieren.

Nein, andere Restriktionen hatte ich gar nicht gemeint.

Vielen Dank für Deine Hilfe!

CA

[Christian Andreas]

Hallo,

ich habe eine Zusatzfrage: Gibt es einen JS-Eventhandler, den ich sowohl über Tablet als auch PC auslösen kann, um alle Checkboxen an-/abzuwählen?

Ich meine jetzt nicht die üblichen Verdächtigen, klar kann ich einen Link oder eine zusätzliche Checkbox machen, die den Event abfängt. Ich dachte eher an etwas, wie Checkbox lange gedrückt halten (beim Tablet) oder sowas wie Doppelklick, o.ä.

Wäre halt schön, wenn es derselbe Eventhandler wäre, egal ob Tablet oder PC.

CA

[Rolf B]

Hallo Christian,

ich bin mit Touch-Events nicht vertraut und kann nicht sagen, wie man sowas wie ein "Long Touch" erkennt. Nach dem, was ich so lese, soll man touchstart und touchend implementieren. Im touchstart startet man einen Timer und in touchend stoppt man ihn. Schafft es der Timer, zum Ende zu kommen ohne von touchend gestoppt worden zu sein, löst er die longtouch-Operation aus.

Einen Doppelklick erkennt man durch die detail-Eigenschaft des mousedown Events, es gibt auch ein dblclick-Event, das das wegabstrahiert.

Einen dblclick Event solltest man auch bei einem Doppel-Tap auf einem Touch-Gerät erhalten.

Wie auch immer - wenn man unterschiedliche Auslöser für ein bestimmtes Verhalten hat, das Verhalten an sich aber gleich ist, dann trennt man die Implementierung von Eventhandling und Verhalten auf:

Funktion 1: Eventhandler für Auslöser 1 - ruft Funktion 3 auf

Funktion 2: Eventhandler für Auslöser 2 - ruft Funktion 3 auf

Funktion 3: Durchführen des gewünschten Verhaltens

Funktion 1 und 2 sind dann zumeist nur Einzeiler, die nicht mehr zu tun haben, als die Funktion 3 mit den richtigen Parametern aufzurufen. Im besten Fall kann man Funktion 3 gleich als Handler für beide Events verwenden.

Einen "Alles auswählen" Button (nicht Link!) oder eine "Alles" Checkbox solltest Du aber dennoch haben. Per Tastatur bekommst Du zwar ein click-Event, aber der detail-Zähler geht nicht hoch. Ein dblclick-Event bekommst Du auch nicht. Für Keyboard-Fans könntest Du aber einen Button defininieren mit accesskey="a" - allerdings sind die Browser eigen darin, ob man einen Accesskey mit Alt oder Shift+Alt auslöst und wenn der Browser Alt+A selbst als Shortcut hat, kannst Du lange Accesskeys definieren.

Strg+A ist eigentlich der vertraute Shortcut für "Alles selektieren", den implementierst Du so:

document.body.addEventListener("keydown", function(keyEvent) {
   if (keyEvent.ctrlKey && ke.key == "a") {
      selectAll();
      keyEvent.preventDefault();
   }
});

Bei Spracheingabe ist es aber vorbei. Fancy Features sind schön und gut, aber die Seite muss bedienbar bleiben. Dafür muss ein Button existieren. Oder eine schlaue Spracheingabe, die "Alles selektieren" erkennt und dem Browser Strg+A vorgaukelt.

Rolf

[Christian Andreas]

Hallo Rolf,

wahrscheinlich hast Du recht.

Wenn ich aber ohnehin einen "A-Button" instaöllieren muiss, kann ich auch die "Fancy-Geschichte" komplett heraus lassen.

Ich muss mir mal überlegen, wo ich solche einen Button dergestalt implementieren kann, dass ich ihn auch noch einigermaßen schön (und nicht nur technisch sinvoll) empfinde 😉

Danke für Deine Hilfe und Hinweise,

CA