Roll-Over-Navigation Problem

[muplo]

N'abend,

Ich bin dabei an der Navigationsleiste einer Homepage für einen Bekannten zu arbeiten und da ist mir aufegfallen, dass man sie so gar nichtt in HTML und CSS umsetzen kann. Denn sobald ich den zweiten Punkt so neben dem ersten platzieren möchte, legt er sich nur darüber, so dass die Ecke vom ersten verschwindet. Weiß jemand, wie ich diese Leiste doch umsetzen kann?



html:

<div id="nav">  
<ul>  
    <li class="leistung"><a href="#a"></a></li>  
    <li class="malerteam"><a href="#b"></a></li>  
    <li class="referenzen"><a href="#c"></a></li>  
    <li class="home"><a href="#d"></a></li>  
    <li class="malergeschaeft" ><a href="#e"></a></li>
    <li class="kontakt"><a href="#f"></a></li>  
    <li class="impressum"><a href="#g"></a></li>   
</ul>  
</div>

css:

#nav ul li a {
	height:45px;
	width:105px;
	display:block;
	float:left;
}
#nav ul .leistung a {
	background-image: url(img/nav_sprite_t.png);
	background-repeat:no-repeat;
}
#nav ul .leistung a:hover {
	background-image: url(img/nav_sprite_t.png);
	background-repeat:no-repeat;
	background-position: 0px -46px;
}
#nav ul .malerteam a {
	background-image: url(img/nav_sprite_t.png);
	background-repeat:no-repeat;
	background-position:0px -92px;
}
#nav ul .malerteam a:hover {
	background-image: url(img/nav_sprite_t.png);
	background-repeat:no-repeat;
	background-position: 0px -139px;
}

#nav ul li {
	list-style-type: none;
}

Auf jegliche Hilfestellung würde ich mich sehr freuen!!
Danke

 

[Zieger]

da fehlt die transparenz in den ecken.

ich würde die hintergrundgrafik ohne texte als transparentes png speichern.

buttons weiter auseinander schieben in der png, dann hat man auch die transparenzen in den ecken.

und die menütexte mit normalem css formatieren.


man könnte die buttons auch komplett mit css nachbauen.

für die ecken:
http://apps.eky.hk/css-triangle-generator/

 

[muplo]

Also ich habe die Abstände jetzt sehr groß gesetzt und die Grafik als eigenes png (natürlich mit transparenten Hintergrund) gespeichert. Aber genau dasselbe passiert jetzt auch, kommen sich die einzelnen Elemente zu nah, legt sich das eine Element über das andere als hätte es keine Transparenz. Muss ich noch opacity oder so noch einstellen?

 

[Zieger]

nee, sollte funktionieren.

hab's mal schnell nachgebaut.

 

[muplo]

nee, sollte funktionieren.

hab's mal schnell nachgebaut.

Anhang anzeigen 118947

oh man ich idiot! vielen dank dir!!! danke danke danke

 

[Zieger]

gerne