Navigationen sollte man am besten in einer ungeordneten Liste verschachteln.
Code:
<div id="navigationen">
<ul id="nav_rot">
<li><a href="#">Link mit roten bullet</a></li>
<li><a href="#">Ein weiterer Link mit rotem Bullet</a></li>
</ul>
<ul id="nav_blau">
<li><a href="#">Link mit blauem bullet</a></li>
<li><a href="#">Ein weiterer Link mit blauem Bullet</a></li>
</ul>
</div>
Code:
div#navigationen ul {
margin:0;
padding:0; /* Diese Angaben sind bei einem CSS Prolog unnötig, aber bevor es nacher wieder heißt 'Dein Code ist Müll ... */
}
div#navigationen ul li {
padding-left:<breite der Grafik>px;
background-repeat:no-repeat;
background-position:0 0; /* Oder top left */
}
div#navigationen ul#nav_rot li {
background-image:url('<rote bullte grafik>.Endung');
}
/* usw */
Ein Beispiel, sicherlich nicht das beste. Ich habe extra lange Namen verwendet und keine CSS Kurzformen um es klar zu machen, bevor tausend anderer Fragen kommen. Der Code ist auch nicht zum stumpf kopieren gedacht.
