Rispondi 
Problema CSS con navbar
Modalità discussione Modalità lineare
09-11-2007, 21:31
Messaggio: #1 (permalink)
L'avatar di kru kru
Apprendista
**
 		Registrato: Feb 2007
Messaggi: 83
Reputazione:

Problema CSS con navbar

Ciao, ragazzi.

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!

Mi sapete aiutare?

Uso XHtml 1.0 Trans. Ecco i codici:

Codice:
<!-- 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 -->


Il CSS:

Codice:
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;
}



File allegato(i) Anteprima(e)
   
Vuoi posizionare il tuo sito in prima pagina sui principali motori di ricerca? In prima pagina sui motori - Web Agency e posizionamento -

Visita sito dell'autore trova tutti i messaggi dell'autore Quota questo messaggio nella risposta
Rispondi 

Discussioni simili
Discussione: Autore Risposte: Letto: Ultimo messaggio
Shy Problema con link in menù javascript @gnese 5 69 16-06-2008 22:20
Ultimo messaggio: MetaMorph
  Problema navigazione Irvin 7 107 30-03-2008 12:46
Ultimo messaggio: Irvin
  Problema con l\'onload di JavaScript yuri 4 115 26-03-2008 15:21
Ultimo messaggio: yuri

Problema CSS con navbar
Guarda versione stampabile
Invia la discussione a un amico
Sottoscrivi la discussione
Aggiungi discussione alle favorite

Regole di Scrittura
Tu non puoi inserire nuovi messaggi.
Tu non puoi rispondere ai messaggi.
Tu non puoi inviare messaggi.
Tu non puoi modificare i tuoi messaggi.
Il codice HTML è Disattivato.
Il codice MyCode è Attivato.
Gli Smilies sono Attivato.
Il codice [IMG] Attivato.
Vai al Forum:

Data e Ora attuale: 06-07-2008, 11:11

Contattaci - Punto Web