CSS in Secondary anpassen

Patrick Reubert

Hallo zusammen,

Ich bin gerade dabei unsere Homepage neu aufzubauen. Habe mich hierbei für das Theme Twenty fourteen entschieden und ein child theme erstellt.
jetzt würde ich gerne den bereich der secondary so einstellen das dies nicht mehr im Header bzw headerbild ersichtlich ist. wenn ich dieses via Top auf 180px stelle ist der streifen im Headerbild weg. Allerdings ist er dann unten nach dem Footer noch zusehen. wie bekomme ich diesen weg? kann mir da jemand helfen?

Code

3848    .site:before {
        background-color: #ae160b;
        content: "";
        display: block;
        height: 100%;
        min-height: 100%;
        position: absolute;
        top: 0px;  hier auf 180px ist der streifen nach unten verschoben.
        left: 0;
        width: 182px;
        z-index: 2;

Alles anzeigen

seite ist http://2018.ff-mainz-kastel.de/wordpress/

oder ist es einfacher das Headerbild einfach mehr in den vordergrund zu setzen? Hier hab ich aber auch nix gefunden.

vielen dank im vorraus

gruss Patrick

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SEpp55

Versuche folgendes! Die px, die mit top verschoben werden müssen unten wieder weg!

Code

.site::before {
    height: calc(100% - 244px);
    min-height: calc(100% - 244px);
    top: 244px;
}

Was mir noch aufgefallen ist, die Child-CSS wird doppelt geladen und die sind zu 90% ident mit der Parent-css ident. In der Child-css sollten nur die Änderungen zur Parent-css sein ;-)
In der Child-css sind am Ende einige Zahlen - sozusagen in loser Schüttung???

3469 15 20 15 20
4182 186

1080 250

svenbolz

Holzhammer-Lösung (wirklich unelegant, aber das CSS bisher ist auch nicht gerade state-of-the-art):

Code

@media screen and (min-width: 1008px)
.site:before {
    display: none;
}


@media screen and (min-width: 1008px)
#secondary {
    background-color: #ae160b;
    position: absolute;
    margin: 0;
    height: 100%;
}


@media screen and (min-width: 1008px)
#main {
    position: relative;
}

Alles anzeigen

Ist es gewollt, dass der Media-Query einmal 1008px und einmal 1080px anspricht?

Patrick Reubert

Vielen Dank für die Antwort. Hat geklappt.

Das mit der doppelten CSS war mir bewusst. Aber nicht das man es nicht machen sollte. werde dann die nicht genutzen rauslöschen. oder macht das nix?

mit den losen Zahlen, die hab ich mir nur notiert um was zu versuchen. Die müssen auch wieder rausgelöscht werden.

Vielen Dank

SEpp55

Zitat von svenbolz

Ist es gewollt, dass der Media-Query einmal 1008px und einmal 1080px anspricht?

Nun ist die Sidebar in diesem Bereich schwarz! Was ist da geschehen?

Zur Frage CSS Parent = Child!
Grundsätzlich wird in der Lade-Reihenfolge die Parent-CSS vor der Child-CSS geladen und in der Child sind NUR die Änderungen erforderlich. Die Angabe der Child-CSS überschreiben dabei die Anweisungen der Parent-CSS. Ganz zum Schluß werden noch die CSS-Anweisungen der Zusätzlichen CSS verarbeitet und können so ggf die Anweisungen der Parent- und Child-CSS überschreiben, solange nicht irgendwo das magische !important aufscheint!
Wenn nun das Child-CSS alles enthält, was nicht geändert wurde ist das doppelt gemoppeld und bringt nichts, außer Ressourcenbindung. Somit werden die 47xx Zeilen nochmals abgearbeitet!
Aber Grundsätzlich heißt, daß es Ausnahmen gibt! Siehe LINK und LINK!

SirEctor

Reicht es nicht einfach .site:before auf display:none zu setzen und #main ein display:flex zu verpassen?

Den Rest würde ich wieder rückgängig machen.

svenbolz

Wegen dem float-Layout mit diversen margins (auch negative) und den Styles aus dem Eltern-Theme wird das nicht funktionieren. Die Styles des Eltern-Themes sind btw. auch der Grund für den schwarzen Hintergrund in dem Balken. Da greift das Styling gerade nicht mehr, weil der per Media-Query erst ab 1080px ausgeführt wird.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS in Secondary anpassen

Jetzt mitmachen!