✔ Abstand zwischen li Elementen

[aTa]

Hi,
ich bin dabei grad eine Navigation mit li-Elementen zu machen. In jedem li habe ich eine Grafik für den jeweiligen Navipunkt drin. Nun ist das Problem das zwischen jedem Element ein ca 2-3px großer Abstand ist. Wie bekomm ich denn raus?
Ist es sinnvoller jedem Navipunkt das gleiche Backgroundimage zu geben und dann die Punkte als Text reinzuschreiben?
Danke schonmal!

Markus

Noch etwas Code

<ul>
	 	<li><a href="?id=start"><img src="images/navi/startseite.png" border="0"></a></li>
	 	<li><a href="?id=aktuelles"><img src="images/navi/aktuelles.png" border="0"></a></li>
	 	<li><a href="?id=chor"><img src="images/navi/chor.png" border="0"></a></li>

 

[Maik]

Hi,

Ist es sinnvoller jedem Navipunkt das gleiche Backgroundimage zu geben und dann die Punkte als Text reinzuschreiben?

genau so bekommst du auch die unerwünschte Lücke geschlossen.

 

[aTa]

Ok, und dann quasi dem li-Element einfach nen Background geben

 

[Maik]

Die Hintergrundbilder kannst du auch für die Links definieren:

#nav a {
display: block;
width: 100px; /* Grafikbreite */
height: 20px; /* Grafikhöhe */
}

#nav a#start {
background: url(images/navi/startseite.png);
}

#nav a#aktuelles {
background: url(images/navi/aktuelles.png);
}

#nav a#chor {
background: url(images/navi/chor.png);
}

#nav a span {
display: none;
}

<ul id="nav">  
   <li><a href="?id=start" id="start"><span>Start</span></a></li>
   <li><a href="?id=aktuelles" id="aktuelles"><span>Aktuelles</span></a></li>
   <li><a href="?id=chor" id="chor"><span>Chor</span></a></li>
</ul>

 

[aTa]

Perfekt, Danke!

 

[aTa]

Noch ein kleines Problem, und zwar hab ich nun mit:

#navi a {
display: block;
text-decoration:none;
width: 145px; /* Grafikbreite */
height: 22px; /* Grafikhöhe */
background: url(images/navi/navi_bg.png);
padding-left:5px;
}

die Grafik platziert und nur den Text im Link angegeben, nur steht der Text nun nicht mittig auf der Grafik, sondern am oberen Rand.
Gibts überhaupt ne Möglichkeit das mittig zu setzten`?

 

[Maik]

Wandel die height-Eigenschaft in line-height um:

#navi a {
display: block;
text-decoration:none;
width: 145px; /* Grafikbreite */
line-height: 22px; /* Grafikhöhe */
background: url(images/navi/navi_bg.png);
padding-left:5px;
}

 

[aTa]

Danke, man könnte echt meinen du bist ein wandelndes CSS-Buch