Ho creato un menù, generato dal codice sotto riportato.
Non ho utilizzato gli elementi <UL> e <LI> perchè così facendo il menù mi sta contenuto perfettamente nella sua sede mentre con i LI mi veniva spostato leggermente in basso a destra.
Il menù si vede correttamente in Firefox, safari e chrome, mentre in IE anzichè essere orizzontale, viene visualizzato in verticale e per la lunghezza massima degli elementi.
Riporto sotto un immagine, il link ed il codice.
Grazie
- Kiko -
www.dalessandroegalli.com/nuovo/
![]()
Codice PHP:
<div id="menu">
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/index.php"]<span>Home</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/tickets.php"]<span>Tickets</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/history.php"]<span>History</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/archivio.php"]<span>Archive</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/"]<span>Festivals</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/cantacts.php"]<span>Contacts</span>[/url]</div>
<div class="collega">[url="http://www.dalessandroegalli.com/nuovo/mail.php"]<span>Mail</span>[/url]</div>
</div>
#menu {
width:920px;
height:35px;
background-color:#000;
margin:0;
padding:0;
}
.collega{
position:relative;
top:0px;
left:0px;
padding-left: 0;
margin-left: 0;
background-color: #333;
color: White;
float: left;
width: 100%;
display: inline;
}
.collega a
{
float: left;height: 35px;padding-left: 18px;
font: bold 14px arial, helvetica, sans-serif;
background: url(../img/bottone.png) no-repeat top left;
text-decoration: none;color: #FFCC00;
line-height:30px;
display: inline;
}
.collega span{
display: block;
height:35px;
padding-right: 18px;
background: url(../img/bottone.png) no-repeat top right
display: inline;
}
.collega a:hover
{
background-position: bottom left;
color: #FFF;
}
.collega a:hover span{
background-position: bottom right;
line-height:30px;
}

Rispondi quotando