CSS Navi - kleiner Abstand und Hover

Ben. · #1 (**permalink**) 15.08.2010, 18:20

Hallöchen

steige recht frisch wieder mit HTML und CSS ein und stehe nun vor einem mir unerklärlichen Abstand und verstehe nicht, warum die Hover (color) vom Menü nicht in die Zusammenfassende Deklaration stecken kann.

Beides direkt miteinander zu tun bzw. sind beide Probleme in der Navi und dem Hover-Effekt. Fangen wir bitte mit dem Color-Problem an:

Zusammenfassende Deklarationen:

Code:

/* ---------- MENU ---------- */

.menu1, .menu2, .menu3, .menu4, .menu5, .menu6 {
	font-size:18px;
	font-weight:bold;
	margin:0 10px;
	text-decoration:none;
}

.menu1:hover, .menu2:hover, .menu3:hover, .menu4:hover, .menu5:hover, .menu6:hover {
	margin:0;
	padding:4px 10px;
}

Der/Die Hover, welche nur dort funktionieren und nicht in der Zusammenfassung .menu1:hover, .menu2:hover etc:

Code:

a.menu1:hover {
	background:url(../img/m1.png) repeat-x;
	color:#fff;
}

Warum funktioniert das nicht in der Zusammenfassung ?!

Nächstes Problem: der Abstand vom Hover
Die Grafik und auch der Text verrutschen ein paar Pixel nach unten. Das allerdings erst NACHDEM ich die UL und LI einbaute. Wo liegt mein Fehler ?

Ist die CSS so vernünftig angeordnet, oder viele Unsinnigkeiten dabei ?

Habe bisher noch nichts für den IE getan, bin noch am lesen.

Die Seite: Startseite

Vielen Dank schonmal!

derHund · #2 (**permalink**) 15.08.2010, 19:30

Die erste Problemstellung verstehe ich nicht.

Zum zweiten Problem: Das Rutschen entsteht durch

Code:

 padding:4px 10px;

beim Hover.

Ben. · #3 (**permalink**) 15.08.2010, 19:52

Okay das Verrutschen ist nun beseitigt stimmt es mit der Höhe noch immer nicht so ganz, was sich auch nicht mit Height beheben lässt (siehe Seite).
Vor den ULs und LIs begann der farbige Background oben am Rand vom Hintergrund des Menüs.

Zu dem Color-Problem:
Das hier funktionier:

Code:

a.menu1:hover {
	background:url(../img/m1.png) repeat-x;
	color:#fff;
}

das hier irgendwie nicht:

Code:

.menu1, .menu2, .menu3, .menu4, .menu5, .menu6 {
	font-size:18px;
	font-weight:bold;
	margin:0 10px;
	text-decoration:none;
	color:#fff; <----
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Boxen von Navigation und Logo sind zu weit auseinander	lila_3	CSS	2	03.09.2009 23:28
IE verschiebt Navi Menü	macmensa	CSS	7	17.08.2009 16:45
Probleme mit horizontaler Navi rechts	lila_3	CSS	2	14.07.2009 21:36
css tooltip hover problem	Deude	CSS	2	15.05.2005 17:49
CSS: hover bei Links	RayBan	CSS	2	05.11.2004 22:26