badger
Goto Top

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

Content-Key: 232966

Url: https://administrator.de/contentid/232966

Printed on: February 29, 2024 at 08:02 o'clock

Member: falscher-sperrstatus
falscher-sperrstatus Mar 18, 2014 at 22:18:45 (UTC)
Goto Top
Hallo Patrick,

vermutlich, dass das sich die Divs auch Gegenseitig beeinflussen? face-smile

Gruß,

Christian
Member: Badger
Badger Mar 19, 2014 at 06:35:15 (UTC)
Goto Top
Zitat von @falscher-sperrstatus:

Hallo Patrick,

vermutlich, dass das sich die Divs auch Gegenseitig beeinflussen? face-smile

Gruß,

Christian

Das war mir irgendwie fast klar ;)

Aber wie behebe ich diese Beeinflussung?

Grüße
Patrick
Member: d4shoerncheN
d4shoerncheN Mar 19, 2014 at 08:10:50 (UTC)
Goto Top
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
Member: Badger
Badger Mar 19, 2014 at 08:18:12 (UTC)
Goto Top
Zitat von @d4shoerncheN:

Guten Morgen,

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?

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.

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
Member: colinardo
Solution colinardo Mar 19, 2014 updated at 16:58:04 (UTC)
Goto Top
Hallo Patrick,
deine Positionierung (relativ/absolut) der DIVs hat nicht gestimmt. Update: http://jsfiddle.net/c9cd6/1/

Grüße Uwe
Member: Badger
Badger Mar 19, 2014 at 08:29:17 (UTC)
Goto Top
Zitat von @colinardo:

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!
Member: d4shoerncheN
d4shoerncheN Mar 19, 2014 at 08:30:42 (UTC)
Goto Top
Moin,

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
Member: colinardo
colinardo Mar 19, 2014 updated at 08:32:37 (UTC)
Goto Top
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 face-wink
Member: Badger
Badger Mar 19, 2014 at 16:57:53 (UTC)
Goto Top
Zitat von @colinardo:

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!