In der Vergangenheit hatte ich immer einzelne Navigationselemente erstellt. Da es in Mode gekommen ist, sämtliche Navigationselemente in einer einzelnen Grafik abzuspeichern, wollte ich das nun auch einmal versuchen. Irgendwie ist mir das aber unklar.
Ich hoffe, ihr könnt mir das anhand einer Beispielnavigation verständlich erläutern. Nehmen wir eine fiktive Beispielnavigation aus drei Navigationspunkten an, die der Einfachheit alle 100 Pixel breit und 50 Pixel hoch sind. Dadurch ergibt sich eine Breite von 300 Pixeln und eine Höhe von 150 Pixeln.
Mein Code sieht so aus.
Ich hoffe, ihr könnt mir das anhand einer Beispielnavigation verständlich erläutern. Nehmen wir eine fiktive Beispielnavigation aus drei Navigationspunkten an, die der Einfachheit alle 100 Pixel breit und 50 Pixel hoch sind. Dadurch ergibt sich eine Breite von 300 Pixeln und eine Höhe von 150 Pixeln.
Mein Code sieht so aus.
Code:
/* -------------------------------------------------------------------------------------- */
/* ----------------------------------| Navigation Main |------------------------------- */
/* -------------------------------------------------------------------------------------- */
ul#navi {
position:absolute;
top:295px;
}
ul#navi li {
float:left;
text-indent:-9999px;
}
ul#navi li a {
position:absolute;
top:-94px;
left:176px;
background:url(../images/menu-complete.jpg) 0 0 no-repeat;
width:300px;
height:50px;
display:block;
}
/* ------------------------------------| Eins |---------------------------------- */
ul#navi #eins {
width:100px;
background-position:0 0;
}
ul#navi #eins:hover { background-position:0 -100px; }
ul#navi #eins:active { background-position:0 -50px; }
/* -------------------------------------| Zwei |---------------------------------- */
ul#navi #zwei {
width:100px;
background-position:-200px 0;
}
ul#navi #zwei:hover { background-position:-200px -100px; }
ul#navi #zwei:active { background-position:-200px -50px; }
/* -------------------------------------| Drei |---------------------------------- */
ul#navi #drei {
width:100px;
background-position:-300px 0;
}
ul#navi #drei:hover { background-position:-300px -100px; }
ul#navi #drei:active { background-position:-300px -50px; }
Code:
<ul id="navi">
<li><a href="eins.html" title="Einse" id="eins">Eins</a></li>
<li><a href="zwei.html" title="Zwei" id="zwei">Zwei</a></li>
<li><a href="drei.html" title="Drei" id="drei">Drei</a></li>
</ul>
