DL-Galerie im Stylesheet des Themes Gespaa ergänzt

tempa wrote this 15:51:

Für den letzten Beitrag benötigte ich eine geignete Darstellungsform, an der ich in meinen intensiven Surf- und Recherchetouren der letzten Tage zufällig vorbeikam. Maxdesign Definition lists – misused or misunderstood?, der die Methode widerum auf Pomage „Les listes de définitions : mal utilisées ou mal comprises ?“ fand und den Artikel übersetzte. Die Methode entsprach nicht ganz meinen Bedürfnissen. Dadurch dass dem Bild die Maße zugewiesen werden, wäre ich darauf angewiesen gewesen, das Bild entsprechend den Maßen zuzuschneiden oder zu verkleinern. Beim Bloggen habe ich aber des öfteren das Bedürfnis einfach nur schnell zu publizieren (weswegen der Rohling als Codeschnipsel auch in meinen Quicktags ist.) und will mich nicht lange mit Bildzuschnitten aufhalten. Wenn das Bild ca von den Maßen passt, soll das genügen. Insbesondere im letzten Thema, wäre eine Verkleinerung den Bildes noch einmal eine Verfälschung von Originalbild zu den komprimierten Bildern gewesen. In diesem Besonderen Fall, war die Verkleinerung sowohl im Bildbearbeitungsprogramm sowie über die CSS-Eigenschaften denkbar ungeeignet. Ich führte also ein Span ein, dass ich über die Eigenschaft display: block; und der Eigenschaft overflow: hidden; zum Passpartout des Bildes gestaltete und das die Maße vorgibt.

Hier Bilder aus der KategorieFrüchte und Gemüse D – M auf imagefreedom.org ( Food D – M)

Kiwano Melon PNG ca 35KBKiwano Melon
175 x 160 Pixels
Lime public domain freeimage.orgLimone
300 x 265 Pixels
Feigen von freeimage.orgFeigen
247 x 164 Pixels

Und so wirds gemacht:

HTML Definitionsliste in den Beitragspost

<dl class="galerie">
  <dt><span><img src="..." alt="" /></span>Bildtitel</dt>
  <dd>Bildbeschreibung</dd>
</dl>

CSS-Eigenschaften für das Stylesheet des Themes Gespaa

dl.galerie 
{
border: 1px solid #7a8a99;
background-color: #eff0f2;
width: 142px;
text-align: center;
padding: 5px;
position: relative;
float: left;
margin-right: 10px;
}

dl.galerie dt {font-weight: bold; text-align: center;}

dl.galerie dt span
{
display: block;
text-align: center;
margin: auto;
border: 1px solid #7a8a99;
width: 130px;
height: 130px;
overflow: hidden;
}

dl.galerie dt span img {
  margin: auto;
}

dl.galerie dd
{
margin: 0;
padding: 0;
text-align: center;
}

Das Gespaa bietet in meiner modifizierten Form im Post-Bereich eine Breite von 524px, daraus ergab sich die Breite der Liste und der Abstand zu einander. Hier muss ggf. in Gespaa-Themes mit Sidebar noch nachgefeilt werden.

Und dass das Bild schon einmal den Rahmen sprengen würde sieht man an der Limone:

Lime public domain freeimage.org

Die Limone wurde mit margins im <img ...>-Tag per Inlinestyle passend ins <span>-Passpartout gerückt.

One Response to “DL-Galerie im Stylesheet des Themes Gespaa ergänzt”

  1. Templaterie Blog Says:

    […] Angaben soll nun eine Galerie-Seite erstellt werden, also eine Archivseite mit Thumbs, die die Definitionlist-Formatierung nutzt, die hier im Weblog vorgestellt wurde. Der Code ist ähnlich dem Code für die […]

Leave a Reply