Bilder mit Untertext

[Felix Riesterer]

Lieber Uups,

Richtig - ist aber tatsächlich der hoffentlich einzige Schnitzer, den ich mir auf der Seite erlaube. Weiter hast du nicht geschaut ?

...doch! Und da fand ich das hier: <div id="tabunten"><br><br><br>. Das ist ja brrrrrrr, nicht gerade schön...

Für einen reinen HTML-Freak, wie ich es bin, hab ich nu mittlerweile einiges an CSS eingearbeitet.

Ja, Dein Code ist sehr semantisch, das stimmt. Daher ist es Dir auch möglich, mit CSS Deine Seite so weit nach rechts zu verschieben, dass ich in einem Browserfenster von 1024px Breite nur Hintergrundgrafik zu sehen bekomme. :-/

Nur - das mit dem JS bringt mich keinen Schritt weiter. Die Frage war ja - wie bekomme ich mit Hilfe von CSS und NUR CSS die Untertitel unter meine Bilder, wenn sie in einer horizontalen Reihe stehen. Dein Quelltext hat mir da keine Lösung gezeigt.

Dann hast Du nicht im CSS danach gesucht! Das JS sagte ich bereits, hat nüscht mit der aktuellen Darstellung zu tun!

Ich erklär's Dir aber gerne hier:

<div class="bildergalerie">  
    <p><img src="..." alt="..." /><br />  
    Bildunterschrift</p>  
    <p><img src="..." alt="..." /><br />  
    Bildunterschrift</p>  
    <p><img src="..." alt="..." /><br />  
    Bildunterschrift</p>  
</div>

Die Textabsätze im div werden in ihrer Breite festgelegt (width:xyz), bekommen einen Rahmen (border:...) und werden linksbündig (float:left) nebeneinander ausgerichtet. Anschließend muss das float von einem nachfolgenden Element ge-clear-t werden, sonst hängt eventuell etwas anderes schief. Jedenfalls ist der relevante CSS-Code sehr kurz:

.bildergallerie p {  
    float: left;  
    width: 12em;  
    height: 8em;  
    margin: 2px;  
    padding: 2px;  
    border: 1px dotted #dfdfdf;  
    text-align: center;  
}  
  
.bildergallerie p img {  
    margin: 0;  
    padding: 0;  
}

Um diese <br />s nicht mehr zu gebrauchen, könnte man das Bild per display:block als Blockelement darstellen, sodass der Text automatisch in eine neue Zeile rutscht und die <br />s hinfällig werden. Ich werde mir das mal zu Gemüte führen...

Gernot hat völlig Recht, wenn er das mit den <br />s ganz brrrrr findet, denn man könnte das sehr gut mit einer Definitionsliste auzeichnen, was semantischer ist, und was dann völlig ohne CSS auch noch fast wie beabsichtigt ausschaut. Daher kommt gleich das "korrigierte" Beispiel:

<dl class="bildergalerie">  
    <dt><img src="...." alt="..." /></dt>  
    <dd>Bildunterschrift</dd>  
    <dt><img src="...." alt="..." /></dt>  
    <dd>Bildunterschrift</dd>  
    <dt><img src="...." alt="..." /></dt>  
    <dd>Bildunterschrift</dd>  
</dl>

Wenn man nur ein einziges Bild so auszeichnen möchte, dann mag das ja noch angehen, aber wenn man denselben Effekt erreichen möchte, den ich mit meinen <br />s erreiche, dann fällt das CSS wesentlich komplexer dafür aus, denn das Bild und die Unterschrift sitzen nun in benachbarten Elementen, anstatt innerhalb eines einzigen Elternelements zu sitzen. Daher kann man nun z.B. nicht einfach einen Rahmen darum generieren. Ich habe jetzt aber keine Lust (und Zeit!) mehr, ein dafür passendes CSS zu erstellen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.