Problem mit dem Hintergrund

Hallo,

Ich hab mich jetzt mal daran gewagt und versucht eigene Stile zu erstellen.

Aber ich stoße da gerade an eine Grenze und komm einfach nicht weiter.

Ich hab den Hintergrund von body geändert. Einmal mit einem Farbverlauf und einmal mit einem Hintergrundbild.

Das ist so weit gut. Aber dadurch werden die Boxen im Contentbereich ohne Hintergrund angezeigt.

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist. Das ist die Version mit Hintergrundbild.

Im Stil mit dem Farbverlauf, hab ich dann versucht diese Boxen eben mit einem Hintergrund + Rahmen zu versehen.

Das hat so weit auch geklappt. Aber jetzt sind auch Boxen an anderer Stelle im Stil verändert und das wollte ich eigentlich nicht.

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist. Das sind die veränderten Boxen, aber eben im Footerbereich, wo das nicht so sein sollte.

Folgenden Code habe ich dafür verwendet.

.boxContainer .box:not(.boxBorderless) {
background: rgba(255, 255, 255, 0.5);
padding: 20px;
border-radius: 5px;
border-color: #000000;
border-width: 1px;
border-style: solid;
}

Hatte auch schon andere Codes ausprobiert, aber das hat bisher auch nich wirklich funktioniert.

Wie kann ich denn nun alle Boxen im Contentbereich (also über Inhaltsbereich und unter Inhaltsbereich) ansprechen, ohne alle anderen Boxen auch anzusprechen?

Kann mir da bitte jemand weiterhelfen?

LG Micky12

Zitat von Belarus

Den Hintergrund im Content, sprich den mittleren Bereich auf welchen Du ansprichst, kannst Du wie folgt abändern:

.content { background: #XYZ; } für den Hintergrund bzw. .content > .section { background: #XYZ; } für die einzelne Sektion. Zudem ließen sich einzelne Elemente auch u.a. mit z.B. [data-box-identifier="XYZ"] { background: #XYZ; } abändern. Je nach dem was genau verändert werden soll.

Also das funktioniert nicht.

Weder .content noch .content>.section funktioniert, um einen Hintergrund um die Boxen + einen Rahmen zu bekommen. Wenn ich meinen Code von oben dahingehend verändere, ist sowohl der Hintergrund, als auch der Rahmen weg.

Und sorry, data-box-identifier finde ich ziemlich beschissen, weil es dann ein ewig langer Code wird, wenn ich jede einzelne Box eintragen muss. Es muss doch eine Möglichkeit geben, alle Boxen anzusprechen und dass das dann funktioniert.

Zitat von Belarus

Dazu könntest Du z.B. mit footer > . boxesFooter { background: none; } bzw. footer > .boxContainer { background: none; } die Hintergrundfarbe wieder entfernen. Anstatt background: none; kann auch background: transparent; genutzt werden. Das kommt aber auf den Stil an und ob bereits die Footer per CSS angesprochen wurden. Wenn dem so ist, so sollte von !important gebrauch gemacht werden (Beispiel: footer > .boxContainer { background: none !important; }).

Gruss,
Andreas

Auch das ist keine wirkliche Lösung.

Ich hab bereits den Footer im Code, um dort den Hintergrund anzupassen.

Das Probleme, dass ich mit den Boxen dort habe ist ja nur deswegen, weil ich den Code von oben verwendet habe. Ich weiß nicht ob es so sinnvoll ist, erst so einen Code zu verwenden der alle Boxen verändert und dann zu sagen, aber diese Boxen nicht.

Ich versteh sowieso nicht, warum die Boxen plötzlich transparent werden, nur weil man bei body einen Hintergrund einstellt. Völlig egal ob nun eine Grafik oder eine bestimmte Hintergrundfarbe oder halt einen Farbverlauf.