Unterstreichung im Menü (nicht text-decoration)

[dwex]

Hallo Leute,

ich muss ein Layout umsetzen und hänge momentan an einer Vorgabe.

Ich habe folgenden Quellcode:

#menu_neu {
	background-color: orange;
	width: 150px;
}

#menu_neu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#menu_neu ul li {
	padding-left: 10px;
	margin-bottom: 5px;
}

.aktuell {
	border-bottom: 1px solid white;
}

und folgendes HTML

<div id="menu_neu">
<ul>
	<li>Home</li>
	<li class="aktuell">Produkte</li>
	<li>Wir &uuml;ber uns</li>
	<li>Kontakt</li>
	<li>Impressum</li>
</ul>
</div>

Das Ergebnis habe ich in der Datei ergebnis001.jpg (also der linken Grafik) festgehalten.
Jetzt würde ich jedoch die Unterstreichung (welche ja immer ganz vorne beginnen soll - aus diesem Grund scheidt "text-decoration" ja aus) gern nur bis zum Ende des jeweiligen Wortes (bzw. bis zum Ender der jeweiligen Wörter) gehen lassen so wie es im ergebnis002.jpg (also der rechten Grafik) zu sehen ist.

Hat jemand eine Idee wie man das bewerkstelligen könnte?
Vielen Dank für eure Hilfe im voraus!

 

[Anna Bolika]

Schön ist zwar anders. Aber wie w wäre es, doch text-decoration zu nehmen und statt dem padding-left von 10px zweimal   vor jeden Menüpunkt zu schreiben?

Außerdem könnte man (hab ich nicht probiert) mal mit display:inline beim li-Element rumprobieren.

 

[dwex]

An die &bspn;-Variante habe ich auch schon gedacht - fand es jedoch auch nicht schön. Außerdem weis ich nicht ob sich diese Variante nicht nachteilig beim SEO auswirkt.

 

[djheke]

Na so

.aktuell a {
 border-bottom:1px solid #fff;
}

a {
 text-decoration:none;
}

Teste mal bitte und du wirst merken, dass es keinen Unterschied macht, ob du text-decoration oder border-bottom nimmst. Es sei denn, dass deine a Elemente später Block-Elemente werden sollen.

 

[dwex]

@djheke

ich hoffe du hast bemerkt, dass ich die underline auch noch vor dem Texthaben möchte und das geht eben nicht mit text-deocration ( zumindest nicht ohne vorangestellte   ).

Außerdem macht es sehr wohl einen Unterschied ob ich border-bottom oder text-decoration nehme denn bei border-bottom ist das Ergebnis, dass die ganze Zeile unterstrichen wird (linke grafik) und bei text-decoration wird "nur" das Wort selbst unterstrichen.

 

[djheke]

Hab's übersehen. Sorry.

So spontan fällt mir das ein

.aktuell a {
    border-bottom: 1px solid white;
    padding-left:10px;
    margin-left:-10px;
    text-decoration:none;

oder so

#menu_neu ul li.aktuell {
 padding-left:0px;
} 
#menu_neu ul li.aktuell a {
 border-bottom: 1px solid white;
 padding-left:10px;
 text-decoration:none;
}

 

[dwex]

@djheke
genau das ist der Effekt den ich erzielen wollte.
Leider funktioniert das ganze im IE (8) nicht.

 

[djheke]

Da kann ich dir nicht helfen, da ich im Moment kein Windows habe.

 

[dwex]

#menu_neu ul li.aktuell {
 padding-left:0px;
} 
#menu_neu ul li.aktuell a {
 border-bottom: 1px solid white;
 padding-left:10px;
 text-decoration:none;
}

Ich würd mal so sagen - das ist wohl perfekt - funktioniert auch im IE