uno stile per ogni div?

[max103]

sto validando un sito xhtml 1 strict

mi ha dato errore perche' ho utilizzato lo stesso stile piu' volte nella stessa pagina esempio:

css:

#quadrato

xhtml

<div id="quadrato">1</div>
<div id="quadrato">2</div>
<div id="quadrato">3</div>
<div id="quadrato">4</div>

come si fa in questi casi???

possibile che devo fare uno stile per ogni div???

[panta1978]

Originariamente inviato da max103
sto validando un sito xhtml 1 strict

mi ha dato errore perche' ho utilizzato lo stesso stile piu' volte nella stessa pagina esempio:

css:

#quadrato

xhtml

<div id="quadrato">1</div>
<div id="quadrato">2</div>
<div id="quadrato">3</div>
<div id="quadrato">4</div>

come si fa in questi casi???

possibile che devo fare uno stile per ogni div???

id rappresenta qualcosa di univoco. Nel tuo caso hai bisogno dell'attributo style.
Esempio:

XHTML

<div style="quadrato">1</div>
<div style="quadrato">2</div>
<div style="quadrato">3</div>
<div style="quadrato">4</div>

CSS

div.quadrato{
....
}

Nota che nel CSS si usa un puntino (.) quando ho degli style, ed un cancelletto (#) quando ho degli id.

Spero di essere stato utile.

[max103]

Originariamente inviato da panta1978

id rappresenta qualcosa di univoco. Nel tuo caso hai bisogno dell'attributo style.

Esempio:



XHTML

<div style="quadrato">1</div>

<div style="quadrato">2</div>

<div style="quadrato">3</div>

<div style="quadrato">4</div>

CSS

div.quadrato{

....

}

Nota che nel CSS si usa un puntino (.) quando ho degli style, ed un cancelletto (#) quando ho degli id.



Spero di essere stato utile.

capito, grazie


quindi potrei fare anche:

css:

div.quadrato{

xhtml

<div class="quadrato">1</div>

è uguale o c'e' differenza?

[pierofix]

Non style, ma class.

L'id, come dice il nome stesso, è un identificatore univoco, utilizzabile solo una volta nel documento.

class, invece, è fatto apposta per creare delle famiglie di stili, applicabili a più elementi contemporanemente.

XHTML
<p class="importante">
   I <abbr title="Compact Disk">CD</abbr>
   di <cite>Amedeo Mango</cite>
   sono terminati.
</p>


Il <cite>killer Bruno</cite> deve uccidere:</p>
<ul>[*]il <cite class="importante">giardiniere Manolo</cite> e[*]il <cite>medico Maceti</cite>.[/list]

CSS
.importante
{
   color:red;
}

[panta1978]

Originariamente inviato da pierofix
Non style, ma class.

Ooops! E' vero, mea culpa, mea culpa, mea maxima culpa, ho sbagliato. Ah, la fretta...

[max103]

ok, funziona.

La domanda pero' nasce spontanea???

perche' dovrei utilizzare #(id) al posto di .(class) visto che il secondo è piu' flessibile?

quali sono i vantaggi di #(id)???

[panta1978]

Originariamente inviato da max103
ok, funziona.

La domanda pero' nasce spontanea???

perche' dovrei utilizzare #(id) al posto di .(class) visto che il secondo è piu' flessibile?

quali sono i vantaggi di #(id)???

Provo a rispondere io, vediamo se ho capito la logica... al limite Pierofix mi smentirà!

Gli attributi in XHTML vanno usati non solo per rendere un effetto, sia esso grafico oppure testuale, ma anche per dare un significato "semantico" alla pagina.

Se un blocco div è unico, vedi ad esempio IL banner, IL menù, IL content, IL footer, eccetera, scrivendo ad esempio:

<div id="footer">

sottolineiamo che quello che abbiamo visualizzato è IL footer, non UN footer.

[pierofix]

Innanzitutto dobbiamo ragionare a livello di significato.

1. id identifica in maniera univoca. Prendiamo ad esempio questa struttura:
   
   

   <h1 id="titolo">
      Titolo dell'articolo
   </h1>
   
   
   
      Redatto da <cite id="autore">Piero Fissore</cite> 
      in data <span id="data">2006-05-31</span>.
   </p>

   L'attributo viene usato per appiccicare maggiore significato al markup.
   
2. class, invece, viene solitamente utilizzato per gestire degli stili di visualizzazione comuni (anche se anch'esso detiene una valenza descrittiva... ma non andiamo a infognarci ). Ad esempio:
   
   

   
   I prodotti sono:</p>
   <ul>

3. pomodori <li class="esauriti">carote <li class="esauriti">rape
4. cetrioli

[pierofix]

Solo una nota.

Originariamente inviato da panta1978
Gli attributi in XHTML vanno usati non solo per rendere un effetto, sia esso grafico oppure testuale, ma anche per dare un significato "semantico" alla pagina.

Non vanno proprio usati a fini estetici!

[max103]

ok, ho capito,


avrei anche un altro piccolo problema sempre con la validazione css:

mi da errore su questo stile che ho utilizzatoper un menu':

background: url(img/cerchio.gif) no-repeat left 10px;

l'errore dice: troppi elementi...

ho provato a separare background cosi':

background: url(img/cerchio.gif);
background: no-repeat; 
background: left; 
background:10px;

ma giustamente lo stile successivo annulla il precedente.

come posso risolvere?