Footerbereich speziell anpassen

Hallo Community,

ich erstelle mir ein Layout für Version 4.1 und habe diesbezüglich einige Fragen.

1. Ich möchte gerne die Schriftfarbe in >> .navigationHeader << ändern. Ich meine die Unternavigation, wenn man z.B. auf Blog klickt. Dies geschieht laut Firebug mit

.navigation > ul.navigationItems > li > a, .navigation > ul.navigationMenuItems > li > a {color: #999999;

Leider wirkt sich diese Einstellung auch auf >> .navigationFooter << aus. Alles, was in der Footernavigation steht, übernimmt somit die gleiche Farbe. Kann ich das irgendwie unterbinden?

2. Ich möchte gerne >> .navigationFooter << auf 100 % erweitern. Das heißt, der Footer soll über den ganzen Bildschirm gehen. Das habe ich über:

.navigationFooter {
   	background-color: #085065; /* definiert die Hintergrundfarbe */
	height: 200px; /* definiert die Höhe vom Hintergrund */
	left: 0; /* definiert den Abstand zum linken Rand */ 
	margin-top: 20px; /* definiert den Abstand Mainbereich */
	overflow: hidden;
	position: absolute; /* Hintergrund wird über den ganzen Bildschirm gestreckt */
	right: 0; /* definiert den Abstand zum rechten Rand */ 
	text-align: left; /* definiert die Ausrichtung vom Text */
	color: #fff; /* definiert die standard Schriftfarbe normal */
	z-index: 200; /* Wert einfach so lassen */

	}

gelöst. Der Rest der Seite bekommt eine feste Größe über >> globale Einstellung << im Style zugewiesen. Nun möchte ich gerne, das sich die Navigation im Footer an dieser Einstellung orientiert und nicht an .navigationFooter, da die Navigation sonst so über den ganzen Bildschirm geht. Wie kann ich dieses Ziel erreichen? Ist .navigation > ul.navigationMenuItems die richtige Klasse? Ich bekomme das einfach nicht hin und würde mich über entsprechenden CSS Code sehr freuen.

Vielen Dank für eure Unterstützung.

Hallo Qvip, vielen Dank für deine Hilfe.

1. funktioniert besten. TOP

2. funktioniert zur zum Teil.

.navigationFooter {
width: 80% !important;
}

bewirkt, das der Navigationsbereich sich auf 80 % zusammen zieht.

Bei

.footer {
width: 100%;
}

sieht es ganz anders aus. Er breitet sich NICHT wie gewünscht über die ganze Seite aus, sondern orientiert sich nach wie vor an der globalen Einstellung. Das heißt, ist meine Seite komplett 1080px, dann ist es der Footer auch.

Habe es auch im Basislayout getestet.

Ich hab immer wieder probiert den Footer zu strecken und der Navigation beizubringen, das sie dort bleibt wo sie ist. Leider ohne Erfolg. Während

.footer {
width: 80%;
}

dafür sorgt, dass sich der Footer verkleinert, passiert bei 100 % sogesehen gar nichts. Denn spreche ich den Footer direkt an, orientiert er sich sich dennoch an der globalen Einstellungen. Das heißt, habe ich feste Größen vorgegeben, ist bei selbiger Schluss. Ich möchte aber gerne erreichen, das sich der Footer über den ganzen Bildschirm erstreckt, während die Navigation selbst, sich an der globalen Einstellungen orientiert und da bleibt, wo sie ist.

Anders ist es, wenn ich

.navigationFooter {
   	background-color: #085065; /* definiert die Hintergrundfarbe */
	height: 200px; /* definiert die Höhe vom Hintergrund */
	left: 0; /* definiert den Abstand zum linken Rand */ 
	margin-top: 20px; /* definiert den Abstand Mainbereich */
	overflow: hidden;
	position: absolute; /* Hintergrund wird über den ganzen Bildschirm gestreckt */
	right: 0; /* definiert den Abstand zum rechten Rand */ 
	text-align: left; /* definiert die Ausrichtung vom Text */
	color: #fff; /* definiert die standard Schriftfarbe normal */
	z-index: 200; /* Wert einfach so lassen */

	}

verwende. Dort erreiche ich mein Ziel, das der Footer gestreckt ist. Leider orientiert sich halt die Navigation an diesen Werten und ignoriert die globale Einstellung.

Ich diese Herausforderung nicht allein bewältigt und würde mich sehr über einen Lösungsansatz freuen.