• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fake Float Center

cartman

Neues Mitglied
Hallo zusammen, ich habe eine Frage.

Und zwar möchte ich eine Bildergalerie erstellen, bei der Bilder "center floaten". Diese Anweisung gibt es natürlich nicht, allerdings funktioniert es durch text-align:center erst mal genau so wie ich es will. Sprich, Bilder stehen nebeneinander und wenn in einer Zeile kein Platz mehr ist, bricht das Bild zentriert in die nächste Zeile. Fluid eben ...

Nun ist mein Problem, dass das nur funktioniert, wenn die Bilder "nackt" auf der Seite stehen. Packe ich jedes Bild in ein Div, floaten sie nicht mehr und sitzen untereinander.

Aber seht selbst:
http://jsfiddle.net/fmym4wg4/

Ich hätte also gerne den Effekt wie im oberen Beispiel, gleichzeitig jedoch noch die Möglichkeit zB. Text über jedes Bild zu platzieren (daher in div-tags packen).

Gibt es da eine Lösung? Vielen Dank schon mal für jede Hilfe!
 
Werbung:
Hallo.

Auf die div solltest du komplett verzichten.
Bilder werden mit figure ausgezeichnet und der dazugehörige Text mit figcaption.

Alles weiter hat ja MrMurphy schon geschrieben.

Gruss
Elroy
 
Werbung:
Uff, daran hab ich gar nicht gedacht. Danke für die schnelle und ausführliche Beispiellieferung!

@Elroy
Wie man sicher schon gemerkt hat bin ich Neuling in Sachen HTML/CSS.
Daher eine Frage dazu. Ist das Figure-Tag denn schon etabliert genug (es ist ja noch relativ neu)?
Also läuft man nicht gefahr, dass leute mit alten IE Versionen damit probleme haben?
Das ist beim Div Tag soweit ich weiß nicht der Fall.
 
Hallo

Bilder werden mit figure ausgezeichnet und der dazugehörige Text mit figcaption.

Das stimmt. Ich war mir nur nicht sicher ob das figcaption-Element auch vor dem Bild stehen darf. Laut W3C darf es als erstes oder letztes Element im figure-Element stehen. Dann ist die Lösung damit besser:

http://foreninfo.bplaced.net/seiten...0_18_cartman_02_bilder_mit_text_anordnen.html

Also läuft man nicht gefahr, dass leute mit alten IE Versionen damit probleme haben?

Nein. Probiere es einfach mal aus.

Gruss

MrMurphy
 
Hab es ausprobiert. Funktioniert einwandfrei. Danke auch für den Tip mit Figure. Ihr habt mir beide sehr geholfen!
 
Werbung:
Jetzt muss ich doch noch mal eine Frage stellen bzw. hoffe jemand von euch kann mir noch mal helfen.
Ich habe es nun noch mal selber von Grund auf mit figure aufgebaut. Nun ist mir aufgefallen, dass immer ein kleiner Abstand zwischen den Bildern ist.
Kein Problem dachte ich und habe den CSS Reset von Eric Meyer eingefügt. Aber der Abstand zwischen den Bildern ist nicht raus (benutze übrigens Chrome).
Sitze sicher seit 1h dran und finde keine Lösung :-/ kann mir jemand helfen?

http://jsfiddle.net/3xubqL7j/1/
 
Hallo,

die Fehler- / Problemsuche musst du wohl noch etwas üben.

Die seitlichen Abstände haben nichts mit dem figure-Element zu tun, sondern treten genau so auf, wenn die figure- und figcaption-Elemente durch div-Elemente ersetzt werden:

http://foreninfo.bplaced.net/seiten...0_18_cartman_04_bilder_mit_text_anordnen.html

Die Ursache ist die "display: inline-block"-Anweisung. Die fügt die Abstände mit ein:

http://www.dev-cc.com/2012/09/10/css-tucken-4px-abstand-bei-inline-block-elementen/

Bei dem folgenden Beispiel habe ich die Lösung mit den "-4px margin" (links und rechts für das figure-Element) gewählt:

http://foreninfo.bplaced.net/seiten...0_18_cartman_05_bilder_mit_text_anordnen.html

Je nach der Gesamtseite (und damit dem gesamten CSS) können auch einige zusätzliche der aufgeführten Lösungsansätze erforderlich sein oder die -4px müssen angepasst werden.

Auf das CSS-reset von Eric Meyer solltest du verzichten. Das ist zu umfassend und sorgt grade in der Lern- und Anfangsphase von CSS immer wieder für Probleme, da sich dann einige HTML-Elemente nicht mehr "lehrbuchgerecht" verhalten. In der Praxis werden zudem auch durchaus sinnvolle Angaben und Abstände überschrieben, die die Browser selbst regeln können.

Im Laufe der Zeit wirst du selbst merken, welche CSS-Einstellungen für dich sinnvoll sind und die du immer wieder benötigst. Die kannst dann grundsätzlich für deine selbst erstellten Seiten verwenden.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hallo MrMurphy,

ja, die Fehlersuche ist bei mir leider noch nicht so gut. Ich denke ich bin generell auch noch nicht sehr weit aber lerne gerne weiter.
Ich hatte zwar schon den Verdacht, dass es an inline-block liegen könnte, dann aber nicht tief genug darüber nachgedacht und gegoogelt.

Jedenfalls muss ich mich bei dir für deine nette aber vor allem ausführliche Hilfe bedanken. Ich halte das nicht für selbstverständlich und weiß es sehr zu schätzen!
Ich bin auch deinem Rat gefolgt und habe den Eric Meyer reset vorerst rausgenommen. Eventuell werde ich einen anderen Weg als den -4px margin gehen, aber das muss ich noch testen und abwegen.

DANKE!

lg,
cartman
 
Werbung:
Zurück
Oben