tophirsch
erster Hirsch am Platze
Nabend ngb!
Sorry für den wenig aussagekräftigen Titel, mir is nix Umschreibendes eingefallen.
Ich möchte auf einer Seite mehrere Bilder als Thumbnails anzeigen lassen. Die Bilder sind immer jeweils Bildergalerien zugeordnet, die eine unterschiedliche Anzahl Bilder enthalten können.
Nunn will ich die einzelnen Thumbnails immer Zeilenweise anzeigen und den Titel der zugehörigen Bildergalerie darüber. Es sollen immer so viele Bilder in einer Zeile angezeigt werden, wie hinpassen, egal ob sie zur gleichen Galerie gehören oder nicht.
Bild zur Verdeutlichung(so solls werden):
Aalso mein Markup sieht in etwa so aus:
[src=html4strict]<ul>
<li class="row-odd">
<div class="field-title">titel1</div>
<div class="field-gallery-pics">
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<!--usw.-->
</div>
</li>
<li class="row-even">
<div class="field-title">titel2</div>
<div class="field-gallery-pics">
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<!--usw.-->
</div>
</li>
<!--usw.-->
</ul>[/src]
Ein li-Element ist quasi immer eine Bildergalerie, die unterschiedlich viele img-Elemente enthalten kann.
Stylesheet sieht etwa so aus:
[src=css].row-odd .img{
background-color: #9d9d9d;
}
li {
list-style: none inside none;
//display: inline;
//float:left;
}
.img {
//display: inline-block;
float: left;
padding: 6px;
}
li:hover .field-gallery-pics .img {
background-color: #cccccc;
}
li:hover .img:hover {
background-color: #777;
}[/src]
Die Spielereien mit der Farbe seien erstmal egal.
Dummerweise verrutschen mir nun die einzelnen li's immer und sind nicht in einer Zeile.
Das sieht dann so aus:
Wenn ich nun aber die li-Elemente floate, dann werden die wie ein Block behandelt und es beginnt eine neue Zeile nicht per Bild sondern die ganze "Galerie" wird umgebrochen. Allerdings rutschen die einzelnen Bilder korrekt in die nächste Zeile, wenn die Gelerie zu lang für die Zeile ist:
Hab schon wild alle Kombinationen rumprobiert, aber bekomm es einfach nicht gebacken.
Ich hoffe einer von euch kann mir helfen.
...kann ja wohl nicht zu schwer sein, ich bin nur wieder zu blöd
Sorry für den wenig aussagekräftigen Titel, mir is nix Umschreibendes eingefallen.
Ich möchte auf einer Seite mehrere Bilder als Thumbnails anzeigen lassen. Die Bilder sind immer jeweils Bildergalerien zugeordnet, die eine unterschiedliche Anzahl Bilder enthalten können.
Nunn will ich die einzelnen Thumbnails immer Zeilenweise anzeigen und den Titel der zugehörigen Bildergalerie darüber. Es sollen immer so viele Bilder in einer Zeile angezeigt werden, wie hinpassen, egal ob sie zur gleichen Galerie gehören oder nicht.
Bild zur Verdeutlichung(so solls werden):
You do not have permission to view link please Anmelden or Registrieren
You do not have permission to view link please Anmelden or Registrieren
Aalso mein Markup sieht in etwa so aus:
[src=html4strict]<ul>
<li class="row-odd">
<div class="field-title">titel1</div>
<div class="field-gallery-pics">
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<!--usw.-->
</div>
</li>
<li class="row-even">
<div class="field-title">titel2</div>
<div class="field-gallery-pics">
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<a href="#"><img></img></a>
<!--usw.-->
</div>
</li>
<!--usw.-->
</ul>[/src]
Ein li-Element ist quasi immer eine Bildergalerie, die unterschiedlich viele img-Elemente enthalten kann.
Stylesheet sieht etwa so aus:
[src=css].row-odd .img{
background-color: #9d9d9d;
}
li {
list-style: none inside none;
//display: inline;
//float:left;
}
.img {
//display: inline-block;
float: left;
padding: 6px;
}
li:hover .field-gallery-pics .img {
background-color: #cccccc;
}
li:hover .img:hover {
background-color: #777;
}[/src]
Die Spielereien mit der Farbe seien erstmal egal.
Dummerweise verrutschen mir nun die einzelnen li's immer und sind nicht in einer Zeile.
Das sieht dann so aus:
You do not have permission to view link please Anmelden or Registrieren
Wenn ich nun aber die li-Elemente floate, dann werden die wie ein Block behandelt und es beginnt eine neue Zeile nicht per Bild sondern die ganze "Galerie" wird umgebrochen. Allerdings rutschen die einzelnen Bilder korrekt in die nächste Zeile, wenn die Gelerie zu lang für die Zeile ist:
You do not have permission to view link please Anmelden or Registrieren
Hab schon wild alle Kombinationen rumprobiert, aber bekomm es einfach nicht gebacken.
Ich hoffe einer von euch kann mir helfen.
...kann ja wohl nicht zu schwer sein, ich bin nur wieder zu blöd
Drei Zeilen, fünf Galerien mit Überschriften.
