Bild und Text gleichzeitig ändern

[mic123]

Hallo,

ich habe folgende Problemstellung bei einer Bildergalerie:
Wenn ich mit der Maus über einen Text fahre, soll dieser die Farbe ändern und zugleich das Bild einen farbigen Rahmen erhalten. Wenn ich mit der Maus über das Bild fahre, soll das Gleiche passieren. Das habe ich realisieren können, indem ich <img> und <span> in ein <a>-tag gesteckt habe.
Dem <span> habe ich über {position: absolute;padding-top:230px} eine Platzierung unterhalb der Galerie zugewiesen. Auch das funktioniert.

Was mir nicht gefällt: Ich kann den Text im <span> nicht ausrichten. Er hat nur so viel Platz, wie das Bild an Breite einnimmt.
Ich möchte, dass der Text frei fließt. Wie kann ich dieses Problem lösen? Muss ich <span> gegen irgendetwas anderes austauschen?
Gibt es hierzu eine Lösung mit CSS oder muss ich mit JavaScript arbeiten?

Hier der Link zur Seite: http://www.doerthe-baeumer.de/arbeiten_b.html

Vielen Dank im Voraus!

 

[Maik]

Hi.

Was mir nicht gefällt: Ich kann den Text im <span> nicht ausrichten. Er hat nur so viel Platz, wie das Bild an Breite einnimmt.
Ich möchte, dass der Text frei fließt. Wie kann ich dieses Problem lösen?

Das <span>-Element zählt zu den Inline-Elementen, deren Breite sich durch ihren Inhalt ergibt. Von daher müsstest du ihm "Block-Level-Charakteristika" verleihen, sei's durch display:block oder eine float-Regel (left / right).

mfg Maik

 

[mic123]

Hallo Maik,

vielen Dank für die schnelle Antwort.
Leider zeigt die Verleihung der "Block-Level-Charakteristika" keinerlei Wirkung.
Zur Verdeutlichung des Problems: Ich habe zwei Reihen mit je sieben Bildern. Jedes Bild hat einen eigenen Text. Dieser Text wird vertikal bündig mit den einzelnen Bildern angezeigt. Und genau das möchte ich nicht.
Ich vermute, dass die <span>-Tags die festgelegte Breite der einzelnen Bilder einnehmen, da beide vom <a>-Tag eingeschlossen sind.
Hast du noch einen Lösungsvorschlag?

Mfg
Mic

 

[Maik]

Neben display:block bedarf es hier wegen der absoluten Positionierung einer Breitenangabe.

.unten {
position: absolute;
padding-top:230px;
font-size:14px;
/* ergänzt */
display:block;
width:100px;
text-align:center;
}

mfg Maik

 

[mic123]

Nochmals danke,

aber diese Erweiterung löst das Problem nicht.
Jedes Bild hat einen anderen Text (beides als Link). Diese Texte sollen unterhalb der Galerie wie normaler Text linksbündig fließen.
Durch deine vorgeschlagene Erweiterung ist der Text aber auseinander gerissen. Wahrscheinlich, weil jeder Text in einem eigenen <div> steht.
Falls dir noch etwas einfällt, wäre ich dir sehr dankbar.

Mic

 

[Maik]

Mit meinem Vorschlag wurde der Text im <span>-Element horizontal zentriert, weil er nach deiner Aussage vertikal bündig sitzt, und du das nicht möchtest.

Zentrieren willst du ihn aber auch nicht. Also was willst du dann?

Sorry, ich kann deinen Ausführungen leider nicht so recht nicht folgen.

mfg Maik

 

[mic123]

Entschudlige meine unverständliche Darstellung.
Was ich erreichen will, sieht so aus: http://www.karinsander.de/index.php?id=d2.

Der entscheidende Punkt: Der Text hat so viel Platz in der Breite, wie er benötigt und ist nicht (wie bei mir bisher) auf die Breite der Bilder eingeschränkt. Zu beachten ist, dass jedes Bild einen eigenen Text hat.

Allerdings möchte ich das nicht mit JavaScript realisieren, sondern mit CSS (wenn möglich).

Gruß
Mic

 

[Maik]

Okay, jetzt versteh ich, worum es dir geht.

Das wirst du mit deinem Markup CSS-technisch so nicht bewerkstelligen können, denn gegenüber der genannten Seite von heute Morgen befinden sich hier die Texte nicht außerhalb der <a>-Elemente, und werden daher innerhalb ihres Anzeigebereichs dargestellt, anstatt im Textfluß direkt nebeneinander zu folgen.

mfg Maik