✔ Trennzeichen zwischen li's

[aquasonic]

Hallo zusammen,

Ich bin gerade daran eine neue Seite aufzusetzten. Dort habe ich alle Komponenten schon vorgegeben. Ich muss somit nur das Design erstellen und habe auch nur Zugriff auf das CSS, also kein Zugriff auf den Code.

Schaut euch doch als erstes den angehängten Screenshot der Navigation an. Ich bekomme da also eine Aufzählungsliste, welche ich dann wie folgt formatiere:

div#navtabs {
	float: left;
	margin-left: -1px;
}


div#navtabs ul {
	position: static;
	padding: 0px;
	font-size: 12px;
	
}

div#navtabs li a {
	color: #676666;
	background-color: #dcdcdc;
	display: block;
	height: 33px;
	width: auto;
	float:left;
	font-weight: bold;
	padding: 0px;
	padding-left: 8px;
	padding-right: 8px;
	border: 0px;
	background-image: url(../images/nav_trennzeichen.gif);
	background-position: left;
	background-repeat: no-repeat;
}

div#navtabs li a:hover {
	color: #FFFFFF;
	background-color: #9a9a9b;
}

#navtabs li.selected {
	color: #FFFFFF;
	background-color: #9a9a9b;
	border: 0px;
}

#navtabs li.selected a {
	color: #FFFFFF;
	background-color: #9a9a9b;
	border: 0px;
}

Wie ihr seht ist das Trennzeichen eine Hintergrundbild, welches links angeordnet ist. (ganz links am Rand wird es versteckt.)

Nun habe ich jedoch das Problem, dass ich beim hover-Effekt ich den Strich vom li nebendran immer noch sehen (ebenfalls in der Klasse .selected). Dies sollte aber nicht sein, denn wie ihr seht sieht dies nicht gut aus Zur Verdeutlichung noch einmal ein Scrrenshot.

Habt ihr eine Lösung, wie ich das Trennzeichen "überdecken" kann, und zwar immer vom Element rechts nebendran, und nur beim hover oder beim selected?

Wäre euch wirklich dankbar für jeden Lösungsansatz

PS: Teils sind im CSS Teile drin, die nicht unbedingt nötig sind. Diese braucht es aber doch, um gewissen Teile von einem globalen CSS zu überschreiben.

 

[Maik]

Das Verhalten ist doch "total normal", daß die Hintergrundgrafik des benachbarten Elements sichtbar bleibt, wenn das linke Element mit der Maus überfahren wird.

Wenn die Hintergrundgrafik mit dem :hover-Effekt "verschwinden" soll, dann positioniere sie innerhalb des Links auf der rechten Seite und schalte sie mit background-image:none in der :hover-Pseudoklasse aus.

 

[aquasonic]

Ja, dieser Effekt ist "leider" normal Ich möchte dies aber irgendwie umgehen. Ich kann auch nicht das Hintergrundbild beim :hover abschalten, da es ja nicht der Strich des Elements mit dem :hover ist, sondern das Element rechts nebendran. Und wenn ich den Background rechts positioniere, dann sieht man ihr einfach dann beim linken Element.

Hast du eine andere Lösung wie ich diese Trennlinie rein mit CSS reinkriege?

// EDIT: Eigentlich müsste ich im :hover den Block des Links um ein Pixel vergrössern ohne die anderen Elemente zu verschieben, d.h. der aktuelle Block (der im :hover) sollte 1 Pixel über den Block rechts kommen.

 

[Maik]

Da denkst du falsch.

Wenn das Hintergrundbild in dem Link rechts positioniert ist, kannst du es auch beim Überfahren ausblenden:

div#navtabs li a {
	color: #676666;
	background-color: #dcdcdc;
	display: block;
	height: 33px;
	width: auto;
	float:left;
	font-weight: bold;
	padding: 0px;
	padding-left: 8px;
	padding-right: 8px;
	border: 0px;
	background-image: url(../images/nav_trennzeichen.gif);
	background-position: right;
	background-repeat: no-repeat;
}

div#navtabs li a:hover {
	color: #FFFFFF;
	background-color: #9a9a9b;
        background-image: none;
}

 

[aquasonic]

Ja schon, aber dann siehst du ihn einfach links, siehe Attachement. Und siehe meine Edit oben

 

[Maik]

Ist klar, entweder befindet sich die Grafik auf der linken, oder eben auf der rechten Seite, ein dazwischen gibt es nicht

 

[aquasonic]

Und ein überlappen ist nicht möglich? Und es gibt da auch keine andere Möglichkeit?

EDIT: Ich hab nun eine (mehr oder weniger saubere, hoffe ich zumindest) Lösung gefunden:

div#navtabs li a {
	color: #676666;
	background-color: #dcdcdc;
	display: block;
	height: 33px;
	width: auto;
	float:left;
	font-weight: bold;
	padding: 0px;
	padding-left: 8px;
	padding-right: 8px;
	border: 0px;
	background-image: url(../images/nav_trennzeichen.gif);
	background-position: left;
	background-repeat: no-repeat;
	position: relative;
}

div#navtabs li a:hover {
	color: #FFFFFF;
	background-color: #9a9a9b;
	left: 1px;
	margin-left: -1px;
	padding-right: 9px;
	z-index: 2;
}