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.
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!
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.
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:
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?
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:
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.
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.