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

Ausgedruckt am: 29.03.2024 um 15:03 Uhr

Mitglied: falscher-sperrstatus
falscher-sperrstatus 18.03.2014 um 23:18:45 Uhr
Goto Top
Hallo Patrick,

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

Gruß,

Christian
Mitglied: Badger
Badger 19.03.2014 um 07:35:15 Uhr
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
Mitglied: d4shoerncheN
d4shoerncheN 19.03.2014 um 09:10:50 Uhr
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
Mitglied: Badger
Badger 19.03.2014 um 09:18:12 Uhr
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
Mitglied: colinardo
Lösung colinardo 19.03.2014 aktualisiert um 17:58:04 Uhr
Goto Top
Hallo Patrick,
deine Positionierung (relativ/absolut) der DIVs hat nicht gestimmt. Update: http://jsfiddle.net/c9cd6/1/

Grüße Uwe
Mitglied: Badger
Badger 19.03.2014 um 09:29:17 Uhr
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!
Mitglied: d4shoerncheN
d4shoerncheN 19.03.2014 um 09:30:42 Uhr
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
Mitglied: colinardo
colinardo 19.03.2014 aktualisiert um 09:32:37 Uhr
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
Mitglied: Badger
Badger 19.03.2014 um 17:57:53 Uhr
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!