9
Mehrere divs über img legen
Hallo Leute,
ich steh gerade total an und würde mich über eure Hilfe freuen.
Und zwar muss ich mehrere Divs über ein Image legen.
Um das Ganze zu veranschaulichen habe ich jetzt mal auf die schnelle einen Teil der Webseite auf jsfiddle nachgebaut.
Mit nur einem Div funktioniert das ganze ja ohne Probleme.
Sobald aber 2 Divs (oder mehr) darüber liegen (bitte dazu im jsfiddle Kommentar aus Zeile 12 entfernen), klappt es nicht mehr.
Die Abstände werden hier total verschoben.
Was bedenke ich da jetzt zur späten Stunde nicht mehr?
Beste Grüße
Patrick
ich steh gerade total an und würde mich über eure Hilfe freuen.
Und zwar muss ich mehrere Divs über ein Image legen.
Um das Ganze zu veranschaulichen habe ich jetzt mal auf die schnelle einen Teil der Webseite auf jsfiddle nachgebaut.
Mit nur einem Div funktioniert das ganze ja ohne Probleme.
Sobald aber 2 Divs (oder mehr) darüber liegen (bitte dazu im jsfiddle Kommentar aus Zeile 12 entfernen), klappt es nicht mehr.
Die Abstände werden hier total verschoben.
Was bedenke ich da jetzt zur späten Stunde nicht mehr?
Beste Grüße
Patrick
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-ID: 232966
Url: https://administrator.de/contentid/232966
Printed on: October 5, 2024 at 09:10 o'clock
9 Comments
Latest comment
Hallo Patrick,
vermutlich, dass das sich die Divs auch Gegenseitig beeinflussen?
Gruß,
Christian
vermutlich, dass das sich die Divs auch Gegenseitig beeinflussen?
Gruß,
Christian
Zitat von @certifiedit.net:
Hallo Patrick,
vermutlich, dass das sich die Divs auch Gegenseitig beeinflussen?
Gruß,
Christian
Hallo Patrick,
vermutlich, dass das sich die Divs auch Gegenseitig beeinflussen?
Gruß,
Christian
Das war mir irgendwie fast klar ;)
Aber wie behebe ich diese Beeinflussung?
Grüße
Patrick
Guten Morgen,
hat es einen bestimmten Grund wieso du den Hintergrund der Box als Bild einbindest und nicht den <div> Container dein Bild als Hintergrund zuweist? Zudem würde ich dir nicht empfehlen deinen <div> im Quelltext Formatierungen zuzuweisen (float: left z. B.), sondern direkt im CSS.
Wenn du bestimmte Elemente gesondert behandeln willst, kannst du bei Listen z. B. mit first- und last-child arbeiten.
Gruß
Toni
hat es einen bestimmten Grund wieso du den Hintergrund der Box als Bild einbindest und nicht den <div> Container dein Bild als Hintergrund zuweist? Zudem würde ich dir nicht empfehlen deinen <div> im Quelltext Formatierungen zuzuweisen (float: left z. B.), sondern direkt im CSS.
Wenn du bestimmte Elemente gesondert behandeln willst, kannst du bei Listen z. B. mit first- und last-child arbeiten.
Gruß
Toni
Morgen Toni,
hat es einen bestimmten Grund wieso du den Hintergrund der Box als Bild einbindest und nicht den <div> Container dein Bild
als Hintergrund zuweist?
als Hintergrund zuweist?
Ja. Das div hat eine bestimmte Breite. Das eingebundene Bild kann jedoch auch breiter sein als das div. Dann muss der Inhalt im div (also das Bild) scrollbar sein.
Darum habe ich das so gelöst.
Zudem würde ich dir nicht empfehlen deinen <div> im Quelltext Formatierungen zuzuweisen
(float: left z. B.), sondern direkt im CSS.
Mache ich auch prinzipiell. War hier nur als Beispiel. Aber Danke für den Hinweis.(float: left z. B.), sondern direkt im CSS.
Wenn du bestimmte Elemente gesondert behandeln willst, kannst du bei Listen z. B. mit first- und last-child arbeiten.
Prinzipiell ist mir diese (css) Funktion bekannt. Allerdings ist mir jetzt nicht klar, wie mir das in meinem Fall weiterhelfen kann.Grüße
Patrick
Hallo Patrick,
deine Positionierung (relativ/absolut) der DIVs hat nicht gestimmt. Update: http://jsfiddle.net/c9cd6/1/
Grüße Uwe
deine Positionierung (relativ/absolut) der DIVs hat nicht gestimmt. Update: http://jsfiddle.net/c9cd6/1/
Grüße Uwe
Zitat von @colinardo:
Hallo Patrick,
deine Positionierung (relativ/absolut) der DIVs hat nicht gestimmt. Update: http://jsfiddle.net/c9cd6/1/
Grüße Uwe
Hallo Patrick,
deine Positionierung (relativ/absolut) der DIVs hat nicht gestimmt. Update: http://jsfiddle.net/c9cd6/1/
Grüße Uwe
Super, danke dir!
Muss mir aber noch anschauen, ob mit dem "position:relative" im div#preview mir nicht mein restliches Design gecrasht wird. Aber das hoffe ich ja doch nicht.
Werde am Abend berichten!
Moin,
Aber @colinardo hat oben ja die Lösung gepostet für deinen Quelltext.
Gruß
Toni
Ja. Das div hat eine bestimmte Breite. Das eingebundene Bild kann jedoch auch breiter sein als das div. Dann muss der Inhalt im div (also das Bild) scrollbar sein.
ach so. Okay.Mache ich auch prinzipiell. War hier nur als Beispiel. Aber Danke für den Hinweis.
Gut.Prinzipiell ist mir diese (css) Funktion bekannt. Allerdings ist mir jetzt nicht klar, wie mir das in meinem Fall weiterhelfen kann.
Da du leider keine Information gegeben hast was damit gemacht wird, war es nur ein Vorschlag. Wenn du so z. B. hättest eine Navigation bauen wollen.Aber @colinardo hat oben ja die Lösung gepostet für deinen Quelltext.
Gruß
Toni
Zitat von @Badger:
Super, danke dir!
Muss mir aber noch anschauen, ob mit dem "position:relative" im div#preview mir nicht mein restliches Design gecrasht wird
und wenn, baust du einfach einen weiteren DIV drum und positionierst diesen dann halt absolut, wenn das die Anforderung ist Super, danke dir!
Muss mir aber noch anschauen, ob mit dem "position:relative" im div#preview mir nicht mein restliches Design gecrasht wird
Zitat von @colinardo:
Hallo Patrick,
deine Positionierung (relativ/absolut) der DIVs hat nicht gestimmt. Update: http://jsfiddle.net/c9cd6/1/
Grüße Uwe
Hallo Patrick,
deine Positionierung (relativ/absolut) der DIVs hat nicht gestimmt. Update: http://jsfiddle.net/c9cd6/1/
Grüße Uwe
Klappte so auf Anhieb.
Herzlichen Dank Uwe und Toni für eure Hilfe!
