css will nich wie ich will

Hallo zusammen,

ich habe mir in den Kopf gesetzt, zwei Spalten auf Seitenhöhe (100%) zu setzen und mit einer Hintergrundfarbe (hier jetzt mal aqua) zu versehen.
Hier ist das Beispiel (kläglich): http://wighty.de/13/schlafzimmer/

Das Grundgerüst stammt vom siteorigin plugin. Das sorgt später automatisch für die nötige Responsivität.
Die einzelnen Spalten spricht siteorigin mit der classe .panel-grid-cell an. Ich habe also in die style.css geschrieben:

.panel-grid-cell {
    
    background-color: #00000 !important;
    height: 100% !important;
}

Die Höhe wurde dann auch richtig angepasst aber die Hintergrundfarbe wird nicht angezeigt. Der Firefox Inspektor sagt mir "ungültiger Wert für Eigenschaft". Wenn ich es aber direkt ins Inspektorfenster eintippe (Inline) wird der Hintergrund angezeigt.
Doch da tut sich dann auch schon das nächste Problem auf.
Es wird nur der Bereich der Spalte mit Hintergrund versehen, der ohenhin schon mit Content gefüllt ist. Allkes darunter bleibt transparent.

Ich raume mir schon die Haare

Hat jemand ne Idee was da schiefläuft?

Danke und Grüße
Holger

Oh sorry, ich war auf dem ganz ganz falschen dampfer. Jetzt ist alles aqua :-) Ist auch klar weil die Panels alle mit der gleichen Klasse angesprichen werden. Muss die erst noch einzeln identifizieren. Oh je....

Nein, eigentlich sollen nur zwei Spalten eine Hintergrundfarbe bekommenb, die anderen sollen transparent bleiben.

Aber genau das ist ein Problem bei dem Teil, denn siteorigin nummeriert die Spalten durch...

Die Spalte mit dem Menu und die Spalte mit dem Content sollen beide Seitenhöhe haben und eine einheitliche Hintergrundfarbe (erst mal egal, welche). Das größte Problem dabei: siteorigin lässt zwar die Angabe einer eigenen Zeilenklasse zu, nicht aber einer Spaltenklasse. Die Zeile heisste "Muster" aber die Spalten werden durchnummeriert. Wenn später neue Seiten hinzu kommen, können sich die Spaltenzahlen ändern.

Ich habs :-) Allerdings ist die Seite jetzt nicht mehr responsive. Und eine Lösung um auf jeder Seite die gleichen Spalten anzusprechen habe ich auch noch nicht....

Geht das nicht irgendwie nach dem Schema: 1 und 3. Spalte statt #pgc-125-0-1 #pgc-125-0-3?

Danke Dir Edi.

Ich habe gerade eben die fixe Spaltenhöhe für kleine Displays über die Media Queries ausgeschaltet. Das klappt schon mal.

Ja, ich hatte auch darüber nachgedacht, ob ich nicht selber zwei div-Container bastele in die ich den Content packe. Aber dann muss ich ja alles bis zum kleinsten Bisschen an die Responsivität anopassen. Siteorigin macht das innerhalb seiner panels problemlos vollautomatisch. Er packt die Inhalte darin immer genau so zusammen wie es auf dem jeweiligen Bildschirm vorteilhaft ist. Das kriege ich so perfekt niemals hin....denke ich.

Bei den Spalten habe ich einfach die id der jeweiligen Spalte angesprochen, also

pgc-125-0-1  {
    
    background-color: #FFA54F !important;
}

Es wäre aber vorteilhafter sagen zu können: Die zweite Spalte auf der Seite oder: die fünfte Spalte auf der Seite.

Ich glaube, ich sehe es ein. So schön siteorigin auch ist - dafür ist es nicht geeignet. 2/3 der Spalten sind nur Platzhalter um die Abstände zum Rand und zueinander einzuhalten. Das kann es ja wohl nicht sein. Ich versuche es jetzt einfach mal mit zwei eigenen Containern.

Und schon gehen die Probleme los.

Ich habe in das twentysixteen drei weitere Container eingebaut. Den ersten für das Logo. Darin befindet sich ein Widget.
CSS ist

#logobanner {
    background-color: #FFA54F;
    width: 280px;
    padding-top: 0em;
    padding-bottom: 1em;
    padding-right: 2em;
    padding-left: 2em;
    margin-top: 0em;
    margin-left: 50px;
}

Dann der Container für das Hauptmenü.

#menu1 {
    background-color: #FFA54F;
    width: 280px;
    padding-top: 0em;
    margin-top: 0em;
    margin-left: 50px;
    height: 900px;
    float: left;
    display: inline-block;
    
}

Und zu guter letzt noch dder Container für den eigentlichen Contentbereich

#hauptcontent {

background-color: #FFA54F;
width: 780px;
padding-top: 0em;
margin-top: 0em;
margin-right: 50px;
height: 900px;
float: right;
display: inline-block;
}

Das funktioniert...bis auf zwei Stellen. Erstens rutscht der hauptcontent-Container nicht bis ganz nach oben an den Seitenrand sondern nur bis auf Höhe des logobanners. Ist klar weil das bei float nicht mitmacht. Es kann aber nicht mitmachen weil sonst menu1 rechts neben logobanner rutschen würde. Dann wären es drei Container nebeneinander. logobanner und menu1 sollen aber unereinander bleiben. Ich könnte jetzt einen Minuswert bei margin-toüp eingeben aber der stört wahrscheinlich an irgendeiner späteren Stelle wieder. Muss doch auch eleganter gehen.

Zweitens gibt's in dem Theme einen "bearbeiten"-Link, der eigentlich obehalb des Footers zu finden ist. In meinem Fall ist er aber in den hauptcontent gerutscht und ich habe keinen Schimmer, wieso. Ich würde ihn ja ganz rauslöschen aber im Theme selber finde ich keinen Container mit der ID oder Klasse.#

Link ist hier: http://wighty.de/13/test11/