✔ Schriftfarbe ändern

[awortmeier]

Hallo,
ich habe eine Listen-Navigation, die <li>-Elemente haben alle padding: 5px;
nun ändert er die Farbe der Links nicht wenn in diesen "Padding-Bereich" kommt.
Wie bekomm ich das hin, dass er auch dort die Schriftfarbe wechselt.

HTML:

	<div class="menu">
		<span class="left">
			<ul>
				<a href="#">
					<li>
						<div>Startseite</div>
						<div class="subScribe">Aktuelle Themen</div>
					</li>
				</a>
				<a href="#">
					<li>
						<div>Referenzen</div>
						<div class="subScribe">Meine Arbeiten</div>
					</li>
				</a>
				<a href="#">
					<li>
						<div>Kontakt</div>
						<div class="subScribe">Schreiben Sie mir...</div>
					</li>
				</a>
				<a href="#">
					<li>
						<div>Profil</div>
						<div class="subScribe">Wer bin ich?</div>
					</li>
				</a>
				<a href="#">
					<li>
						<div>Misc</div>
						<div class="subScribe">&Uuml;briggebliebenes</div>
					</li>
				</a>
			</ul>
		</span>
		<span class="image"></span>
	</div>

CSS:

.menu {
}

.menu ul {
	width:				150px;

	margin-top:			0px;
	margin-bottom:			10px;

	padding-left:			0px;

	background-color:		#FFFFFF;

	list-style:			none outside;

	border-bottom:			2px solid #4E4E4E;
}

.menu li {
	border-top:			2px solid #4E4E4E;
	border-left:			2px solid #4E4E4E;
	border-right:			2px solid #4E4E4E;

	padding:			5px;
	padding-top:			5px;
	padding-bottom:			5px;
	padding-left:			5px;
	padding-right:			5px;

	font-size:			13px;
	font-weight:			bold;

	color:				#0170B5;
}

.menu li:hover {
	background-color:		#0170B5;
}

.menu a:link, a:visited, a:active {
	color:				#0170B5;

	text-decoration:		none;
}

.menu a:hover {
	color:				#FFFFFF;
}

Vielen Dank.

 

[Maik]

Hi,

ich hab mir das Ergebnis im Browser nicht näher angeschaut, da deine Listen-Navigation im Markup grundsätzlich falsch ausgezeichnet ist.

Das <a>-Element ist nicht das unmittelbare Nachfolgeelement des <ul>-Elements, sondern das <li>-Element, das einen Listeneintrag auszeichnet, und beispielsweise einen Verweis enthalten kann.

Desweiteren dürfen die verwendeten Inline-Elemente <span> und <a> keine Block-Elemente (<ul> u. <div>) enthalten - lies dir hierzu mal die HTML-Elementreferenz für Inline-Elemente durch.

mfg Maik

 

[awortmeier]

Ok,
mach ich wenn ich zuhause bin

 

[Maik]

Abschliessend kannst du entweder die padding-Deklaration anstelle des <li>-Elements auf das <a>-Element anwenden, damit beim "Berühren" des Innenabstandes seine Schriftfarbe geändert wird, oder du nutzt mit deinem derzeitigen Stylesheet diesen Selektor für Nachfahren:

.menu li:hover a {color:#fff;}

Ein valides Markup für die Listen-Navigation vorausgesetzt, damit der Selektor auch funktioniert

Und wozu überhaupt die Wiederholung nach der allgemeinen padding-Eigenschaft?

padding:            5px;
padding-top:            5px;
padding-bottom:         5px;
padding-left:           5px;
padding-right:          5px;

mfg Maik

 

[awortmeier]

Irgendwie bin ich zu doof dafür...

Hier mein validier HTML-Code:

<div class="menu">
		<div class="left">
			<ul>
				<li>
					<a href="#">
						<span>Startseite</span>
						<span class="subScribe">Aktuelle Themen</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Referenzen</span>
						<span class="subScribe">Meine Arbeiten</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Kontakt</span>
						<span class="subScribe">Schreiben Sie mir...</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Profil</span>
						<span class="subScribe">Wer bin ich?</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Misc</span>
						<span class="subScribe">&Uuml;briggebliebenes</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="image"></div>
	</div>

Und hier mein CSS-Code:

.menu span {
	display:			block;
}

.menu ul {
	width:				150px;

	margin:				0px;
	margin-bottom:			10px;

	padding-left:			0px;

	background-color:		#FFFFFF;

	list-style:			none outside;

	border-bottom:			2px solid #4E4E4E;
}

.menu li {
	border:				2px solid #4E4E4E;
	border-bottom:			0px;

	padding:			5px;

	font-size:			13px;
	font-weight:			bold;
}

.menu li:hover {
	color:				#FFFFFF;

	background-color:		#0170B5;
}

.menu a:link, a:visited {
	color:				#0170B5;

	text-decoration:		none;
}

.menu a:hover, a:active {
	color:				#FFFFFF;

	text-decoration:		none;
}

.subScribe {
	padding-left:			20px;

	font-size:			11px;
	font-weight:			normal;

	color:				#4E4E4E;
}

.left {
	float:				left;
}

.image {
	display:			block;

	float:				right;

	width:				450px;
	height:				200px;

	margin-top:			1px;

	background-color:		#000000;
	background-image:		url(../images/meer.png);
	background-repeat:		no-	repeat;
}

Wenn ich nun meinem <a>-Element die 5px Padding gebe, zerschießt er das ganz komisch.

 

[Maik]

Ich erkenne hiermit keinen Unterschied zur vorherigen Formatierung:

.menu li {
    border:             2px solid #4E4E4E;
    border-bottom:          0px;

    /*padding:            5px;*/ /* auskommentiert = deaktiviert */

    font-size:          13px;
    font-weight:            bold;
}

/* Neu */
.menu a {
    display:block;
    padding:5px;
}

mfg Maik

 

[awortmeier]

Ok, hab das nicht gepeilt.
Danke Maik.