Einen Rahmen gestalten

  • Von
  • ·
  • Geschätzte Lesezeit 2 Minuten

Wolken die wie eine Wellen-Brandung
aussehen

Wolkenbrandung, 8.6.2014 Leserinnen und Leser die all meine Texte lesen wissen, dass ich jedes Mal meckere, wenn mir mal wieder jemand erzählt, wie wichtig das Design einer Website sei. Ich versuche das mal mit einem Vergleich zu erklären:

Was macht ein Auto in erster Linie aus? Das es sich gut und sicher fahren lässt. Erst in zweiter Linie ist das Aussehen des Autos wichtig. Denn wem nutzt ein Auto das toll aussieht, aber fahruntüchtig ist? – Bei einer Website sind es in erster Linie die Inhalte, auf die es ankommt.

Doch ich muss gestehen, ab und an schraube ich doch gern mal an dem Design einer Website. Heute musste mal die „Figur“ dran glauben. Ich habe dem HTML5-Element „figure“ mittels CSS einen Ausdruck, sprich sichtbaren Rahmen verpasst. Okay, okay, das lässt sich bestimmt besser gestalten.

Es geht um das Foto da oben, mit dem hellgrauen Rahmen, der Beschriftung und den beiden Linien die den HTML-Tag „figure“ nach oben und unten abgrenzen. Eingedampft sieht der HTML-Teil dazu so aus:

HTML5-Element
figure

Der CSS-Teil dazu kommt so daher:

 figure {
margin: 20px 0 40px 0;
border-top: 2px dotted #e6e6e6;
border-bottom: 2px dotted #e6e6e6;
}
figure img {
display: block;
margin: 30px 0 0 0;
padding: 15px;
border: 1px solid #e6e6e6;
}
figcaption {
margin: 0;
padding: 0;
text-align: center;
font-style: italic;
color: #8c8c8c;
}
Vermutlich lässt sich der CSS-Teil noch ordentlich verbessern und

einkürzen. Aber so ist das mit den Laien. Ergänzt am 21.6.2014: Eben habe ich festgestellt, dass sich das Bild nicht zentriert, was es aber sollte. Hier also die Korrektur: figure img { display: block; margin-top: 30px; margin-left: auto; margin-right: auto; padding: 15px; border: 1px solid #e6e6e6; }