Anordnung der Bilder

[man0l0]

Ich bin gerade dabei, mir ein kleines Online Portfolio zu erstellen.

Zu diesem Zweck sollen die Bilder alle als Thumbnail mit definierter Breite x auf einer Seite gesammelt werden.

Jetzt hätte ich aber gerne, dass die Bilder immer mit gleichem Abstand gezeigt werden. Wie man auf dem Screenshot sehen kann, klappt das so aber nicht.

Hat mir jemand einen Tip, wie ich das beheben kann?
Ich nutze Wordpress und hab nur geringe html Kenntnisse.

Danke schon mal,
manolo

 

[falkgottschalk]

Samstag Morgen, genau der richtige Zeitpunkt zum Fehler-Raten.
Der einzige Abstand, der nicht den anderen entspricht, wäre der des "flachen" Fotos.
Dargestellt wird es aktuell wohl als Tabelle und - ganz ehrlich - finde ich die aktuelle Darstellung dann doch besser als wenn die Bilder wie Kraut und Rüben verteilt sind - und das wäre die Konsequenz, wenn sie unterschiedlich hoch sind und nach entsprechendem Pixelabstand das nächste dranklebt.

Wenn es unbedingt sein müsste: Nicht jedes Bild als Zelle der Tabelle, sondern halt 3-spaltig anordnen, jede Spalte hat nur eine Zelle, und darin jeweils die Bilder untereinander reinklatschen.

 

[man0l0]

Hallo Falk, vielen dank für deine samstagmorgenliche Antwort.
Ja, in diesem Fall ist das "flache" Foto das einzige, welches aus dem Rahmen fällt.
Vorgestellt hatte ich mir das ganze so:

click

Kannst du mir als Laien vielleicht noch mal näher erklären, wie ich die Tabelle auflöse und es 3spaltig anordne?

Vielen lieben Dank,
Manolo

EDIT:

Wobei, ich glaube du hast recht und es schaut ruhiger aus, wenn die Thumbnails alle gleich groß sind.
Und jedes damit auch die gleiche Gewichtung hat.

 

[falkgottschalk]

Von Wordpress habe ich leider keine Ahnung (nur von HTML) und das verlinkte Bild geht irgendwie nicht...

 

[man0l0]

Hm, bei mir funktioniert's.

Wie geht das denn in html?
Das kann ich ja in Wordpress dann genauso umsetzen.

 

[falkgottschalk]

<table>
<tr>
<td>
<img src="bild1.jpg" /> <br />
<img src="bild2.jpg" /> <br />
<img src="bild3.jpg" /> <br />
</td>

<td>
<img src="bild4.jpg"  /> <br />
<img src="bild5.jpg"  /> <br />
<img src="bild6.jpg"  /> <br />
</td>

<td>
<img src="bild7.jpg"  /> <br />
<img src="bild8.jpg"  /> <br />
<img src="bild9.jpg" width="200" height="141" /> <br />
</td>
</tr>
</table>

Das wäre die Minimal-Version.
Durch das "<br />" am Ende steht das nächste Bild unter dem vorherigen; als Abstandhalter kannst Du 2 davon nehmen.
Die Parameter "width="200" height="141"" brauchst Du nur dann, wenn die Bilder nicht schon in der richtigen Größe vorliegen.
Wo die Bilder bei Dir sind, musst Du allerdings selber wissen.

 

[man0l0]

super, probier ich mal aus. Danke!