✔ Rollover bei Schräger Navi

Moin,

für jede der drei Bilddateien wäre zunächst mal im Quellcode ein gesondertes HTML-Element erforderlich.

Da bietet es sich an, eine unsortierte Liste (<ul>) für die Navigation zu nutzen, und in den <li>-Tags jeweils ein <a>-Element mit eingebundenen <span>-Element zu notieren:

HTML: 
<ul id="nav">
    <li><a href="#"><span>link</span></a></li>
</ul>


Im CSS bekommt nun das <li>-Element den linken Abschnitt, das <a>-Element den rechten, und das <span>-Element den mittleren Abschnitt zugewiesen.

Die drei erforderlichen Selektoren für den Rollover (Grafik-Tausch) finden sich im Anschluß an den gleichlautenden Kommentar:

CSS: 
ul#nav {
list-style:none;
}
ul#nav li {
background:url(left.png) left top no-repeat;
float:left;
height:30px;
padding-left:30px; /* entspricht der Bildbreite von "left.png" */
}
ul#nav li a  {
background:url(right.png) right top no-repeat;
float:left;
height:30px;
padding-right:30px; /* entspricht der Bildbreite von "right.png" */
}
ul#nav li a span {
background:url(middle.png);
float:left;
height:30px;
}
/* Rollover */
ul#nav li:hover {
background:url(left_hover.png) left top no-repeat;
}
ul#nav li:hover a {
background:url(right_hover.png) right top no-repeat;
}
ul#nav li:hover a span {
background:url(middle_hover.png);
}

Theoretisch liessen sich hierfür anstelle der drei Bilddateien auch nur zwei nutzen, in dem der mittlere Bereich mit dem rechten zu einem Bild vereint wird, womit das <span>-Element entfallen würde - Stichwort: Sliding Doors of CSS, Part II.

mfg Maik
 
Jo, sieht da nicht so prickelnd aus, wie bei mir :-)

45°-navi.jpg
(v.l.n.r.: normal, :hover)

Gibt's das Ganze bei dir auch irgendwo live zum Begutachten?

Den von dir im Editor abgelichteten CSS-Code kenn ich ja soweit schon, nur mit anderen Bilddateien und numerischen Werten :p

mfg Maik
 
So muss da jetzt nochmal nerven. Und zwar ist mein Problem nun, dass ich mehrere Navigationen nebeneinander habe, wie auch im ersten Post im Bild gezeigt. Wie kriege ich denn nun hier den Hover hin?

MfG
EGJSoldier
 
Also jetzt komme ich nicht weiter. Und zwar habe ich zwie Probleme.
1. Wie kriege ich die ul's nebeneinander und
2. Der Rollover wird bei der zweiten Navi nicht ganz angezeigt. Der verändert das Linke Bild nicht. Ich denke mal, dass der Fehler in der CSS bei:
Code: 
ul#nav1 li:hover {
	background:url(Bilder/bewerbung_hover_05.png) left top no-repeat;
}
liegt. Wie muss es denn richtig heißen

MfG
EGJSoldier
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück