Breite einer Bildzuschrift begrenzen (span)?

[dieselross]

Hallo,

ich habe folgendes Problem: Ich habe eine Galerie, die die Bilder per "hover" über die Thumbnails in einem größeren Ausschnitt anzeigt. Außerdem soll eine Bildzuschrift angezeigt werden. Das klappt auch ganz gut, nur läuft diese zu breit. Z. Zt. arbeite ich mit "<br>" um manuell einen Umbruch zu erzwingen. Das muß aber doch auch eleganter gehen!

Was ich habe ist das folgende:

  
<div id="galerieContainer">  
<ul id="galerie">  
<li>  
<a href="#">  
<img src="media/tmb_01.jpg" alt="Kettenanhänger">  
<span><img src="media/bild01.jpg" alt="Kettenanhänger">  
<span class="Bildzuschrift"><em>Kettenanhänger</em><br>  
in Filigrandrechselei<br>Buchsbaum mit<br>Rahmen aus  
Grenadill,<br>  
in Silber gefaßt,<br>Durchmesser 4&nbsp;cm</span></span>  
</a>  
<li>  
<a href="#">  
<img src="media/tmb_02.jpg" alt="Kettenanhänger">  
<span><img src="media/bild02.jpg" alt="Kettenanhänger">  
<span class="Bildzuschrift"><em>Kettenanhänger</em><br>  
in Filigrandrechselei<br>Grenadill, mit Opal,<br>  
in Silber gefaßt,<br>Durchmesser 3,5&nbsp;cm</span></span>  
</a>  
<li>  
<a href="#">  
<img src="media/tmb_03.jpg" alt="Mühlen">  
<span><img src="media/bild03.jpg" alt="Mühlen">  
<span class="Bildzuschrift"><em>Mühlen</em><br>  
Muskat- und<br>Pfeffermühle,<br>  
Cocobolo,<br>  
Durchmesser 6&nbsp;cm,<br>  
Höhe 10&nbsp;bzw. 15&nbsp;cm</span></span>  
</a>  
</li>  
<li>  
<a href="#">  
<img src="media/tmb_04.jpg" alt="Teelichthalter">  
<span><img src="media/bild04.jpg" alt="Teelichthalter">  
<span class="Bildzuschrift"><em>Teelichthalter</em><br>  
aus Eibe,<br>  
Durchmesser 15&nbsp;cm,<br>Höhe 6,5&nbsp;cm</span></span>  
</a>  
</li>  
<li>  
<a href="#">  
<img src="media/tmb_02.jpg" alt="Kettenanhänger">  
<span><img src="media/bild02.jpg" alt="Kettenanhänger">  
<span class="Bildzuschrift"><em>Kettenanhänger</em><br>  
in Filigrandrechselei<br>Grenadill, mit Opal,<br>  
in Silber gefaßt,<br>Durchmesser 3,5&nbsp;cm</span></span>  
</a>  
</li>  
</ul>  
</div>  

und im CSS:

  
/* Galerieelemente */  
  
#galerieContainer {  
 position: relative;  
 width: 500px;  
 height: 375px;  
 margin: 0px;  
 padding: 0px;  
}  
ul#galerie{  
 width:500px;  
 height:373px;  
 position:relative;  
 margin:0;  
 padding:0;  
 list-style:none;  
 background-image: url(../media/preview.jpg);  
 background-repeat: no-repeat;  
}  
ul#galerie li{  
 float:left;  
 display:inline;  
 margin:0;  
 padding:0;  
 list-style:none;  
 margin-top:375px;  
 width: 100px;  
 height: 75px;  
}  
ul#galerie a span{  
 display:none;  
}  
ul#galerie a:hover{  
 background:none;  
 z-index:100;  
 text-decoration: none;  
}  
ul#galerie a:hover span{  
 width:500px;  
 height:300px;  
 float:left;  
 position: absolute;  
 top:0;  
 left:0;  
 display:block;  
 text-decoration: none;  
}  
ul#galerie img {  
 border: 0px;  
 margin: 0px;  
}  
.Bildzuschrift {  
 position: absolute;  
 top: 0px;  
 width: 150px;  
 margin-left: 510px;  
 font-size: 9pt;  
 color: #666666;  
}  
  

Wer weiß Rat?

Gruß
dieselross

[LX]

Benutze entweder div statt span oder setze im CSS display:block.

Dann setze Breite und Höhe fest. Schließlich noch eine entsprechende Positionierung (entweder über float oder position:absolute) und Bjorn Starkimarm ist Dein Onkel ^_^

Gruß, LX

[dieselross]

Benutze entweder div statt span oder setze im CSS display:block.

Dann setze Breite und Höhe fest. Schließlich noch eine entsprechende Positionierung (entweder über float oder position:absolute) und Bjorn Starkimarm ist Dein Onkel ^_^

Gruß, LX

Hmmm. div verbietet sich, da das span in einem anderen span geschachtelt ist. display: block hatte ich versucht. Das hat nichts geändert. position: absolute ist gesetzt (siehe css) und wer, bitte ist Bjorn Starkimarm?

Gruß
dieselross

[LX]

Ein von Terry Pratchett erfundener Zwerg, der jedem Discworld-Fan bekannt ist. Sei's drum. Wie wäre es, wenn Du dem a ein display: block; float:left; und width/height mitgibst?

Gruß, LX

[dieselross]

Ein von Terry Pratchett erfundener Zwerg, der jedem Discworld-Fan bekannt ist. Sei's drum.

Hmmm. Eigentlich bin / war ich bekennender Terry-Pratchett-Fan, habe aber lange nichts neues mehr gelesen. Ich vermute, Bjorn Starkimarm ist jüngeren Datums?

Wie wäre es, wenn Du dem a ein display: block; float:left; und width/height mitgibst?

... dann flackert's und zerhaut mir das komplette Layout. Ich glaub' ich bleib' bei meinen "<br>'s". Trotzdem danke.

Gruß
dieselross

[LX]

Hinsichtlich floats musst Du natürlich die gängigen Browserfehler vom MSIE berücksichtigen...

Die Phrase "...und Bjorn Starkimarm ist Dein Onkel" entstammt nebenbei dem doch inzwischen etwas älteren Scheibenwelt-Roman "Wachen, Wachen!" und wird dort ziemlich am Anfang des Buches von einem Herrn Varneschi, der sich mit dem Zwergenkönig (Dekza-Knick) von Lancre unterhält, geäußert.

Gruß, LX

[Beat]

und wer, bitte ist Bjorn Starkimarm?

Des vorgen Berates Denkkrücke als Platzhalter für seine mangelnde Mitgliedschaft.

mfg Beat

[josh]

Hallo,

Wenn die Breite jedes Bildes bekannt ist, kannst du dem <span>, der die Bildbeschreibung enthält, folgende Formatierung geben: width:(breite); display:block; overflow:hidden; (die Breite praktischerweise direkt als style-Attribut, der Rest bei deinem übrigen CSS).

Kennst du die Breite nicht bzw. kannst sie nicht für jedes Bild einzeln angeben, schau dir mal bitte diese Lösung von mir an. Sie ist vielleicht nicht ganz optimal, aber sie funktioniert.

Gruß

[dieselross]

Wenn die Breite jedes Bildes bekannt ist, kannst du dem <span>, der die Bildbeschreibung enthält, folgende Formatierung geben: width:(breite); display:block; overflow:hidden;

Das ändert leider nix

Schau dir mal bitte diese Lösung von mir an. Sie ist vielleicht nicht ganz optimal, aber sie funktioniert.

Hmmm. Hier leider nicht. Ich denk' ich bleib' bei meinen "<br>'s". Trotzdem danke

Gruß
dieselross

[josh]

Hallo,

Ich habe mal den von dir geposteten Code-Ausschnitt ausprobiert und gesehen, dass ich dich falsch verstanden habe. Ich dachte, der Beschreibungstext steht unter dem Bild und soll nicht breiter werden als dieses - in Wirklichkeit liegt er ja ein Stückweit daneben. Tut mir Leid.

Allerdings verstehe ich jetzt nicht ganz, wo dein Problem liegt. <br> ist in diesem Fall doch gut angebracht, weil du damit in deinem Beispiel den Text logisch auftrennst. Was hast du mit

Das muß aber doch auch eleganter gehen!

gemeint?

Gruß

[ChrisB]

Hi,

Außerdem soll eine Bildzuschrift angezeigt werden. Das klappt auch ganz gut, nur läuft diese zu breit.

Die Information, welche Masze eine Postkarte haben darf, findest du unter http://www.deutschepost.de/

MfG ChrisB