CSS, ich steh auf'm Schlauch... Einstellungen

[claudettina]

Beispiel

Wie schaffe ich es, dass ich genau unter die Thumbnails auch noch Bildunterschriften habe? Wenn ich div-container nehme, stehen die Unterschriften untereinander. Bei float:left steht eine an der linken Seite. Ich steh echt auf'm Schlauch - ich brauch einen Denkanstoß...

Ansonsten habe ich die Seite jetzt komplett ohne Tabellen *grins*, und den Scroller sieht man auch wieder

Claudia

[stwie]

Beispiel

Wie schaffe ich es, dass ich genau unter die Thumbnails auch noch Bildunterschriften habe? Wenn ich div-container nehme, stehen die Unterschriften untereinander. Bei float:left steht eine an der linken Seite. Ich steh echt auf'm Schlauch - ich brauch einen Denkanstoß...

Ansonsten habe ich die Seite jetzt komplett ohne Tabellen *grins*, und den Scroller sieht man auch wieder

Claudia

Ich würde ´mal vorschlagen, dass für jedes Bild ein separater div-Container notwendig ist, dann klappt es auch mit den Unterschriften.

Beispiel:

QUELLTEXT

<div id="content">
<p>Our day trips - please choose, where you want to go:</p>
<div class="gallery">
<div class="bildcontainer"> <!--  Das ist neu -->
    <a href="linum.html">
                 <img src="tnLinum 023.JPG" alt="Linum"></a>
            <span>Linum</span>
</div>
<div class="bildcontainer"> <!--  Zweites Bild -->
        <a href="dresden.html">
                  <img src="tnDresden 26.JPG" alt="Dresden 2005"></a>
                        <span>Dresden</span>
</div>
<!--  Weitere Bilder -->
</div>
</div>

Wenn die div.bildcontainer nun etwas länger sind, als die Bilder, z.B. width 100, height 120, dann sollte der Text direkt unter dem Bild erscheinen. Weitere Formatierungen (zentrirt etc) sind möglich. Wichtig ist nur, dass die div.bildcontainer die Werte float:left zugeordnet bekommen.
im übrigen würde ich die Breiten- und Höhenangaben der Bilder in der CSS-Datei definieren, dann wird der html-code schlanker und besser lesbar. Ich habe das oben gleich einmal gemacht.
Die zugehörige CSS-Schnippel lauten:

QUELLTEXT

div.bildcontainer
{
       float:left;
       margin:0;
       border:0;
       padding:0;
       width:100px;
       heigth:120px;
}

div.bildcontainer img
{
       border:0;
       width:100px;
       heigth:100px;
}

Zuletzt noch ein Tip. Nimm um aller User-Willen die Leerzeichen aus den Dateinamen! Ich fürchte, dass sonst bei den meisten Providern Schluss mit lustig ist. Außerdem aufgepasst mit der Groß- und Kleinschreibung bei Dateinamen. Bei manchem Provider wird das alles "klein" gemacht, mit der Folge, dass die Dateien nicht mehr aufrufbar sind.