unter Galeriebild einen Text setzen

[xpfreund]

Hallo,

Ich erstelle mit Php

<code lang=php>
$bilder=glob("Bilder/Galerie/*.jpg");
$anzahl=count($bilder);               // Bilder im Ordner zählen
for ($i=2;$i <= $anzahl;$i++) {
echo "<img class="galbild" src="Bilder/Galerie/$i.jpg" border="0" height=200px width=250px  />\n";}
</code>

eine einfache Galerie.
In ".galbild" ist ein padding für den Abstand. Je nach Fenstergröße bekomme ich damit bis zu 3 Bilder nebeneinander, ansonsten gehts automatisch abwärts.
Wie schreibe ich nun noch einen Text unter jedes Bild?
Wenn ich einfach in der Schleife nach dem Bild noch ein echo einfüge, wird der
damit generierte Text rechts unter dem Bild angezeigt, wenn ich ihn center floaten lasse auch, sonst entweder am Anfang oder Ende der Zeile (right, left).

Vielleicht habt ihr ja auch noch eine Antwort auf meinen anderen Thread?

gruß aus Senftenberg am See

[Siechfred]

Wie schreibe ich nun noch einen Text unter jedes Bild?

Du wirst Bild und Bildunterschrift in ein Element packen müssen, eine Liste bietet sich hier an:

<ul>  
  <li>  
    <p><img src=" " alt="..." /></p>  
    <p>Bildunterschrift</p>  
  </li>  
<!-- weitere LI-Elemente -->  
</ul>

Und das CSS:

ul { list-style-type:none; }  
li { width:20em; float:left; }

Den CSS-Feinschliff überlasse ich Dir, das ist nicht unbedingt meine Baustelle :)

Siechfred

[xpfreund]

Hallo,

Wie schreibe ich nun noch einen Text unter jedes Bild?

Du wirst Bild und Bildunterschrift in ein Element packen müssen, eine Liste bietet sich hier an:

<ul>

<li>
    <p><img src=" " alt="..." /></p>
    <p>Bildunterschrift</p>
  </li>

<!-- weitere LI-Elemente -->
</ul>

>   
> Und das CSS:  
>   
> ~~~css

ul { list-style-type:none; }  

> li { width:20em; float:left; }

Den CSS-Feinschliff überlasse ich Dir, das ist nicht unbedingt meine Baustelle :)

Ich hab das jetzt so gemacht:
CSS

  
img.galbild {  
 padding-right: 10px;  
}  
  
ul.bilder {  
list-style-type:none;  
padding: 0px;  
}  
li.picture { width:20em }  
p.liste {  
 line-height: 80%;  
 padding: 0px;  
   text-align: center;  
}  

PHP

  
for ($i=2;$i <= $anzahl;$i++) {  
echo "<ul class=\"bilder\"><li class=\"picture\">\n";  
echo "<p><img class=\"galbild\" src=\"Bilder/Galerie/$i.jpg\" border=\"0\" height=200 width=250 alt=\"Bild $i\" /></p>\n";  
echo "<p class=\"liste\">Bild $i</p></li></ul>";  
}  

Damit wird jedes Bild untereinander angezeigt und nicht mehr nebeneinander.
Habe verschiedene Verschachtelungen mit divs und den Listen probiert. Aber das entscheidende war nicht dabei. Über einen float kam genau das richtige Ergebnis, allerdings wurde der link

  
<p class="topper">  
<a href="#startseite" id="oben">nach oben</a>  
</p>  

ganz rechts oben angezeigt (1 Zeile tiefer), wodurch der abschließende div in dem das gesamte angezeigt wird, schon daoben und nicht am Ende der Bilder
geschlossen. Ich glaube mittlerweile, dass ich um Tabellen für die Bilder nicht mehr rum komme. Wenns nicht gerade noch was anderes gibt.

gruß aus Senftenberg am See

[xpfreund]

Hallo,

die Tabellen haben aber den Nachteil, dass man dann wieder javascriptmäßig abfragen müsste, ob noch ein Bild hinpassen würde.

gruß aus Senftenberg am See

[Siechfred]

Über einen float kam genau das richtige Ergebnis, allerdings wurde der link

<p class="topper">
<a href="#startseite" id="oben">nach oben</a>
</p>

> ganz rechts oben angezeigt (1 Zeile tiefer), wodurch der abschließende div in dem das gesamte angezeigt wird, schon daoben und nicht am Ende der Bilder geschlossen.  
  
Ehrlich gesagt weiß ich jetzt nicht, wo Du den Link genau platzieren willst. Kann man sich das mal irgendwie online ansehen? Ansonsten könnte vielleicht clear helfen.  
  
Siechfred

-- 
[Coping With Scoping (Deutsche Übersetzung)](http://aktuell.de.selfhtml.org/artikel/cgiperl/scoping/index.htm)  
Als Moderator habe ich keinerlei Humor, von dem ich wüsste.

[xpfreund]

Hallo,

Über einen float kam genau das richtige Ergebnis, allerdings wurde der link

<p class="topper">
<a href="#startseite" id="oben">nach oben</a>
</p>

> > ganz rechts oben angezeigt (1 Zeile tiefer), wodurch der abschließende div in dem das gesamte angezeigt wird, schon daoben und nicht am Ende der Bilder geschlossen.  
>   
> Ehrlich gesagt weiß ich jetzt nicht, wo Du den Link genau platzieren willst. Kann man sich das mal irgendwie online ansehen? Ansonsten könnte vielleicht clear helfen.  
  
Ist nur offline.  
Der Link soll unter die Bilder, also ans Ende der Seite, damit der Footer die Seite beenden kann. Bei dem float wird der Link halt rechts neben das letzte Bild der ersten Zeile gesetzt und der Footer schließt sich an. Die Bilder schieben sich nach unten über den Footer hinaus.  
  
  
gruß aus [Senftenberg](http://www.senftenberg.de/) am [See](http://www.senftenberger-see.de/)

[Siechfred]

Der Link soll unter die Bilder, also ans Ende der Seite, damit der Footer die Seite beenden kann. Bei dem float wird der Link halt rechts neben das letzte Bild der ersten Zeile gesetzt und der Footer schließt sich an. Die Bilder schieben sich nach unten über den Footer hinaus.

Dann würde ich in der Tat ein wenig mit clear experimentieren.

Siechfred

[xpfreund]

Hallo,

Der Link soll unter die Bilder, also ans Ende der Seite, damit der Footer die Seite beenden kann. Bei dem float wird der Link halt rechts neben das letzte Bild der ersten Zeile gesetzt und der Footer schließt sich an. Die Bilder schieben sich nach unten über den Footer hinaus.

Dann würde ich in der Tat ein wenig mit clear experimentieren.

Glaub ich auch, dass das damit klappt. Aber dafür muss ich die fast richtige Darstellung erstmal wieder reproduzieren.

gruß aus Senftenberg am See