Newsgroup: it.lavoro.professioni.webmaster
Titolo: CSS Menu LI multicolore

Ciao,
quando i grafici ci si mettono d'impegno...
(sotto metto il codice)
Ho fatto un menu con una lista <li> , sono 10 quadretti ognuno di colore 
diverso.
Io ho risolto mettendo un css inline per ogni "bottone":
<li><a href="#" style="background-color:#00A650;">Colore 1</a></li>
E' la soluzione corretta?
Poi vorrei che quando clicco su un "bottone" e mi si carica la pagina, 
vorrei che il border-left di tutto il blocco UL diventi = al colore del 
bottone premuto (questo per fare capire la sezione dei prodotti).
Come posso fare per fare questo cambiamento "dinamico"? Pensavo di usare ASP 
e con un SELECT CASE cambaire il colore, ma anche qui non sono sicuro, 
magari c'è una soluzione migliore.
Consigli?
Grazie e ciao
Fabrizio
#ColoriSezioni {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width: 105px;
float:left;
border-left:#FFFF00 10px solid;  /* COLORE CHE VORREI CAMBIARE = AL COLORE 
AL BACKGROUND DEL BOTTONE CLICCATO */
}
#ColoriSezioni li {
display: inline;
}
#ColoriSezioni a, #ColoriSezioni a:visited {
padding: 20px 0px 20px 5px;
display: block;
border-bottom: 1px #fff solid;
text-align: left;
text-decoration: none;
color: #000;
}
#ColoriSezioni a:hover {
background-color: orange;
color:#FFFFFF;
}
<ul id="ColoriSezioni">
<li><a href="#" style="background-color:#00A650;">Colore 1</a></li>
<li><a href="#" style="background-color:#8DC73F;">Colore 2</a></li
<li><a href="#" style="background-color:#00ADEF;">Colore 3</a></li>
<li><a href="#" style="background-color:#EC008B;">Colore 4</a></li>
<li><a href="#" style="background-color:#EE1B22;">Colore 5</a></li>
<li><a href="#" style="background-color:#FBA31D;">Colore 6</a></li>
<li><a href="#" style="background-color:#0266B4;">Colore 7</a></li>
<li><a href="#" style="background-color:#43B97C;">Colore 8</a></li>
<li><a href="#" style="background-color:#B0D576;">Colore 9</a></li>
<li><a href="#" style="background-color:#789753;">Colore 10</a></li>
</ul>

Fabrizio
Magari dico una stupidaggine: non potresti semplicemente dare una
classe distinta ad *ul* in ogni pagina?
tipo: 
<ul class="pagina_uno">...</ul>
<ul class="pagina_due>...</ul>
ecc ecc...

 quando i grafici ci si mettono d'impegno...
Guarda se ti piace così (ricorda di attivare javascript se usi IE)
tutti i file devono stare nella stessa directory
Ciao
Oreste
------------------------------------------------------------------------------
file aa.html
------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="aa.css" />
<script language="JavaScript" src="aa.js"></script>
</head>
<body>
<ul id="ColoriSezioni">
<li><a id="a0" href="#"
onClick="JavaScript:cambiacolore('#00A650')">Colore 1</a></li>
<li><a id="a1" href="#"
onClick="JavaScript:cambiacolore('#8DC73F')">Colore 2</a></li>
<li><a id="a2" href="#"
onClick="JavaScript:cambiacolore('#00ADEF')">Colore 3</a></li>
<li><a id="a3" href="#"
onClick="JavaScript:cambiacolore('#EC008B')">Colore 4</a></li>
<li><a id="a4" href="#"
onClick="JavaScript:cambiacolore('#EE1B22')">Colore 5</a></li>
<li><a id="a5" href="#"
onClick="JavaScript:cambiacolore('#FBA31D')">Colore 6</a></li>
<li><a id="a6" href="#"
onClick="JavaScript:cambiacolore('#0266B4')">Colore 7</a></li>
<li><a id="a7" href="#"
onClick="JavaScript:cambiacolore('#43B97C')">Colore 8</a></li>
<li><a id="a8" href="#"
onClick="JavaScript:cambiacolore('#B0D576')">Colore 9</a></li>
<li><a id="a9" href="#"
onClick="JavaScript:cambiacolore('#789753')">Colore 10</a></li>
</ul>
</body>
</html>
------------------------------------------------------------------------------
------------------------------------------------------------------------------
file aa.css
------------------------------------------------------------------------------
#ColoriSezioni {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width: 105px;
float:left;
border-left:#FFFF00 10px solid;  /* COLORE CHE VORREI CAMBIARE = AL
COLORE AL BACKGROUND DEL BOTTONE CLICCATO */
}
#ColoriSezioni li {
display: inline;
}
#ColoriSezioni a, #ColoriSezioni a:visited {
padding: 20px 0px 20px 5px;
display: block;
border-bottom: 1px #fff solid;
text-align: left;
text-decoration: none;
color: #000;
}
#ColoriSezioni a:hover {
color:#FFFFFF;
}
#a0{
background-color:#00A650;
}
#a1{
background-color:#8DC73F;
}
#a2{
background-color:#00ADEF;
}
#a3{
background-color:#EC008B;
}
#a4{
background-color:#EE1B22;
}
#a5{
background-color:#FBA31D;
}
#a6{
background-color:#0266B4;
}
#a7{
background-color:#43B97C;
}
#a8{
background-color:#B0D576;
}
#a9{
background-color:#789753;
}
------------------------------------------------------------------------------
------------------------------------------------------------------------------
file aa.js
------------------------------------------------------------------------------
function cambiacolore(colore){
document.getElementById('ColoriSezioni').style.borderLeft = colore + '
10px solid';
}
------------------------------------------------------------------------------

 ha scritto nel messaggio 
news:1163977771.8...@m7g2000cwm.googlegroups.com...


 Non l'ho validato, cosa pensi mi dica il validatore?
Se usi FF puoi installare l'add-on "Tidy validator" e controllare la
validità off-line. La pagina è valida con due warning facilmente
risolvibili. Tieni conto che il dtd è strict.
Ciao
Oreste