Hello everybody,
I figured out a workaround using a div container with absolute position to place the navigation bar and a separate div with absolute position for every button.
Now the HTML code looks like:
<div id=“nav”>
<div id=“nav_home”><a href=“http://www.faqtotum.eu” title=“Pagina principale per creare un sito internet artigianale”></a></div>
<div id=“nav_servizi”><a href=“http://www.faqtotum.eu” class=“selected” title=“Pagina principale per creare un sito internet artigianale”></a></div>
<div id=“nav_portfolio”><a href=“http://www.faqtotum.eu” title=“Pagina principale per creare un sito internet artigianale”></a></div>
<div id=“nav_bio”><a href=“http://www.faqtotum.eu” title=“Pagina principale per creare un sito internet artigianale”></a></div>
<div id=“nav_contatti”><a href=“http://www.faqtotum.eu” title=“Pagina principale per creare un sito internet artigianale”></a></div>
</div>
with its CSS:
#nav {
position:absolute;
width:600px;
right:20px;
top:176px;
height:25px;
margin:0;
padding:0;
}
#nav_home {
position:absolute;
top:176;
right:480px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_home a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/home.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_home a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_home a.selected {
background-position: bottom right;
border:0px;
}
#nav_servizi {
position:absolute;
top:176;
right:360px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_servizi a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/servizi.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_servizi a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_servizi a.selected {
background-position: bottom right;
border:0px;
}
#nav_portfolio {
position:absolute;
top:176;
right:240px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_portfolio a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/portfolio.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_portfolio a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_portfolio a.selected {
background-position: bottom right;
border:0px;
}
#nav_bio {
position:absolute;
top:176;
right:120px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_bio a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/bio.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_bio a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_bio a.selected {
background-position: bottom right;
border:0px;
}
#nav_contatti {
position:absolute;
top:176;
right:0px;
width:120px;
height:25px;
background-position:top right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_contatti a {
position:absolute;
width:120px;
height:25px;
background-position:top right;
background-image:url(immagini/contatti.gif);
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_contatti a:hover {
position:absolute;
width:120px;
hieght:25px;
background-position:bottom right;
border:0px;
outline:none;
margin:0;
padding:0;
}
#nav_contatti a.selected {
background-position: bottom right;
border:0px;
}
I found it a bit redundant, but I’ve not been able to find out a different solution.
Thnx
Matteo