Problema con Elenco UL

**Cesare77** · 28-06-2009, 14:29

Ciao a tutti,

ho un problemino con la creazione di un elenco. Vi scrivo un esempio di codice della pagina:

PAGINA
<div class="cesare2">

<UL type="disc"><LI><span class="cesare">Il Progetto
: testo testo testo.</span></LI>

<LI><span class=cesare>Contatti
: testo testo testo.</span></LI>

Ecc. ecc.
____________________________
CSS
.cesare {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #808080;}

.cesare a{color: #444444; text-decoration: none}

.cesare a:hover{color: #E8003E;text-decoration: none}

.cesare a#activelink{color: #444444; text-decoration: none}

div.cesare2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #444444;}

div.cesare2 a{color: #E8003E; text-decoration: none}

div.cesare2 a:hover{color: #E8003E;text-decoration: underline}

div.cesare2 a#activelink{color: #E8003E; text-decoration: none}

_______________________________________

cosa succede: la span class non funziona bene, il testo della classe è giusto (ovvero class cesare) mentre i link risultano della classe cesare2

Perchè?

Grazie a tutti in anticipo

**kontrasto** · 28-06-2009, 15:16

Hai sbagliato i CSS.

Vedi che tu dai ai link nel div con classe cesare2 il colore #444. Poi dai allo span con classe cesare il colore #808080; però poi ai link figli di span, cioè quelli richiamati da .colore a, torni a dare il colore #444.

Per risolvere, togli la classe cesare dagli span e dalla direttamente agli a.

**Cesare77** · 28-06-2009, 20:54

Probabilmente mi sbaglio ma a me non sembra come dici tu.

----
Vedi che tu dai ai link nel div con classe cesare2 il colore #444
----

il colore #444 nella classe cesare2 lo do al colore del testo e non al colore dei link infatti se scrivo: (tolgo lo span nel primo[*])

<div class="cesare2">

<UL type="disc">
<LI>Il Progetto
: testo testo testo.</LI>

<LI><span class=cesare>Contatti
: testo testo testo.</span></LI>

mi da il colore #444 nel primo[*] e nel secondo il colore del testo è #808080

Quindi il testo funziona bene e di conseguenza dovrebbe funzionare anche il link ma non mi funziona e mi viene visualizzato sempre lo stile Cesare2 per il link. Perchè?

Tu dici:

----
Per risolvere, togli la classe cesare dagli span e dalla direttamente agli a.
----

allora ho provato a togliere lo span e a scrivere:

<div class="cesare2">

<UL type="disc">
<LI>Il Progetto
: testo testo testo.</LI>

<LI>Contatti
: testo testo testo.</LI>

Ma anche in questo caso non funziona. A voi funziona??

**kontrasto** · 29-06-2009, 09:04

Scusami, hai ragione, ho risposto troppo in fretta.

Però il problema te l'ho trovato (stavolta ho verificato

). E' un problema di specificità: prima di ogni dichiarazione per la classe cesare devi anteporre la classe cesare2, per esempio:

.cesare2 .cesare a {color: #444444; text-decoration: none}

**fmortara** · 01-07-2009, 23:33

Io ho un problema simile.

Ho la mia lista con i link ed i vari stili.
Se ad ogni LI o ad ogni A della lista associo una classe o un id, questi non vengono tenuti in considerazione.

ecco i codici:

Lista:

codice:

<ul id="menu_sezione">
<li class="95">link
<li class="111">altro link[/list]

CSS:

codice:

	div#main_sx ul#menu_sezione {font-family:garamond; list-style:none; margin:0 5px 0 0; border:0px solid #000;}
		#main_sx ul#menu_sezione li {font-size:16px; font-weight:normal; height:20px; margin:0 0 6px 0;line-height:22px; color:#846143; background-color:#fff; display:block;}
			#main_sx ul#menu_sezione li a {color:#846143; text-decoration:none; height:22px; display:block; padding:0 0 0 30px; background: url(../img/rosone_menu_main.png) 10px 4px no-repeat;}
			#main_sx ul#menu_sezione li a:hover {background-color:#f2efec;}

Nella pagina inserisco questo codice per rendere diverso il link della pagina in cui mi trovo.

codice:

<style type="text/css">
#main_sx ul#menu_sezione li.111 {background-color:#f2efec;}
</style>

Ma ho provato anche con:

codice:

<style type="text/css">
#main_sx ul#menu_sezione li.111 a {background-color:#f2efec;}
</style>

e

codice:

<style type="text/css">
#main_sx ul#menu_sezione li.111 a#111 {background-color:#f2efec;}
</style>

Cosa devo fare? Il codice CSS non funziona neanche se lo metto nel CSS esterno subito dopo la dichiarazione dello stato di hover.

**kontrasto** · 02-07-2009, 10:30

Ragazzi usate troppe classi e id. Avete la classitis!

Fmortara, vediamo se ho capito giusto: tu hai una lista di link, e vuoi che uno di questi sia diverso dagli altri, vero?

Dai solo un id all'ul ed una classe al link che vuoi diverso:

codice:

<ul id="menu_sezione">[*]link[*]altro link[/list]

Poi nel CSS

codice:

#menu_sezione { ... }

#menu_sezione a { ... } // Con questo dai lo stile a tutti gli a della lista #menu_sezione

#menu_sezione a#111 { ... } // Con questo dai lo stile al link che vuoi sia diverso dagli altri

Semplifica

**fmortara** · 02-07-2009, 11:01

Lo avevo fatto, ma non prende lo stile.

**fmortara** · 02-07-2009, 11:12

Confermo.
Non funziona!

Forse dovrei dichiarare questo stile prima del hover?

In realtà non posso farlo perchè tutti gli stili tranne questo differente sono richiamati in un file esterno, mentre questo è interno alla pagina tra i tag HEAD.

Anche con la dichiarazione nel file esterno non funziona:

codice:

	div#main_sx ul#menu_sezione {font-family:garamond; list-style:none; margin:0 5px 0 0; border:0px solid #000;}
		#main_sx ul#menu_sezione li {font-size:16px; font-weight:normal; height:20px; margin:0 0 6px 0;line-height:22px; color:#846143; background-color:#fff; display:block;}
			#main_sx ul#menu_sezione li a {color:#846143; text-decoration:none; height:22px; display:block; padding:0 0 0 30px; background: url(../img/rosone_menu_main.png) 10px 4px no-repeat;}
			#main_sx ul#menu_sezione li a#111 {background-color:#f2efec;} 
			#main_sx ul#menu_sezione li a:hover {background-color:#f2efec;}

**fmortara** · 02-07-2009, 12:45

Ecco, adesso non c'è nessun CSS esterno, tutta la pagina è ridotta a poche righe.

codice:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
	<style type="text/css">
		ul#menu_sezione {font-family:garamond; list-style:none; margin:0 5px 0 0; border:0px solid #000;}
		ul#menu_sezione li {font-size:16px; font-weight:normal; height:20px; margin:0 0 6px 0;line-height:22px; color:#846143; background-color:#fff; display:block;}
		ul#menu_sezione li a {color:#846143; text-decoration:none; height:22px; display:block; padding:0 0 0 30px; background: url(../img/rosone_menu_main.png) 10px 4px no-repeat;}
		ul#menu_sezione li a:hover {background-color:#f2efec;}
		ul#menu_sezione li a#111 {background-color:#f2efec;}

	</style>
	<title>titolo</title>
</head>
<body>

<h5>Home</h5>
<hr />
<h3>La Storia</h3>
<ul id="menu_sezione">
	[*]link
	[*]ddfgd
	[*]dfgdfgd
	[*]dgdfg
	[*]dgdgdg
	[*]dgdgdfg
	[*]dfssdfsf
	[*]sfsdfsf[/list]

</body>


</html>

Cosa sbaglio?

**mucu** · 02-07-2009, 14:05

Originariamente inviato da kontrasto
Ragazzi usate troppe classi e id.

parole sante, probabilmente la guida che hai letto non era fatta molto bene

codice:

ul#menu_sezione li a#111

indica un id ovvero un elemento unico in tutto il documento, quindi basta

codice:

#b111

la lettera ci vuole, visto che un id non potrà mai iniziare per carattere numerico

Discussione: Problema con Elenco UL

Strumenti discussione

Ricerca discussione

Visualizza

Problema con Elenco UL

Permessi di invio