nicht angemeldet
Bilder in einer Galerie ausrichten?
hallo,
ich hätte eine kurze frage:
ich habe eine bildergalerie auf der homepage, in der man auf die thumbnails klickt, um das größere bild zu sehen.
das hab ich so gestaltet, dass ich einfach immer ein image ans andere hänge, wenn die zeile dann voll ist, gehts eben in der nächsten weiter.
mein problem:
in den vollen zeilen spannen sich die bilder so, dass sie genau untereinander sind.
in der letzten, nicht vollen zeile, funktioniert das nicht. da ist der abstand zwischen den bilder viel kleiner.
hat jemand eine idee, wie man das ändern könnte?
danke im voraus,
melanie
-
Hi
machs och mit ner tabelle.<table>
<tr>
<td class="thumbnail">bild</td>
<td class="thumbnail">bild</td>
<td class="thumbnail">bild</td>
<td class="thumbnail">bild</td>
</tr>
.
.
.
.
.
.
.
.
.
<!-- letzte seile: -->
<tr>
<td class="thumbnail">bild</td>
<td class="thumbnail">bild</td>
<td class="thumbnail"> </td>
<td class="thumbnail"> </td>
</table>definiere nun in einer deiner css-dateien, dass diese zellen class="thumbnail" alle die gleiche höhe und breite haben, und alles genau in der mitte ausgerichtet ist.
tschüss ichen
-
hallo zurück,
danke für die schnelle antwort
machs doch mit ner tabelle.
ich wollte bloß eigentlich keine tabelle benutzen, weil manche ja ne größere auflösung haben und dann eben auch mehr zu sehen bekommen (zum beispiel ich).
ohne tabelle keine idee?
ciao,
melanie-
Hallo,
ich wollte bloß eigentlich keine tabelle benutzen,
ich denke, dieses Vorhaben ist gut. Zum Nachdenken wäre ein bißchen Quelltext HTML und/oder CSS hilfreich.
Beste Grüße
Viennamade-
hallo zurück,
ich denke, dieses Vorhaben ist gut. Zum Nachdenken wäre ein bißchen Quelltext HTML und/oder CSS hilfreich.
vielleicht steh ich ja auf der leitung, oder was heißt das denn?
natürlich verwende ich viele tabellen, aber da wollt ich nun keine.danke, melanie
-
Hallo,
ich denke, dieses Vorhaben ist gut. Zum Nachdenken wäre ein bißchen Quelltext HTML und/oder CSS hilfreich.
vielleicht steh ich ja auf der leitung, oder was heißt das denn?
natürlich verwende ich viele tabellen, aber da wollt ich nun keine.Dann verstehe ich nicht wie Du unregelmäßige Abstände bekommst, bei mir funktioniert der Quelltext unten, d.h. alle Abstände sind gleich groß.
Gruß
Viennamade<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Template 2-spaltig</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
img {height:31px;width:88px;}
-->
</style>
</head>
<body>
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="" />
</body>
</html>-
hallo viennamade,
tja, der quelltext sieht für mich aber ähnlich aus, oder?
<a href="picsgalerie/fasching1.jpg" target="neu"> <img border="0" src="thumbs/fasching1.jpg"></a>
<a href="picsgalerie/fasching10.jpg" target="neu"> <img border="0" src="thumbs/fasching10.jpg"> </a>
<a href="picsgalerie/fasching11.jpg" target="neu"> <img border="0" src="thumbs/fasching11.jpg"> </a>
<a href="picsgalerie/fasching12.jpg" target="neu"> <img border="0" src="thumbs/fasching12.jpg"> </a>
...der einzige unterschied ist, dass ich höhe und breite der thumbs nicht im img-tag drinstehen hab. mal probieren, obs daran liegen kann. kommt mir aber komisch vor...
könntest du mir bitte mal einen link zu deiner seite schicken, damit ich mir das mal live anschauen kann? wär nett..gruß,
melanie-
Hallo,
tja, der quelltext sieht für mich aber ähnlich aus, oder?
Nicht ganz, Du hast a-Elemente drinnen, ich hatte ausschließlich img-Elemente.
<a href="picsgalerie/fasching1.jpg" target="neu"> <img border="0" src="thumbs/fasching1.jpg"></a>
Der Abstand zwischen dem einleitenden a-tag und dem img-Element, also
..."neu">_<img ...
sollte weg.
Eventuell hast du auch Leerzeichen nach dem a-Element.der einzige unterschied ist, dass ich höhe und breite der thumbs nicht im img-tag drinstehen hab. mal probieren, obs daran liegen kann. kommt mir aber komisch vor...
Hängt wohl davon ab, ob Deine Bilder alle gleicher Größe sind und wenn nicht, wieviele Bilder es sind.
könntest du mir bitte mal einen link zu deiner seite schicken, damit ich mir das mal live anschauen kann? wär nett..
Nein, habe keine Seite. Hast Du eine?
Gruß
Viennamade-
hallo zurück,
tja, der quelltext sieht für mich aber ähnlich aus, oder?
Nicht ganz, Du hast a-Elemente drinnen, ich hatte ausschließlich img-Elemente.ja, logisch, ich habe a-tags drin - brauch ich ja aber auch, um auf die großen bilder zu verweisen.
Der Abstand zwischen dem einleitenden a-tag und dem img-Element...
den abstand möchte ich behalten, damit die bilder nicht so aneinander kleben
bildgröße hab ich nicht angegeben, alle bilder sind gleich groß (80x80). auch wenn ichs angebe, ändert sich nichts (hab ich eigentlich auch nicht erwartet)
Nein, habe keine Seite. Hast Du eine?
keine eigene, aber bin mit der schulhomepage befasst (www.realschule-ansbach.de)
tja, bin ratlos...
mfg, melanie-
Hi,
da Deine Bilder alle die gleiche Größe haben, sparst Du Dir über die Angabe der Dimensionen in CSS einiges an Quelltext.
Deine Methode, die Bilder einfach aneinanderzusetzen, finde ich optimal. Was fehlt, ist ein margin für die Bilder und ggfls. auch für den ganzen Bereich, den die Bilder einnehmen zu definieren. Es kann außerdem nicht schaden, die Bilder zu zentrieren. Sieh Dir doch einfach mal http://www.1ngo.de/foto/dionysos.html an; hier sorgt ein simples img { width:75px; height:50px; border:1px solid #39C; margin:15px; } für die Formatierung und insb. die Abstände. Oder etwas anders formatiert: http://www.td-rot-weiss-duesseldorf.de/formationen/impressionen-chicago.html.freundliche Grüße
Ingo
-
-
-
-
-
-
-
Hi
oder nimm einen <div>um alle thumbs und zentriere diesen. Dann stehen die bilder unten zwar genau in der mitte, aber es sieht nicht mehr so komisch aus. was anderes fällt mir auf die schnelle nicht ein.
tschüss ichen
-
-