Cella cliccabile che cambia colore

**bugme.it** · 28-08-2004, 13:43

Buon sabato a tutti

Vorrei realizzare una menù costituito da N celle con ognuna all'interno il link di destinazione... E fin qui...

La complicanza è che vorrei che al passaggio del mouse la cella n cambi colore assieme allo stile del link all'interno della cella stessa, e che anche la cella sia cliccabile con la stessa destinazione del link...

Ora, riesco a far cambiare colore alla cella usando onmouseover="this.style.backgroundColor='#FFFFFF' e stessa cosa con onmouseout e onclick però non è proprio l'effetto che vorrei, infatti non mi si cambia in contemporanea con la cella lo stile del link... :master:

In più vorrei farlo con i fogli di stile e che fosse negli standarc con il w3c

è possibile?!?!

**99eros9** · 28-08-2004, 13:57

prova a dare un'occhiata a questo link

**bugme.it** · 28-08-2004, 18:44

Ecco, secondo voi è giusto fatto così?!?!
Lo volevo in verticale...

Il mio scopo è che il menu sia lungo complessivamente 720px e che ogni cella sia di 120px e che si "illumini" di un colore diverso, per ora solo di giallo, ma immagino che devo riptere il codice per il cambio di colore 6 volte, o?!?!

Consigli? C'è un modo migliore per farlo?

Foglio di stile:

codice:

/** MENU 1 ** roll-over basato solo sui colori **/
ul.menu1 { 
width:120px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
}

ul.menu1 li a { 
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:1.5em;line-height:1.5em; /* altezza del link: height e line-height devono avere il medesimo valore */ 
}

ul.menu1 li {
display:inline;
} /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/

ul.menu1 li a:link, ul.menu1 li a:visited { 
background:#E0E0E0;
color: #999999;
} /* colori per il link */

ul.menu1 li a:hover, ul.menu1 li a:active { 
background: #F6D600;
color:#FFFFFF;
} /* colori per l'effetto roll-over */

div#container { 
border-right: 0px solid rgb(0, 0, 0);
width: 720;
font-family: georgia,serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 12;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
}

div.split div {
padding: 0pt 0px;
float: left;
width: 120;
}

div.wide {
padding: 0pt 2%;
clear: left;
}

a#viewcss {
color: rgb(0, 0, 255);
}

codice del menu verticale:

codice:

<div id="container">
	<div class="wide">

qui ci metterò un'mmagine</p></div>
	<div class="split">
		<div>
			<ul class="menu1">
				[*]menu1
			[/list]
		</div>
        <div>
        	<ul class="menu1">
				[*]menu2
			[/list]
		</div>
        <div>
            <ul class="menu1">
				[*]menu3
			[/list]
        </div>
        <div>
	        <ul class="menu1">
				[*]menu4
			[/list]
	    </div>
        <div>
            <ul class="menu1">
				[*]menu5
			[/list]
        </div>
        <div>
		    <ul class="menu1">
				[*]menu6
			[/list]
        </div>
    </div>
</div>

:rollo:

**Jerry Masslo** · 28-08-2004, 19:32

quando dai valori numerici nel css devi specificare la misura se sono diversi da zero

12px o 12cm o quel che ti pare ma non 12, così per il width l'height e quant'altro

il menù sembra funzionare ma hai uno spreco di div e ul impressionante, a ogni ul poi aggiungerai altre voci, giusto?

**bugme.it** · 28-08-2004, 20:14

Originariamente inviato da Jerry Masslo
quando dai valori numerici nel css devi specificare la misura se sono diversi da zero

12px o 12cm o quel che ti pare ma non 12, così per il width l'height e quant'altro

il menù sembra funzionare ma hai uno spreco di div e ul impressionante, a ogni ul poi aggiungerai altre voci, giusto?

l'unità di misura mi era scappata, cmq ho corretto

come correggeresti gli sprechi?

gli ul mi servono per fare in modo che ci sia il cambio di colore, mentre i div per posizionare le celle come voglio...

Consigli?!?!

**bugme.it** · 28-08-2004, 20:22

per chi volesse provare:

http://www.softd3sign.net/index4.htm

**Jerry Masslo** · 28-08-2004, 22:39

una cosa del genere?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Nuova pagina 1</title>
<style type="text/css">

body {font-size:90%}
ul.menu1 {
list-style:none;
margin:0; padding:0;
}

ul.menu1 a {
display:block;
text-decoration:none;
padding-top:.3em;
padding-bottom:.3em;
}

a.AltroColore, a.AltroColore2, a.AltroColore3,
a.AltroColore4, a.AltroColore5, a.AltroColore6 {
background:#E0E0E0;
color: #999999;
}
a.AltroColore:hover, a.AltroColore:active {background:#f6d600;
color:white;
}
a.AltroColore2:hover, a.AltroColore2:active {background:red;
color:white;
}
a.AltroColore3:hover, a.AltroColore3:active {background:fuchsia;
color:white;
}
a.AltroColore4:hover, a.AltroColore4:active {background:teal;
color:white;
}
a.AltroColore5:hover, a.AltroColore5:active {background:maroon;
color:white;
}
a.AltroColore6:hover, a.AltroColore6:active {background

live;
color:white;
}
div#container {
border-right: 0px solid rgb(0, 0, 0);
width:726px; /* Dimensioni per Opera 5 */
\width:732px; /* Dimensioni per Explorer 5.x */
w\idth:732px; /* Dimensioni per browser standard compliant */
font-family: georgia,serif;
}
div.wide {
padding: 0pt 2%;
clear: left;
}

.menu1 li {
width:120px;
float:left;
text-align:center}
</style>
</head>

<body>

<div id="container">
<div class="wide">

qui ci metterò un'mmagine</p></div>

<ul class="menu1">

[*]menu1
[*]menu2
[*]menu3
[*]menu4
[*]menu5
[*]menu6
[/list]

</div>
</body>
</html>

Discussione: Cella cliccabile che cambia colore

Strumenti discussione

Ricerca discussione

Visualizza

Cella cliccabile che cambia colore

Permessi di invio