Consiglio: quando usare CLASS e quando ID?

[ANTAGONIA]

Buon giorno, forse dal titolo capite che non sono esperto,ma cerco di districarmi in questo mondo.
Vorrei sapere, cortesemente:
quando si consiglia di utilizzare il SELETTORE "CLASS" e quando ID?

grazie mille...buona giornata a tutti

[salasir]

Id e classi: due selettori speciali

In pratica con id identifichi una sezione della pagina e solitamente sono utilizzate per dare un nome ai vari pezzi che compongono la pagina: header, footer, navigazione, contenuto, ...

Con le classi invece puoi ulteriormente affinare la caratteristica di un "pezzo" della tua pagina. Es. attribuisci alcune caratteristiche al generico tag <a>, che so, colore, togli la sottolineatura, ... In un particolare link, o meglio ancora, in un particolare paragrafo voglio che i link assumano caratteristiche diverse: attribuisco al link o al paragrafo una classe in cui definisco caratteristiche diverse.

Inoltre, per la caratteristica intrinseca, id DEVE essere univoco, mentre la classe può essere utilizzata più volte.

[atigra]

L'uso di una singola classe può essere ripetuto più volte in una stessa pagina, gli id invece sono univoci (quindi li puoi usare solo una volta nella pagina).

Da qui credo tu possa capire quando usare id e quando class. Ovviamente id e classi devono essere definite nel css.

[ANTAGONIA]

Vi ringrazio, però volevo sapere, se per i parametri di un'immagine eswidth,height,border etc etc), si DEVE usare,il CLASS oppure posso utilizzare anche ID?
es, è giusto fare cosi?

/*nella pagina*/
<div id="img">
[img]img.jpg[/img]
</div>

/*selettore class*/
.img{border:none;padding-left:5px;width:150px;height:150px;}

/*selettore id*/
div#img{position:absolute;top:300px;left:300px;}

Volendo posso, in questo caso,escludere il selettore ID del div,ed utilizzare tutti i parametri all'interno di CLASS, cosi?

.img{position:absolute;top:300px;left:300px;border:none;padding-left:5px;width:150px;height:150px;}

Oppure è sempre meglio, fare delle distinzioni?
Grazie ancora...

[salasir]

In linea di massima sono buone entrambe le soluzioni.

Poi bisogna vedere come imposti il layout, cosa devi inserire nel div; se c'è solo quell'immagine puoi benissimo attribuire la classe all'<img>, se c'è dell'altro, chiaramente devi definire anche il <div> tenendo presente che id="img" può essere utilizzato solo una volta.

Utilizzare lo stesso nome per class e div credo dia qualche problema (ma non ne sono sicuro).

[ANTAGONIA]

Grazie ancora, sempre molto gentili.

Già che ci sono,volevo chiedervi, per quanto riguarda la gestione dell'height.
In pratica, all'interno della mia pagina inserisco due immagini .gif che mi fanno da colonne (DX e SX).
Il problema che ho è il seguente, come faccio, a seconda dell'altezza che assume il content, di modificare anche quello delle due colonne( immagini)?
Perchè, se la home, ha un height di 300px, le colonne dovranno avere la stessa altezza(300px), ma se invece scelgo la pagina gallery, che ha un'height di 500px, le due colonne mi restano sempre a 300px.

Come faccio ad ovviare a questo problema?Ovvero, far seguire l'altezza delle due colonne( immagini) a seconda della pagina che visualizzo?

/*questa è la pagina.php*/
<div id="container">

	<div id="colonnaDX"></div>
	<div id="colonnaSX"></div>

    <div id="header"></div>
    <div id="content">
       <? include('controlli.php');?>
    </div>
 etc etc
</div>
/*questo è il css FF*/
div#colonnaDX{background-image: url(../img/col_Sx.jpg);position:absolute;top:0;left:-5px;width:5px;min-height:1102px;}
div#colonnaSX{background-image: url(../img/col_Dx.jpg);position:absolute;top:0;right:-3px;width:5px;min-height:1102px;}

/*questo è il css per IE*/
div#colonnaDX{height: 1112px;}
div#colonnaSX{height: 1112px;}

Spero di essermi spiegato...

Grazie mille......

[salasir]

False colonne (faux-columns)

• Faux Columns
• Equal Height Columns - revisited
• Equal Height Columns using CSS
• Estendere le false colonne

Buon divertimento

[ANTAGONIA]

grazie mille....domani provo e poi ti dico se c'ho capito qualcosa.
Grazie ancora alla prox