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.

[jomal]

Tja, eigentlich schon Alles gesagt.
Aber das mit der Groß-/Kleinschreibung kann ich nur bestätigen, die Leerzeichen ebenso.
Auf dem heimischen PC läuft Alles prima, manchmal dann auch im Netz. Aber anscheinend passiert beim Routing ab und zu, dass eben die Kleinschreibung zwingend erforderlich ist.
Bei meiner Page ist es mal passiert, dass ich sie mehrfach aufgerufen habe, ohne Probleme, plötzlich fehlten Dateien.
Da ist Phase5 leider zu sehr Windows orientiert, wäre mal 'ne Überlegung, ihn mehr an Unix anzubinden.
Und für alle, die HTML programmieren:
die Unix (und auch Linux) Konventionen, die man wissen sollte:

keine Leerzeichen
nur Kleinschreibung

macht die Sache eigentlich einfach.

Gruß von Jomal

Nee, klappt nicht. Ich hab mal einen Screenshot angehängt, wie es jetzt aussieht. Anscheinend greift die class der gallery nur noch beim ersten Bild. Außerdem will ich alle drei nebeneinander zentriert haben und nicht einen ganz links. Deswegen denke ich mal, dass float:left nicht geeignet ist.



Claudia

Und wie wäre es mit der verpöten Tabelle?
Scheint mir am einfachsten zu sein.

Gruß, jomal