comprendere meccanismo di questo css

**patriziou** · 27-11-2012, 18:14

ciao a tutti questo è un css per far cambiare il colore del menu però non capisco come fa o meglio non capisco come fa a comparire prima quel colore e poi l' altro nel senso :

codice:

#menu {padding:0; margin:0; list-style:none;}  
#menu li {float:left; margin-left:1px; padding-top:2px;} #menu li a {display:block; height:38px; line-height:38px; padding:0 20px 0 0; background: url(tab_a.gif) no-repeat right top; color:#000; text-decoration:none;} 
#menu li a b {display:block; height:38px; padding:0 0 0 20px; background: url(tab_b.gif) left top; cursor:pointer;} 
#menu li a:hover, 
.home #menu li a 
{background-position:right -51px; margin-top:-2px; height:40px;} 
#menu li a:hover b,
 .home #menu li a b 
{background-position:left -51px; height:40px;}

allora premesso che le due immagini sono solo per i due lati della tabella e quindi le possiamo considerare uguali dove esse sono composte per metà da un colore che è quello che poi si vede e per metà da un secondo colore che sarà quello di over , ora non capisco come faccia a cambiare il colore usando queesta parte di codice

codice:

right -51px; margin-top:-2px; height:40px;

per la prima immagine

codice:

{background-position:left -51px; height:40px;}

per la seconda se me lo riuscite a spiegare siete grandi

**patriziou** · 28-11-2012, 16:28

vbb h ocambaito tipologia di codice o megli ol' ho rimodificato e sono pervenenuto a questo

codice:

 
<html>
<head>
<style type = "text/css">
#menu {padding:0; margin:0; list-style:none;}
#menu li {float:left; margin-left:3px; padding-top:2px;}
#menu li a b{display:block; height:38px; width:150px; line-height:38px; padding:0; width:140px; background: url(tab_a.png); color:#000; text-align:center; text-decoration:none;}
#menu li a:hover b,
.tab #menu li a b
{background:url(tab_b.png); height:40px;}

</style>
</head>
    <body>
	


	<ul id ="menu">
		<li class ="tab"><a href ="index.php">Home</a>
		<li class ="tab"><a href ="Giochi%20al%20femminile.php">Giochi al femminile</a>
		<li class ="tab"><a href ="Giochi%20di%20lotta.php">Giochi di lotta</a>
		<li class ="tab"><a href ="Giochi%20sparatutto.php">Giochi sparatutto</a>
		<li class ="tab"><a href ="Giochi%20di%20sport.php">Giochi di sport</a>
	[/list]
	</p>
	
	


	<ul id ="menu">
		<li class ="tab"><a href ="Giochi%20classici.php">Giochi classici </a>
		<li class ="tab"><a href ="Giochi%20per%20bambini.php">Giochi per bambini</a>
		<li class ="tab"><a href ="Giochi%20di%20auto.php">Giochi di auto</a>
		<li class ="tab"><a href ="Giochi%20di%20abilita.php">Giochi di abilit&agrave;</a>
		<li class ="tab"><a href ="Giochi%20di%20volo.php">Giochi di volo </a>
	[/list]
	</p>

	


	<ul id ="menu">
		<li class ="tab"><a href ="Giochi%20di%20azione.php">Giochi di azione</a>
		<li class ="tab"><a href ="Giochi%20di%20guerra.php">Giochi di guerra</a>
		<li class ="tab"><a href ="Giochi%20di%20strategia.php">Giochi di strategia</a>
		<li class ="tab"><a href ="Giochi%20di%20moto.php">Giochi di moto </a>
		<li class ="tab"><a href ="Giochi%20di%20carte.php">Giochi di carte</a>
	[/list]
	</p>

	</body>
</html>

ok allora ho due problemi
1) non si mette su tre righe come dovrebbe fare dato che ho messo il tag

2)mi fa uno strano effeto quando vado in hover alle "celle di tabella" per dire che mi fa spostare tutte le altre e ho utilizzato tanti metodi mettendo lo < span> il <div> usando le tabelle ma non lo risolvo come fare?

**ybla82** · 30-11-2012, 09:58

Ho provato il tuo codice e provando a correggerlo ho visto che manca l'altezza dell'elemento p.
In pratica #menu è diventato

codice:

#menu 
{ 
        padding:0; 
        margin:0; 
        list-style:none; 
        height:38px; 
}

Questo dovrebbe correggere entrambi i problemi.

Una piccola nota.
Non ho ben capito quello che vuoi fare, ma con

codice:

.tab #menu li a b

non raggiungi nessun elemento.

**patriziou** · 04-12-2012, 15:16

grazie mille comunque il .tab #menu li a b io riesco a dargli tutti caratteri dei css al tab class

**Prill** · 04-12-2012, 19:18

Non usare un id su più elementi, crea una classe piuttosto (o definisci direttamente ul). Un paragrafo non può contenere un elenco. Un elenco genera direttamente un a capo dopo di esso, nel tuo caso non succede per via del float (oltre all'altezza sull'elenco, come già ti hanno consigliato, aggiungi pure un overflow:hidden). Elimina poi il paragrafo.
Per lo sfondo viene specificata la posizione, quindi vengono visualizzate porzioni diverse della stessa immagine nello stato normale e nello stato hover.
Inoltre: non lasciare spazi vuoti nei nomi dei file ma usa piuttosto un trattino (non Giochi%20di%20azione.php ma Giochi_di_azione.php eccetera)

**patriziou** · 04-12-2012, 20:36

grazie mille per i consigli frs mo riuscirò a fare qualche codice da solo

Discussione: comprendere meccanismo di questo css

Strumenti discussione

Ricerca discussione

Visualizza

comprendere meccanismo di questo css

Permessi di invio