Bilder mit Bildunterschrift

Mehr
2 Monate 3 Wochen her #5046 von michael
Bedingt durch die responsive Darstellung der Webseite wollte ich die Bildunterschrfiten nicht mehr wie bisher in Tabellenform darstellen. Diese Bildunterschriften sollten sich ebenfalls der Ansichtsgröße anpassen. Dazu habe ich nach mehrfachen Testen folgende Lösung gefunden:
<figure class="figure; fluid" style="float: left; width: 20%;" data-wf-figure="1">
<img src="images/Wichtig/Wichtig01.jpg" alt="Wichtiges Bild 01" width="100%" height="auto" class="img-fluid" style="width: 100%; height: auto; margin-right: 10px; float: left;" />
<figcaption class="figure-caption" style="font-size: xx-small; color: #000000; text-align: center;">Wichtiges Bild 01</figcaption>
</figure>
Das Gesamtgebilde "figure" nimmt eine Breite von 20 % der Seite ein. Innerhalb dieses Gebilde nimmt das Bild eine Breite von 100% ein. Die Anweisung "fluid" ist für die responsive Darstellung wichtig. Den Text habe ich zentriert mit einer kleinen Textgröße formatiert. Ferner erscheint dieses Bild linksbündig und das Bild hat nach rechts einen Abstand von 10px.
Sofern jemand eine andere Lösung kennt, lasst es mich bitte wissen.Es ist schon ein ziemlicher Aufwand, wenn man einen alten Webauftritt kompett neu aufbaut.
Gruß, Michael

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Monate 3 Wochen her #5049 von Thomas Hunziker
Der Ansatz ist durchaus gut. Nur würde ich das Styling dann nicht inline in das HTML Element schreiben sondern in die user.css Datei. Und dem figure gibst dann nur eine class an welche dann die CSS Regeln anzieht.
So musst du die Regeln nur einmal schreiben und kannst sie auch zentral anpassen wenn nötig.

Also sowas:
figure.fluid {
  float: left;
  width: 20%;
}
figure.fluid img {
  width: 100%;
  height: auto;
  margin-right: 10px;
  float: left;
}
figure.fluid figcaption {
  font-size: xx-small;
  color: #000000;
  text-align: center;
}

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Ladezeit der Seite: 0.099 Sekunden
Powered by Kunena Forum
   
© Bakual