Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Mehrere divs über img legen

Frage Entwicklung HTML

Mitglied: Badger

Badger (Level 2) - Jetzt verbinden

18.03.2014, aktualisiert 19.03.2014, 1472 Aufrufe, 9 Kommentare

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
Mitglied: certifiedit.net
18.03.2014 um 23:18 Uhr
Hallo Patrick,

vermutlich, dass das sich die Divs auch Gegenseitig beeinflussen?

Gruß,

Christian
Bitte warten ..
Mitglied: Badger
19.03.2014 um 07:35 Uhr
Zitat von certifiedit.net:

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
Bitte warten ..
Mitglied: d4shoerncheN
19.03.2014 um 09:10 Uhr
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
Bitte warten ..
Mitglied: Badger
19.03.2014 um 09:18 Uhr
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
Bitte warten ..
Mitglied: colinardo
LÖSUNG 19.03.2014, aktualisiert um 17:58 Uhr
Hallo Patrick,
deine Positionierung (relativ/absolut) der DIVs hat nicht gestimmt. Update: http://jsfiddle.net/c9cd6/1/

Grüße Uwe
Bitte warten ..
Mitglied: Badger
19.03.2014 um 09:29 Uhr
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!
Bitte warten ..
Mitglied: d4shoerncheN
19.03.2014 um 09:30 Uhr
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
Bitte warten ..
Mitglied: colinardo
19.03.2014, aktualisiert um 09:32 Uhr
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
Bitte warten ..
Mitglied: Badger
19.03.2014 um 17:57 Uhr
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!
Bitte warten ..
Ähnliche Inhalte
Batch & Shell
Zusammenführen mehrere Felder, Datei auswählen (1)

Frage von GeoSem zum Thema Batch & Shell ...

Netzwerkmanagement
Mehrere einzelne VPN Zugänge mit pfSense (2)

Frage von Philippe27 zum Thema Netzwerkmanagement ...

Microsoft Office
Mehrere .csv Dateien automatisch transponieren und zusammenführen (9)

Frage von HurtiKurti zum Thema Microsoft Office ...

Batch & Shell
gelöst Mehrere Dateien mit laufender Nummer automatisch erstellen (5)

Frage von anko123 zum Thema Batch & Shell ...

Neue Wissensbeiträge
Heiß diskutierte Inhalte
Windows Systemdateien
NTFS und die Defragmentierung (23)

Frage von WinLiCLI zum Thema Windows Systemdateien ...

LAN, WAN, Wireless
Zwei Subnetze mit je eigenem Router und Internetzugang verbinden (17)

Frage von hannsgmaulwurf zum Thema LAN, WAN, Wireless ...

Windows Server
WIndows Server 2016 core auf dem Intel NUC NUC5i5RYK i5 5250U (17)

Frage von IxxZett zum Thema Windows Server ...