CSS <div> als Hintergrund für anderes <div> stylen

[CitroenDsVier]

Hallo zusammen,

ich habe bspw. folgende HTML:

<div class="content container">
    <div>blabla</div>
    <div>blabla</div>
    <div>blabla</div>
    <div>blabla</div>
    <div class="container-background"></div>
</div>

möchte das background-div nun im Hintergrund den gesamten "content container" ausfüllen lassen, um mit folgendem css:

.container {
    padding: 5px;
}
.container-background {
    background: #fff;
    opacity: .4;

    ...
}

den "content container" von dessen Hintergrund hervorzuheben. Ich hoffe ihr versteht, was ich meine. Wenn ich die position für den background-div allerdings relative absolute (sry, mein Fehler) setze, rutscht dieses an das obere Ende der Seite. Natürlich könnte ich es mit "top" und "left" an Ort und Stelle rücken, dann schwindet aber auch das letzte bisschen responsiveness.

Da der "content container" mehrmals hintereinander vorkommt, muss die Position des backgrounds also abhängig von der des parent-Elements ("content container") sein und gleichzeitig den mit padding behandelten "content container" vollständig ausfüllen.

Wie mache ich das?

MfG, V40

 

[mw197]

Meinst du das einfach so oder verstehe ich das falsch?

<div class="content container">
    <div class="container-background">
        <div>blabla</div>
        <div>blabla</div>
        <div>blabla</div>
        <div>blabla</div>
    </div>
</div>

 

[coolmodi]

Ich verstehe nicht wirklich was du vor hast. Wenn der "content container" einen Hintergrund haben soll, dann definiere den direkt dort (oder wie über mir die HTML umstrukturieren) und nicht in einem child element.

Wenn wirklich "container-background" das ganze div "content container" ausfüllen soll, oder nur einen bestimmten teil, dann musst du mit javascript arbeiten, da du die Höhe nicht vorher wissen kannst.

 

[CitroenDsVier]

@ mw197: richtig, so würde es auch gehen.

Da die Seite aber noch andere Teile, u.A. mit php aufgebaut, hat, wäre eine Variante mit css wie ich sie oben beschrieben habe, einfacher und würde insgesamt weniger Arbeit verursachen.

Irgendwie funktioniert das auch, da bin ich mir ziemlich sicher...

@coolmodi: Die Höhe des content containers weiß ich, 35px plus padding.
Den Background direkt im Content container angeben... Das wäre natürlich eine Möglichkeit

Daran habe ich nicht gedacht, weil das Ganze nur bei jedem zweiten Content Container passieren soll (Dateiexplorer, jede zweite Datei leicht grau zur besseren Orientierung). Aber mit php kann ich natürlich auch dynamisch noch eine css-Klasse hinzufügen...

Danke

 

[coolmodi]

Daran habe ich nicht gedacht, weil das Ganze nur bei jedem zweiten Content Container passieren soll (Dateiexplorer, jede zweite Datei leicht grau zur besseren Orientierung). Aber mit php kann ich natürlich auch dynamisch noch eine css-Klasse hinzufügen...

Achso, dann mach einfach eine Liste und gib jedem 2. element eine andere Farbe.

Edit:

<ul>
PHP haut <li>content</li> hier raus
</ul>

li { background: white; }
li:nth-child(odd) { background: grey; }

 

[CitroenDsVier]

<div class="file-explorer-file<?php if($g == 1) { echo " grey"; $g = 0; } else { echo " white"; $g = 1; }?>">

Das ist jetzt meine Lösung.. funktioniert auch.

 

[hroessler]

Hallo,
btw. der HTML Standard hat noch nie erlaubt, <div> oder um noch genauer zu sein Blockelemente zu verschachteln. Stattdessen folgendes:

...
<div>
  <span></span>
  <span></span>
</div>
...

Und nichts gegen deine Lösung, aber die CSS basierende Lösung von coolmodi ist definitiv die sauberste und richtigste. Hier PHP zu verwenden ist ne pure Krücke!

greetz
hroessler

 

[Eld0r]

Hätte auch Verschachteln vorgeschlagen.
Du kannst noch Versuchen dem inneren, verschachtelten Container seine Größe automatisch an das umgebende Element anpassen zu lassen. Müsste etwa so funktionieren.

.container-background {
    margin: 0; // oder auto; ?
    width: 100%;
    heigth: 100%; // oder auto;
...}

Dem ersteller scheint es klar zu sein, aber ich möchte die allgemeinheit darauf hinweisen, dass eine Klasse "content container" nicht existiert. Stattdessen benutzt der Container die beiden Klassen "content" und "container":

<div class="content container"
...}

Ergänzung (30. Juni 2016)

Achso, gerade nochmal durchgelesen
Versuch doch mal folgendes:
​

.container:nth-child(even) { // bzw. (2n)
  background-color: #FFF;
}
.container:nth-child(odd) { // bzw. (2n+1)
  background-color: #999;
}

 

[CitroenDsVier]

Die "nth-child" Methode mit CSS sieht in der Tat hübsch(er) aus. Ich verwende in dem Abschnitt aber sowieso php, da x bestehende Dateien aus einem Ordner aufgelistet werden und je Datei eine bestimmte HTML Struktur generiert wird. Ob die Klasse da jetzt durch eine php-Variable oder durch CSS hinzugefügt wird, ändert weder an der Geschwindigkeit bzw. Dauer des Requests, noch an sonstwas etwas.

Ich werde sie mir für andere Anwendungen mal ansehen, danke dafür

Ergänzung (1. Juli 2016)

@hroessler: Wenn ich immer nur ein div-Element verwenden dürfte, wäre ich an vielen Stellen schon aufgeschmissen gewesen. Stattdessen soll ich dann lieber <span> mit dem CSS-Attribut "display: block" verwenden? Da kann ich auch grad' noch nen div nehmen.