Bildergalerie: Bild "hüpft" bei mehrzeiligem Text

Allgemeine Diskussionen über WebYep
Post Reply
CrumberNuncher
Posts: 7
Joined: Wed Nov 04, 2009 11:17 pm

Bildergalerie: Bild "hüpft" bei mehrzeiligem Text

Post by CrumberNuncher » Tue Nov 10, 2009 10:52 pm

Hallo!

Wie verhindere ich das die Bilder in einer Galerie springen, so bald eine Textunterzeile sich von den anderen durch die Menge der Zeilen unterscheidet?

Ich habe das schon versucht:

.WebYepGalleryContainer td {
width:90px;
height:100px;
}

.WebYepGalleryText
{
text-align: bottom;
}

.WebYepGalleryImage img
{
margin-bottom:20px;
align:bottom;
}

http://tinyurl.com/ye99wg3

Ach, und wie begrenze ich die Breite einer Thumbnail-Zelle? Die td mit 90px zu begrenzen klappt nicht,
ebenso dem .WebYepGalleryText eine Breite zu geben...

Bitte um einen Hinweis, vielen Dank, wie immer!!! :wink: :oops:
Attachments
lightbox.jpg
lightbox.jpg (27.33 KiB) Viewed 1980 times

johannes
Objective Development
Objective Development
Posts: 815
Joined: Fri Nov 10, 2006 4:39 pm
Contact:

Re: Bildergalerie: Bild "hüpft" bei mehrzeiligem Text

Post by johannes » Tue Dec 01, 2009 4:22 pm

Hier ist ein Code-Beispiel, in dem die Bilder immer oben anliegen und somit auf gleicher Höhe sind, egal wie lang der Bild-Text ist.
Außerdem haben hier die Tabellen-Zellen und die Bilder einen Rahmen, Bilder und Text sind horizontal zentriert und der Text ist etwas vom Bild abgesetzt (1em).

Code: Select all

<style type="text/css">
<!--
table.WebYepGalleryContainer {
   border-collapse: collapse;
}

table.WebYepGalleryContainer td {
   text-align: center;
   vertical-align: top;
   border: 1px solid grey;
   padding: 10px;
}

.WebYepGalleryImage img {
   border-left: 1px solid grey;
   border-top: 1px solid grey;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
}

.WebYepGalleryText {
   margin-top: 1em;
   font-size: 0.8em;
}
-->
</style>


Die Zellen werden immer dann Breiter als angegeben, wenn sie etwas enthalten, dass nicht umbrochen werden kann.

Post Reply