Top-Themen

Aktuelle Themen (A bis Z)

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, 1493 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
PHP
Inhalt eines divs ohne Javascript ändern!
gelöst Frage von LordKimahriPHP5 Kommentare

Ich suche derzeit nach einer brauchbaren alternative mein "Content-Div" per klick auf einen Link mit Inhalt zu versorgen, derzeit ...

Backup
BackUp Exec2015 IMG Verzeichnisse
Frage von gruener.pumaBackup

Hallo, leider löscht unser BackUpExec die abgelaufenen Mediensätze nicht mehr automatisch, keine Veränderung der Einstellungen was seit Monaten funktioniert ...

Linux Tools
.img auf einem Synology NAS entpacken
Frage von adminstLinux Tools1 Kommentar

Hallo zusammen Ich habe ein dd Image von einem Ubuntu auf einem Synology NAS abgelegt. Jetzt ist der Fall, ...

Windows Installation
.img Backups bootfähig machen
Frage von MksMlrWindows Installation8 Kommentare

Hallo liebe Gemeinde, ich würde gerne von einem Rechner z.B. Windows 98 ein Image erstellen mit z.B Acronis True ...

Neue Wissensbeiträge
Sicherheit

TLS-Zertifikat und privater Schlüssel von Microsofts Dynamics 365 geleakt

Information von Penny.Cilin vor 1 StundeSicherheit

Microsoft hat versehentlich das TLS-Zertifikat inklusive dem privaten Schlüssel seiner Business-Anwendung Dynamics 365 geleakt. TLS-Zertifikat und privater Schlüssel von ...

Viren und Trojaner

Deaktivierter Keylogger in HP Notebooks entdeckt

Information von bitcoin vor 23 StundenViren und Trojaner1 Kommentar

Ein Grund mehr warum man Vorinstallationen der Hersteller immer blank bügeln sollte Der deaktivierte Keylogger findet sich im vorinstallierten ...

Router & Routing

Lets Encrypt kommt auf die FritzBox

Information von bitcoin vor 1 TagRouter & Routing

In der neuesten Labor-Version der FB7490 integriert AVM unter anderem einen Let's Encrypt Client für Zugriffe auf das Webinterface ...

Internet

Was nützt HTTPS, wenn es auch von Phishing Web-Seiten genutzt wird

Information von Penny.Cilin vor 4 TagenInternet21 Kommentare

HTTPS richtig einschätzen Ob man eine Webseite via HTTPS aufruft, zeigt ein Schloss neben der Adresse im Webbrowser an. ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
Brainstorming, einfachste Option 1 getrenntes LAN (mit WAN zugang)
Frage von 132954LAN, WAN, Wireless13 Kommentare

Hi, folgendes: Wir bekommen eine Glasfaser Leitung, Und das sollte Optional so aussehen: Ein Modem/Router für das WAN, ein ...

Batch & Shell
Trusted Sites für alle User auf dem PC einpflegen
Frage von xXTaKuZaXxBatch & Shell12 Kommentare

Aufgabestellung: Es sollen auf 1 PC (bzw. mehreren PCs) vertrauenswürdige Sites per Powershell eingetragen werden, die für alle User ...

Netzwerkgrundlagen
Hi eine blöde frage. xD
Frage von 132954Netzwerkgrundlagen12 Kommentare

Also: Habe 2012 r2 essentials neuinstalliert, allerdings installiert diese version ja gleich diesen gangen AD kram mit, den hab ...

Netzwerkmanagement
Firefox Profieles im Roaming
gelöst Frage von Hendrik2586Netzwerkmanagement12 Kommentare

Hallo liebe Leute. :) Ich hab da ein kleines Problem, welches anscheinend nicht unbekannt ist. Wir nutzen hier in ...