[CSS] float Problem

[tophirsch]

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):

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

 

[fragkp]

Ich hoffe dir hilft dies

You do not have permission to view link please Anmelden or Registrieren

Mein Änderungen:
- "field-title" div zu h3
- unnütze margins und paddings entfernt
- li Elementen display: inline-block gegeben

Fertig

 

[tophirsch]

Ja, das ist schon fast, was ich will und soweit war ich zwischendurch beim Rumprobieren auch schon mal.

Das Verhalten ist nun so, wie oben zum Schluss beschrieben. Die Galerien rutschen komplett in die nächste Zeile, wenn kein Platz mehr ist. Die Zeile soll aber komplett mit Bildern gefüllt werden, bevor ein Umbruch gemacht wird. Ich hoffe ich hab mich deutlich ausgedrückt

z.B. in deinem Fiddle: Verkleinere die Breite soweit, dass die zweite "Galerie" in die nächste Zeile rutscht. Jetzt bilden 2 und 3 eine Zeile und die 1 sitzt in der ersten Zeile, dahinter ist aber noch platz in der Zeile. Dieser Platz sollte noch mit Bildern aus 2 aufgefüllt werden, nur die Bilder von 2, die nicht mehr hinpassen sollen in die nächste Zeile.

Also so wie hier:

You do not have permission to view link please Anmelden or Registrieren

und nicht so:

You do not have permission to view link please Anmelden or Registrieren

Möglicherweise muss man auch am Markup was ändern?

 

[fragkp]

Dafür könntest du zb.

You do not have permission to view link please Anmelden or Registrieren

benutzen, wenn mit JavaScript benutzen kannst. Dann gibst du jeden a-Element eine Umrandung als Markierung der Zugehörigkeit. Eine andere Möglichkeit fällt mir auch gerade nicht ein.

 

[Kugelfisch]

Eine Möglichkeit wäre, alle Elemente bis auf die inneren a-Elemente als [kw]inline[/kw] zu darzustellen und die a-Elemente als [kw]inline-block[/kw] - siehe z.B.

You do not have permission to view link please Anmelden or Registrieren

. Das Problem dabei ist allerdings, dass sich dann die Titel nicht mehr elegant positionieren lassen. Insbesondere bei Titeln, welche breiter sind als ein einzelnes Bild, führt dieser Ansatz zu Problemen.

 

[tophirsch]

@fragkp
Danke, aber js möchte ich dafür eigentlich nicht benutzen.


@Kugelfisch
Danke für diese Lösung, das mit den Titeln ist natürlich blöd. Zumal es eigentlich schon der Regelfall ist, dass die Titel länger als eine Bildbreite sind.



Hmpf, hätte nicht gedacht, dass das so problematisch wird. Da muss ich erst nochmal schauen, ob ich das evtl. doch ganz anders mache...
Aber danke für eure Hilfe!

 

[LemonDrops]

Mach's so:

You do not have permission to view link please Anmelden or Registrieren

Listen-Elemente solltest du dir übrigens für echte Listen vorbehalten, sprich vor allem Text. Wenn man die Maßstäbe so eng setzt, ist auch keine Folge von Absätzen, eine Liste mit Absätzen, also müsste man praktisch alles in Listen machen.

 

[dexter]

Mach's so:

[...]

vs:

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.

(Hervorhebung von mir)

 

[LemonDrops]

Genau das passiert dort. Drei Zeilen, fünf Galerien mit Überschriften.

 

[tophirsch]

Wie Dexter schon richtig erkannt hat, ist das Verhalten in deinem Fiddle nicht ganz das, was ich eigentlich wollte. Oder sieht das nur bei mir so aus?

You do not have permission to view link please Anmelden or Registrieren

Sobald der Platz zu eng wird, rutscht immer die gesamte Galerie in die nächste Zeile. In der 2. Zeile wäre hier z.B. noch platz für die 3 Bilder der nächsten Galerie.

Es handelt sich halt nicht um eine reine Bilder-Seite.

Ich habe wiederkehrende Veranstaltungen, die an unterschiedlichen Terminen stattfinden können. Am Ende einer Beschreibungsseite der jeweiligen Veranstaltung möchte ich die Bilder der letzten paar Termine(die bereits stattgefunden haben) kompakt, sozusagen als Vorschau, anzeigen.
Die Bilder der Veranstaltung wandern pro Termin immer getrennt in eine Galerie. Also bspw. Workshop A am 07.03.14 in eine Galerie, Workshop A am 21.04.14 ist eine andere Galerie. Nun werden aber nicht jedes mal hunderte Bilder geschossen, deshalb kann es sein, dass in einer Galerie eben mal nur 2 oder 3 Bilder sind.

Da es sich bei verschiedenen Galerien immer um die selbe Veranstaltung handelt und die Bilder ja auch auf der zugehörigen Veranstaltungs-Seite angezeigt werden, überlege ich jetzt, als Titel nur das Datum anzeigen zu lassen. Dann schauen, dass der Titel nicht breiter wird als ein Bild, sodass Kugefischs Ansatz verwendbar wäre.

Oder jmd hat vielleicht ne völlig andere Idee...

 

[dexter]

Genau das passiert dort. Drei Zeilen, fünf Galerien mit Überschriften.

In Deinem Beispiel passiert genau das selbe wie in den im ersten Beitrag bemängelten Lösungen. Nur mit viel mehr, viel unübersichtlicherem und teilweise nutzlosem Code.

 

[Kugelfisch]

Ich hätte noch einen alternativen Vorschlag, bei welchem eine Minimalbreite für die Beschreibungstexte vergeben werden kann, welche beim Umbruch respektiert wird:

You do not have permission to view link please Anmelden or Registrieren

 

[LemonDrops]

Was benutzt ihr für Browser? Bei mir sieht es im Chrome und im Firefox gut aus, der IE schafft es auch.

 

[Kugelfisch]

Bei mir sieht es im Chrome und im Firefox gut aus, der IE schafft es auch.

Allerdings nur, solange die Breite fix ist und die Bilder so auf die div-Elemente aufgeteilt werden, dass kein Umbruch innerhalb eines div-Elements erforderlich ist. Das war jedoch ursprünglich gefordert (die width-Angabe lässt sich in meinem Beispiel ohne negative Auswirkungen entfernen).

 

[LemonDrops]

Ah ok, gut, das sollte ja auch nur'n Beispiel sein

 

[tophirsch]

You do not have permission to view link please Anmelden or Registrieren

Sieht gut aus!
Könnte man es auch so machen, dass der Umbruch schon erfolgt, wenn der Titel nicht mehr mit hin passt?
Ich meine so:

You do not have permission to view link please Anmelden or Registrieren

Das wär oberkrone!


Sonst muss ich halt die Länge des Titel beschränken, damit er nicht länger als eine Bildbreite wird.

 

[Coca-Cola]

Du könntest mit ein wenig JavaScript die Position des rechten Rands der Überschrift ermitteln und diese mit der Position des rechten Rands des übergeordneten divs vergleichen. Wenn der Wert größer ist, kannst du den betreffenden Listenpunkt umbrechen lassen.

 

[tophirsch]

Habe oben schon mal geschrieben, dass ich dafür kein js verwenden möchte, aber trotzdem danke. Ich versuche eigentlich immer zu vermeiden, js fürs Design zu missbrauchen, dafür gibt's CSS.


Die Titel werden jetzt in der Länge beschränkt und dann nehm ich Kugelfischs Variante.