CSS Bilder lückenlos positionieren.

[Rockhound]

Hallo Freunde,
ich möchte meine Galerie in Wordpress so gestalten wie bei dieser Webseite:
http://to-young.tumblr.com/

Jedes Thumbnail bekommt eine maximale Breite von 250 Pixeln. Da manche Hoch- und andere Querformat haben, würden so ja Lücken entstehen.

Bei der Galerie im Link ist das ja aber nicht so.
Dort wird jedes Bild mit position: absolute; ja eigentlich aufeinander gelegt. Und dann mit top: xxx px; & left: xxx px; schön nebeinander gelegt.

Ist das ein Javascript das dies bewerkstelligt?

Ich bräuchte da Hilfe weil ich keinen Schimmer habe wie die das dort geschafft haben.

Gruß
Daniel

 

[Znrl]

Da ist jedes Bild in nem eigenen <div> und ohne das jetzt genauer angeschaut zu haben vermutlich gefloatet? Immer float : left mein ich gesehen zu haben.
Musst du mal bei dir schauen, wie das da ist vtl. mit ner Liste <ul> und <li> oder Tabelle <table>, dadurch hast du dann immer den gleichen Platz reserviert. Wobei du bei ner Tabelle noch basteln könntest.

edit: Wie hast dus denn bisher? Quelltext?

Javascript brauchst du nicht das ist nur für zusätzliche Effekte.

 

[Daaron]

Ist das ein Javascript das dies bewerkstelligt?

Jep, HTML+CSS allein kann (noch) keine solchen nahtlosen Effekte erzeugen, absolut nicht möglich.
Ein kurzer Rechtsklick verrät mir: Hier wurde das Plugin "Masonry" verwendet.

 

[Znrl]

Ok hätte ich doch besser schauen sollen. Mit CSS ist sowas allerdings schon möglich zumal da die Bilder auch gleich breit sind.

Bspw. http://sickdesigner.com/demo/css-masonry/css-masonry.html

 

[Daaron]

Ja, NUR wenn die zu sortierenden Elemente gleich breit sind, sich in ihrer Größe nicht ändern (z.B.: Skalierung/Zoom on hover),...

Außerdem: http://caniuse.com/#search=column
Du verprellst damit mal eben gute 30% Marktanteil. Das ist nicht diskutabel. Und die Browser, die's können, haben fast alle nur partiellen Support.

Nene, n Masonry - Script ist hier die elegantere Wahl.

 

[Standar(D!)]

Hallo,
die Positionierung von Elementen geht nur und ausschließlich mit CSS.
Du könntest natürlich jedes Bild einer Galerie mittels absoluter Angabe ausrichten - dann müsstest du aber für jedes Bild die exakten Abstände ausrechnen und zuweisen. Hier erleichtert der Einsatz eines entsprechenden Frameworks die Arbeit.

Absolute Positionierung der einzelnen Bilder ist aber nicht nötig, um den von dir gewünschten Effekt zu erreichen:
Ein css-Layout mit der gewünschten Spaltenanzahl lässt sich durch float leicht erstellen. Die Spalten sollten die gleiche Breite aufweisen.
Wenn du die Bilder nun auf die Spalten verteilst, so dass die Elemente in der Spalte untereinander angeordnet sind, entstehen keine Lücken, sofern die Bilder alle die gleiche Breite besitzen (so wie auf der Beispielseite).

 

[Daaron]

Absolute Positionierung der einzelnen Bilder ist aber nicht nötig, um den von dir gewünschten Effekt zu erreichen:
Ein css-Layout mit der gewünschten Spaltenanzahl lässt sich durch float leicht erstellen. Die Spalten sollten die gleiche Breite aufweisen.

Reine Floats oder display:inline-block; reichen nicht, wenn die Bilder unterschiedliche Höhen haben, egal ob die Breite identisch ist. Sobald die Höhen sich unterscheiden hast du vertikale Freiräume. Dagegen hilft nur eine Masonry - Lösung, wahlweise in CSS3 Columns (was kaum ein Browser sauber beherrscht) oder schlichtweg JavaScript (was quasi jeder Browser kann).

 

[Standar(D!)]

[...]Sobald die Höhen sich unterscheiden hast du vertikale Freiräume.[...].

Wenn du die Bilder nun auf die Spalten verteilst, so dass die Elemente in der Spalte untereinander angeordnet sind, entstehen keine Lücken

Schau dir doch mal mein Beispiel an - kein Masonry, kein CSS3, kein Javascript - "reine floats". Die Bilder haben unterschiedliche Höhen, und dennoch kann ich hier keine Freiräume entdecken.

 

[Rockhound]

Ja ich sehe, kling auch logisch und nachvollziehbar. Nur gibt NextGen Gallery einfach alle Bilder direkt aus.. ich kann da nicht sagen: Fülle erst Spalte A, dann B, C etc...

Ich schau mir mal das Masonry an.

Danke Euch.

 

[Daaron]

Schau dir doch mal mein Beispiel an - kein Masonry, kein CSS3, kein Javascript - "reine floats". Die Bilder haben unterschiedliche Höhen, und dennoch kann ich hier keine Freiräume entdecken.

Bringt dir spätestens dann nix mehr, wenn du dein Template komplett als liquid layout lösen willst und keine feste Spaltenzahl hast. Außerdem scheiterst du, sobald du das Template nicht manipulieren kannst.
Das was du hier vorschlägst ist schlichtweg ein Schritt zurück in die Div-Hölle. Dann lieber n schlankes JavaScript als Fallback für ne CSS3-Lösung einbinden. jQuery oder Mootools bindet man ja eh in so ziemlich jedem Projekt ein, und für beide gibts Masonry-Plugins.

 

[Standar(D!)]

sorry , offtopic.

@Daaron:
Dieses Beispiel sollte lediglich deine Behauptung widerlegen, dass bei einem reinen css-Layout vertikale Freiräume entstehen.
Bedingungen wie liquides Layout, Spaltenanzahl, usw. hast du später hinzugedichtet - ändert aber nichts an der Tatsache, dass deine Aussage falsch ist.

Das was du hier vorschlägst ist schlichtweg ein Schritt zurück in die Div-Hölle.

Hast du dir den Quelltext überhaupt angesehen? In meinen Augen gibst du dich der Lächerlichkeit preis, wenn du hier von "div-Hölle" redest.

 

[Daaron]

Wieso? Du fügst Container hinzu, die keinerlei semantische Relevanz haben. Ein perfektes Layout würde nur aus semantisch relevanten Containern bestehen.