Sto effettuando il restyling di un mio sito, ma ho un problema con la realizzazione della navbar. Vi spiego.
Come potete vedere dal pezzetto di screenshot in allegato, ho inserito dei separatori fra le voci della barra di navigazione, semplicemente utilizzando l'attributo "border". Il problema e' che vorrei fare in modo che questo bordo coprisse l'intera barra di navigazione, mentre adesso viene automaticamente ridotto alla dimensione del carattere. Inoltre, adesso come vedete dal CSS, sono costretto a centrare il testo con un padding/margin: 6px, perche' altrimenti mi viene posizionato in alto, della barra. Anche questo e' un problema, visto che se lascio il padding, anche il bordo che separa i links risulta spostato!
Uso XHtml 1.0 Trans. Ecco i codici:
<!-- Nella pagina Xhtml -->
<div id="main">
<div id="header">
<div id="logo">.............</div>
<div id="testata" align="center"></div>
</div> <!-- Questo chiude il DIV Header -->
<!-- Barra del Menu' -->
<div class="menu" id="menu">
<ul>
<li class="firstmenu"><strong><a href ................ </a></li>
<li><strong><a href ................ </a></li>
<li><strong><a href ................ </a></li>
</ul>
</div>
................... OMISSIS ...............
</div> <!-- Questo DIV chiude quello MAIN -->
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
padding-right: 0%;
padding-left: 0%;
font-size: 10pt;
padding-bottom: 0px;
margin: 0px 0px 0px;
color: #000000;
padding-top: 0px;
text-align: center;
}
/* Stile della sezione proncipale (div main) */
#main {
background: #FFFFFF;
border:none;
width:100%;
margin: 0px auto;
text-align: center;
height:auto
}
#header {
background: url(url_immagine) repeat-x;
height:114px;
width:100%;
}
/* Stile del logo del sito (div logo) */
#logo {
padding-top: 0px;
text-align: left;
position:static;
padding-right: 0%; padding-left: 0%; margin: 0px 0px 0px; width:25%; float:left;
}
/* Stile della testata del sito (div testata) */
#testata {
float:right;
background:url(url_immagine) no-repeat center;
padding-top: 0px;
position:static;
margin: 0px auto;
width:70%;
height:114px;
}
#testata h1 {
font-weight: bolder;
font-size: 18px;
color: #1164b6;
}
#testata p {
font-weight: bolder;
font-size: 11px;
color: #797979;
}
/* Stile della barra del menu */
.menu {
clear: both;
background:url(url/immagini/immagine.jpg) left top repeat-x #CCCCCC;
width: 100%;
height: 35px;
text-align:center;
font-family: Verdana, Geneva, Arial;
position:static;
margin:0px auto;
}
#menu ul {
margin: 0px auto;
width: 100%;
[b] padding-top: 6px;[/b]
list-style-type: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
font-weight: bolder;
[b]border-right: #1164b6 3px groove; [/b]
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.0em;
color: #ffffff;
height:30px;
font-size:12px;
}
#menu ul li.firstmenu a {
[b] border-left: #1164b6 3px groove; [/b] font-size:12px;
}
#menu ul li a:visited {
font-weight: bolder;
[b]border-right: #1164b6 3px groove; [/b]
margin-top:0px;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.0em;
color: #ffffff;
height:30px;
font-size:12px;
}
#menu ul li a:hover {
font-weight: bolder;
color: #000000;
text-decoration:underline;
padding-bottom: 0.0em;
height:30px;
font-size:12px;
}
09-11-2007, 21:31
