Bildunterschriften in CSS Fotogalerie

[Hoecker]

Hallo, ich bin absoluter CSS Anfänger und komme an einer Stelle nicht weiter. Ich habe mir eine Bildergalerie erstellt, so wie sie hier http://www.ohne-css.gehts-gar.net/0071.php beschrieben ist. Diese habe ich mir so umgestellt, dass die Kästchen zur Bilderwahl oben sind. Soweit kein Problem. Jetzt würde ich gerne zu den einzelnen Bildern Unterschriften hinzufügen, die zusammen mit dem jeweils gewählten Bild angezeigt werden. Allerdings habe ich überhaupt keine Ahnung, wie ich das machen soll. Für Hilfe wäre ich sehr dankbar.

[sejuma]

Hallo,
hab mal was gebastelt, ist aber noch unvollkommen:

HTML:

<li><a class="info" href="#">02<img class="quer" src="../img/0071/handball02.jpg" alt="handball02"><span>Text unter dem Bild</span></a></li>

CSS:

Code: Alles auswählen

a.info span
{
display: none;
}

a.info:active span, a.info:focus span
{
position: relative; left: 0px; top: 50px;
display: block;
width:350px;
color: #000;
font-size: 0.8em;
}

Mit den Werten bei position: relative kannst du die Textposition einstellen (je nach Bedarf evtl. auch negative Werte verwenden).

Und da liegt auch der Nachteil: Die Klasse "info" gilt dann für alle Texte, so dass sich der Text mit jedem Link verschiebt.

Wenn die Gallerie nicht zu umfangreich ist, dann könntest du mit individuellen info-Klassen je Link arbeiten.
Also info1 für den ersten, info2 für den zweiten Link usw.

[Hoecker]

Vielen Dank ersteinmal für die Mühe! Ich hab es ausprobiert, und es funktioniert. Das ich mehrere Infoklassen erstellen muss, weil sich die Textposition Verschuebt ist jetzt nicht so schlimm. Da wird der Qelltext zwar etwas länger, aber daran soll es nicht scheitern. Wichtig ist mir das es Grundsätzlich klappt und das tut es.
Grüße
Hoecker

[Hoecker]

Ich hab jetz noch einmal ein bischen rumprobiert und anstatt "position: relative" "absolute" gewählt. So besteht das problem mit dem verschobenen Text nicht mehr.