Acid Queen
19-05-2011, 15:28
Salve a tutti.
Sto facendo il nuovo sito per una band e ho uno strano problema con un menu orizzontale.
Per costruirlo ho usato una lista orizzontale e la tecnica css dello sprite.
Quello che esce fuori è questo:
http://img535.imageshack.us/img535/460/menu1j.jpg (http://imageshack.us/photo/my-images/535/menu1j.jpg/)
Le varie voci dovrebbero essere molto più vicine fra di loro!
Come mai mi escono così distanti l'una dall'altra?
Vi allego il codice HTML del menu:
<ul id="bandmenu">
<li class="voce"><a href="band.html">VOCE</a></li>
<li class="chitarre"><a href="chitarra.html">CHITARRA</a></li>
<li class="batteria"><a href="batteria.html">BATTERIA</a></li>
<li class="basso"><a class="active" href="basso.html">BASSO</a></li>
<li class="tastiere"><a href="tastiere.html">TASTIERE</a></li>
</ul>
E qui il codice CSS:
ul#bandmenu {
list-style: none;
width: 100%;
height:43px;
position:absolute;
left:130px;
top:-20px;
}
ul#bandmenu li {
display:inline;
}
ul#bandmenu li a {
height: 43px;
float:left;
text-indent: -9999px;
}
ul#bandmenu li.voce a {width: 76px; background: url(images/bandsprite.gif) no-repeat 0px 0px;}
ul#bandmenu li.chitarre a {width: 102px; background: url(images/bandsprite.gif) no-repeat -76px 0px;}
ul#bandmenu li.batteria a {width: 112px; background: url(images/bandsprite.gif) no-repeat -178px 0px;}
ul#bandmenu li.basso a {width: 95px; background: url(images/bandsprite.gif) no-repeat -290px 0px;}
ul#bandmenu li.tastiere a {width: 107px; background: url(images/bandsprite.gif) no-repeat -385px 0px;}
ul#bandmenu li.voce a:hover {width: 76px; background: url(images/bandsprite.gif) no-repeat 0px -43px;}
ul#bandmenu li.chitarre a:hover {width: 102px; background: url(images/bandsprite.gif) no-repeat -76px -43px;}
ul#bandmenu li.batteria a:hover {width: 112px; background: url(images/bandsprite.gif) no-repeat -178px -43px;}
ul#bandmenu li.basso a:hover {width: 95px; background: url(images/bandsprite.gif) no-repeat -290px -43px;}
ul#bandmenu li.tastiere a:hover {width: 107px; background: url(images/bandsprite.gif) no-repeat -385px -43px;}
ul#bandmenu li.voce a.active {width: 76px; background: url(images/bandsprite.gif) no-repeat 0px -43px;}
ul#bandmenu li.chitarre a.active {width: 102px; background: url(images/bandsprite.gif) no-repeat -76px -43px;}
ul#bandmenu li.batteria a.active {width: 112px; background: url(images/bandsprite.gif) no-repeat -178px -43px;}
ul#bandmenu li.basso a.active {width: 95px; background: url(images/bandsprite.gif) no-repeat -290px -43px;}
ul#bandmenu li.tastiere a.active {width: 107px; background: url(images/bandsprite.gif) no-repeat -385px -43px;}
Avete qualche idea del perchè mi esce quello strano distanziamento?
Grazie
edit...
vi posto anche un'immagine del menu un pò rialzato, dove si vedono chiaramente quei spazi che non dovrebbero esserci
http://img199.imageshack.us/img199/6175/menu2bj.jpg (http://imageshack.us/photo/my-images/199/menu2bj.jpg/)
Sto facendo il nuovo sito per una band e ho uno strano problema con un menu orizzontale.
Per costruirlo ho usato una lista orizzontale e la tecnica css dello sprite.
Quello che esce fuori è questo:
http://img535.imageshack.us/img535/460/menu1j.jpg (http://imageshack.us/photo/my-images/535/menu1j.jpg/)
Le varie voci dovrebbero essere molto più vicine fra di loro!
Come mai mi escono così distanti l'una dall'altra?
Vi allego il codice HTML del menu:
<ul id="bandmenu">
<li class="voce"><a href="band.html">VOCE</a></li>
<li class="chitarre"><a href="chitarra.html">CHITARRA</a></li>
<li class="batteria"><a href="batteria.html">BATTERIA</a></li>
<li class="basso"><a class="active" href="basso.html">BASSO</a></li>
<li class="tastiere"><a href="tastiere.html">TASTIERE</a></li>
</ul>
E qui il codice CSS:
ul#bandmenu {
list-style: none;
width: 100%;
height:43px;
position:absolute;
left:130px;
top:-20px;
}
ul#bandmenu li {
display:inline;
}
ul#bandmenu li a {
height: 43px;
float:left;
text-indent: -9999px;
}
ul#bandmenu li.voce a {width: 76px; background: url(images/bandsprite.gif) no-repeat 0px 0px;}
ul#bandmenu li.chitarre a {width: 102px; background: url(images/bandsprite.gif) no-repeat -76px 0px;}
ul#bandmenu li.batteria a {width: 112px; background: url(images/bandsprite.gif) no-repeat -178px 0px;}
ul#bandmenu li.basso a {width: 95px; background: url(images/bandsprite.gif) no-repeat -290px 0px;}
ul#bandmenu li.tastiere a {width: 107px; background: url(images/bandsprite.gif) no-repeat -385px 0px;}
ul#bandmenu li.voce a:hover {width: 76px; background: url(images/bandsprite.gif) no-repeat 0px -43px;}
ul#bandmenu li.chitarre a:hover {width: 102px; background: url(images/bandsprite.gif) no-repeat -76px -43px;}
ul#bandmenu li.batteria a:hover {width: 112px; background: url(images/bandsprite.gif) no-repeat -178px -43px;}
ul#bandmenu li.basso a:hover {width: 95px; background: url(images/bandsprite.gif) no-repeat -290px -43px;}
ul#bandmenu li.tastiere a:hover {width: 107px; background: url(images/bandsprite.gif) no-repeat -385px -43px;}
ul#bandmenu li.voce a.active {width: 76px; background: url(images/bandsprite.gif) no-repeat 0px -43px;}
ul#bandmenu li.chitarre a.active {width: 102px; background: url(images/bandsprite.gif) no-repeat -76px -43px;}
ul#bandmenu li.batteria a.active {width: 112px; background: url(images/bandsprite.gif) no-repeat -178px -43px;}
ul#bandmenu li.basso a.active {width: 95px; background: url(images/bandsprite.gif) no-repeat -290px -43px;}
ul#bandmenu li.tastiere a.active {width: 107px; background: url(images/bandsprite.gif) no-repeat -385px -43px;}
Avete qualche idea del perchè mi esce quello strano distanziamento?
Grazie
edit...
vi posto anche un'immagine del menu un pò rialzato, dove si vedono chiaramente quei spazi che non dovrebbero esserci
http://img199.imageshack.us/img199/6175/menu2bj.jpg (http://imageshack.us/photo/my-images/199/menu2bj.jpg/)