Widget-Area ändern

[COLOR=#000000][FONT=Verdana]Hi,

bei mir ist die Seite wie denke ich mal bei vielen Anderen in die Bereiche #primary (Content) und [/FONT][/COLOR]

[COLOR=#000000][FONT=Verdana]#secondary (Sidebar) aufgeteilt, die ca. 80 zu 20 im Verhältnis stehen. Beide Bereiche gehen von Header bis zum Footer und [/FONT][/COLOR]

[COLOR=#000000][FONT=Verdana]unterscheiden sich !ausschließlich! in ihrer Breite (80 vs 20).

Ich möchte aber, dass die Sidebar - bei mir als [/FONT][/COLOR][COLOR=#000000][FONT=Verdana]#div.secondary.widget-area dargestellt - nicht direkt unterm Header, sondern

z.B. 30px weiter drunter anfängt. Der #secondary Bereich soll einfach nach unten (Header) bzw. nach oben (Footer)

geschoben werden.[/FONT][/COLOR]

[COLOR=#000000][FONT=Verdana]So kann ich direkt unterm Header ein Bild einfügen, dass zu 100 % dargestellt wird und nicht wie aktuell nur zu 80 %, da[/FONT][/COLOR]

[COLOR=#000000][FONT=Verdana]die Sidebar 20 % wegnimmt.[/FONT][/COLOR]

Wie kann ich den #secondary Bereich nach unten bzw nach oben schieben?

Margin-top, paddings und heights habe ich schon probiert. Da verändert sich nur der Inhalt der Sidebar, aber der gesamte Sidebar-Bereich bleibt gleich. Kann man die Höhe einer Widget-Area über CSS verändern oder geht das nur über Einstellungen in den php-Dateien?

Im Header hatte ich auch schon überlegt, aber ich brauche den Platz darunter.

Im Inspektor wird der Bereich als

div#secondary.widget-area | 220.69 * 1180.56 angezeigt

Ich hatte schon folgendes probiert, aber da ändert sich auch nur die Formatierung des Inhalts und nicht des gesamten Sidebar-Bereichs

div#secondary.widget-area | 220.69 * 1180.56 { margin-top: 100em !Important;}

auch bei #secondary {} wird nur der Inhalt verschoben.

Ich finde einfach keinen Befehl der die Widget-Area und nicht den Inhalt verschiebt.

[FONT=Consolas][COLOR=#888888][COLOR=#333333][FONT=Verdana]Wenn ich über den Inspektor den #secondary-Bereich anklicke wird folgendes angezeigt:[/FONT][/COLOR]

element.style[/COLOR] {

}
[/FONT][FONT=Consolas]
[COLOR=#888888][COLOR=#222222].page-id-248 #secondary[/COLOR][/COLOR] {

• [COLOR=#C80000]margin-top[/COLOR]: 300px !Important;

}
[/FONT][FONT=Consolas]
[COLOR=#888888][COLOR=#222222].moz-widget-list-adjust #secondary[/COLOR][/COLOR]{

• [COLOR=#C80000]width[/COLOR]: 23.1%;

}
[/FONT][FONT=Consolas]
[COLOR=#888888][COLOR=#222222]#secondary[/COLOR][/COLOR] {

• [COLOR=#C80000]background-color[/COLOR]: #FFFFFF !Important;

}
[/FONT][FONT=Consolas]
[COLOR=#888888][COLOR=#222222]#secondary[/COLOR][/COLOR]{

• [COLOR=#C80000]float[/COLOR]: right;
• [COLOR=#C80000]margin-right[/COLOR]: 7.1%;

}
[/FONT][FONT=Consolas]
[COLOR=#888888][COLOR=#222222].widget-area[/COLOR][/COLOR] {

• [COLOR=#C80000]font-size[/COLOR]: 13px;

}

[/FONT]
Das sind eigentlich alle Klassen oder IDs, die zur Verfügung stehen, oder?
Hier müsste man doch eine passende Formatierung setzen können?

Den Wert von 300px hab ich ja schon gesetzt. Dies verändert nur die Höhe des Inhalts.

Wie finde ich das "Elternelement"?

Das hilft mir jetzt direkt weiter :smile:
Kannst du mir eine kleine Anleitung geben?

Alles klar. Trotzdem danke