menu tabs

**minnie71** · 16-12-2005, 09:37

Ciao,
ho un menu orizzontale con linguette tabs:

<html>
<head>
<link rel="stylesheet" href="css_menu_08.css" type="text/css">
</head>
<body>

<ul class="menuNavigazione"><li class="primaVoce">Prima Voce<li class="voceCorrente">Seconda Voce[*]Terza Voce[*]Quarta Voce[*]Quinta Voce[/list]
</body>
</html>

Qui c'è il mio css:

body{
background:#FFF;
color:#000;
font:60% verdana;
}

.menuNavigazione {
background:#FFF;
color:#000;
margin:0;
padding:6px 0 5px 0 0;
border-bottom:1px solid #000;
text-align:center;
}

.menuNavigazione li{
display:inline;
}

.menuNavigazione a{
height:0;
padding:5px 0.7em;
border:1px solid #000;
text-decoration:none;
margin:-6px .3em;
white-space:nowrap;
}

.menuNavigazione a:link{
border-bottom:none;
padding-bottom:6px;
}

.menuNavigazione a:link,
.menuNavigazione a:visited{
background:#DDD;
color:#666;
}

.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{
background:#EEE;
color:#000;
}

.menuNavigazione .voceCorrente a:link,
.menuNavigazione .voceCorrente a:visited,
.menuNavigazione .voceCorrente a:hover,
.menuNavigazione .voceCorrente a:focus,
.menuNavigazione .voceCorrente a:active{
background:#FFF;
color:#000;
border-bottom:none;
padding-bottom:6px;
}

perchè quando vado su una voce diversa dalla Seconda Voce non mi fa vedere il tab selezionato? dove sbaglio???

TNKS

**pierofix** · 16-12-2005, 10:11

Occhio ad inserire sempre le pseudo-classi in ordine corretto, ovvero:

link
visited
hover
active

Speriamo sia solo questo.

EDIT: Ops, lo hai già fatto... 'spetta che ricontrollo...

**pierofix** · 16-12-2005, 10:20

Provo a riassumere solo per la parte interessata, apportando un paio di modifiche:

codice:

XHTML
<ul class="menuNavigazione">
   <li class="primaVoce">
      Prima Voce
   
   <li class="voceCorrente"> 
      Seconda Voce
   [*]
      Terza Voce
   [*]
      Quarta Voce
   [*]
      Quinta Voce
   [/list]

CSS
.menuNavigazione { 
   background:#FFF; 
   color:#000; 
   margin:0; padding:6px 0 5px 0 0; 
   border-bottom:1px solid #000; 
   text-align:center; 
} 
.menuNavigazione li { display:inline }

.menuNavigazione a { 
   height:0; 
   margin:-6px .3em; padding:5px 0.7em; 
   border:1px solid #000; 
   text-decoration:none; 
   white-space:nowrap; 
} 
.menuNavigazione a:link { 
   border-bottom:none; 
   padding-bottom:6px; 
} 
.menuNavigazione a:link, 
.menuNavigazione a:visited{ 
   background:#DDD; 
   color:#666; 
} 
.menuNavigazione a:hover, 
.menuNavigazione a:active, 
.menuNavigazione a:focus { 
   background:#EEE; 
   color:#000; 
} 

.menuNavigazione .voceCorrente a:link, 
.menuNavigazione .voceCorrente a:visited, 
.menuNavigazione .voceCorrente a:hover, 
.menuNavigazione .voceCorrente a:active, 
.menuNavigazione .voceCorrente a:focus { 
   background:#FFF; 
   color:#000; 
   border-bottom:none; 
   padding-bottom:6px; 
}

Non cambia nulla?

**minnie71** · 16-12-2005, 10:29

non mi fa vedere il tab bianco quando ci clicco sopra come se vede all'inizio nella seconda voce

**pierofix** · 16-12-2005, 10:36

Per forza, guarda cosa hai scritto:

codice:

.menuNavigazione a:hover, 
.menuNavigazione a:active, 
.menuNavigazione a:focus { 
   background:#EEE; 
   color:#000; 
}

Non ci sono errori nel codice, solo che stai sbagliando ad usare i selettori. Mi spieghi ESATTAMENTE cosa vorersti ottenere?

**minnie71** · 16-12-2005, 10:46

quando sono nel tab corrente lo sfondo deve essere bianco, il bordo in basso a 0 mentre gli altri tab devono essere colorati. quando cambio tab deve metterlo corrente mentre quello corrente di prima diventa colorato. E' un esempio di un libro, ma non mi va.
ne ho trovato un esempio ma con i div

http://pro.html.it/esempio/482/btabs.html

ma essendo il primo che faccio non sono riuscita a modificarlo.

**pierofix** · 16-12-2005, 11:44

Prova a dare una letta qui:

- www.alistapart.com/articles/keepingcurrent/

**minnie71** · 16-12-2005, 11:45

Sono riuscita a metterlo a posto

GRAZIE

**minnie71** · 16-12-2005, 18:22

Ciao,
ho fatto un menu tab con il sottomenu per 2 voci, nel css ho messo:

body{background:#FFF;color:#000;font:70% verdana,arial;}

.menuNavigazione {background:#FFF;color:#000;margin:-2;padding:6px 0 5px 0 0;border-bottom:1px solid navy;text-align:center;top:100px;}

.menuNavigazione li{display:inline;}

.menuNavigazione ul{display:inline;width:100%;}

.menuNavigazione .voceCorrente ul{margin:0;display:inline;left:55px;position:abso lute;
top:130px;}

.menuNavigazione .voceCorrente ul a{background:#FFF;color:#999;border-left:none;font-weight:bold;line-height:10px;margin-right:4px;padding:2px 10px 2px 10px;text-decoration:none;font:100% verdana,arial;}

.menuNavigazione .voceCorrente ul a:hover,
.menuNavigazione .voceCorrente ul a:focus,
.menuNavigazione .voceCorrente ul a:active{background:#FFF;color:#000;
text-decoration:underline;}

.menuNavigazione a{height:0;padding:5px 0.7em;border:1px solid navy;
text-decoration:none;margin:-6px .3em;white-space:nowrap;}

.menuNavigazione .voceCorrente a{border-bottom:none;padding-bottom:6px;}

.menuNavigazione a:link,
.menuNavigazione a:visited{background:#6B69FA;color:#FFF;}

.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{background:#BFBDFD;color:#000;}

.menuNavigazione .voceCorrente a:link,
.menuNavigazione .voceCorrente a:visited,
.menuNavigazione .voceCorrente a:hover,
.menuNavigazione .voceCorrente a:focus,
.menuNavigazione .voceCorrente a:active{background:#FFF;
color:#000;border-bottom:none;padding-bottom:6px;}

ho ridimensionato la finestra di IE, mi sposta tutto il menu

come faccio a dirgli che deve restare nella stessa posizione? e poi nel primo livello come faccio a dare una larghezza minore di tutta la pagina? questa parte deve essere più corta e più in alto in modo da poterla mettere vicino ad un logo 60x80.

Grazie e scusate se sono così rompiscatole

Discussione: menu tabs

Strumenti discussione

Ricerca discussione

Visualizza

menu tabs

Menu tab dimensioni

Permessi di invio