Salve a tutti, mi chiamo Cristian.
Sto costruendo un menu orizzontale utilizzando il CSS, come file ho un semplicissimo menu in html, il suo relativo css e alcune immagini che lo compongono.
Il risultato è soddisfacente, ma nel primo pulsante a partire da sinistra non c'è quella barra sottile che divide gli altri pulsanti l'uno dall'altro.
Posto qui il codice HTML e CSS:
codice:
#menu {
position:relative;
height:45px;
background-image:url(images/bg_white.png);
background-position:bottom;
background-repeat:repeat-x;
margin:0 0 25px 0;
clear:both;
border-bottom:1px solid #ccc;
top:50px;
}
#menu ul#menu-interno{
margin:0 auto;
padding: 3px 0px 0px 0px;
width:544px;
}
#menu ul#menu-interno li{
float:left;
height:45px;
font-family: Arial, sans-serif;
font-size:14px;
margin:0 !important;
line-height:45px;
color:black;
position:relative;
}
#menu ul#menu-interno li a{
font-weight: bold;
color: black;
padding: 12px 25px 12px 24px;
background: url(images/bg_white.png) repeat-x 100% 0;
background-position: 100% 0px;
text-decoration: none;
}
#menu ul#menu-interno li a:hover{
background-position: 100% -40px;
color: black;
}
Metto anche le immagini:
- Immagine utilizzata nel CSS:
Questa è quella originale

Questa è quella modificata, tale da avere lo stesso bordo anche sul lato sinistro

- Risultato finale:

Domanda: come faccio a far sì che sia presente quel sottile bordo anche sul lato sinistro del primo pulsante ?
Ho provato anche a creare un pulsante vuoto, e il bordo salta fuori, ma mi occupa spazio inutilmente nella barra, spostandomi tutto più a destra: colpa del padding. Qualcuno riuscirebbe a farmi vedere come forzare il padding a 0 però solo per quel pulsante vuoto ? Caso mai attraverso una class o un'id specifico solo per questo caso.
Grazie mille in anticipo a tutti,
Cristian.