[CSS] Consigli su DIV immagine

[^EvAmPiReS^]

Salve, scusate per il titolo ambiguo ma ho diverse domande da fare e non sapevo bene
come renderle tutte.
Oggi provando a "giocare" un po' coi CSS, mi son reso conto che non ho ancora chiara
la differenza d'uso tra ID e CLASS.
Volevo fare un box con gli angoli arrotondati e sfondo gradiente e poi utilizzarlo come
header. Ho creato 3 immagini:

corner_header_left.gif (10px * 120px)
corner_header_right.gif (10px * 120px)
header_background.gif (1px *120px)

A questo punto ho dato le seguenti regole:

#header {
	width: 768px;
	height: 120px;
	background: url(../media/header_background.gif) repeat-x;
}

#header #corner_header_left, #corner_header_right {
	width: 10px;
	height: 120px;
}

#header #corner_header_left {
	float: left;
	background: url(../media/corner_header_left.gif) no-repeat;
}

#header #corner_header_right {
	float: right;
	background: url(../media/corner_header_right.gif) no-repeat;
}

La resa grafica funziona con firefox >=1.5 ed explorer >=6, tuttavia scrivendo il markup,
mi sono chiesto: avrò fatto bene ad usare #corner invece di .corner? In effetti nei fogli
di stile racimolati in giro ho visto più spesso utilizzare classi innestate ad un unico div
padre (in questo caso header). C'è anche da dire che molto probabilmente non riutilizzerò più
quegli stili una volta terminato l'header; insomma che fare? Come faccio a scegliere se usare
una classe o un #ID? Cosa cambia al lato pratico? Cosa è buona norma fare?

Altra questione:

Finito l'header mi son deciso a piazzarci un logo: si tratta di un'immagine png (infatti ho
problemi con la trasparenza in IE6). Potenzialmente avrò anche altre immagini dentro
l'intestazione e quindi vorrei evitare di usare una cosa tipo:

#header img {
     ....
}

e mi sono deciso ad usare:

#logo {
	float: left;
	width: 200px;
	height: 80px;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 65px;
}

Ho fatto bene? A questo punto mi trovo ad avere nel markup un div che contiene solo
un tag img, è sprecato? C'è un altro modo di procedere? Mettendo l'immagine nel CSS
come background perdo in accessiblità giusto? Non posso più impostare ALT e TITLE,
però riuscire ad utilizar il workaround per avere trasparenza in IE6...insomma aiuto.
Mi piace un sacco lavorare con i CSS, ma devo dire che è frustrante mantenere la propria
creatività imbrigliata alla difficoltà di mantenere il proprio lavoro, valido, accessibile, ben
degradabile e compatibile nei vari browser.

[Mich_]

Differenza id e class:
id = identificatore; class = classe
Un id deve essere unico nella pagina. Puo` servire per identificare con certezza un oggetto (che puoi manipolare anche con JS). Se ci sono due id uguali, si creano dei conflitti ed il risultato non e` prevedibile.
Una class serve per dare uno stile comune ad una serie di oggetti (pensa ad esempio ad una serie di

che devono avere colori alternati: puoi dare una classe ai dispari ed una diversa ai pari).

Dal punto di vista semantico, se un oggetto e` unico (e raddoppiarlo non avrebbe senso), sta meglio un id, se e` una cosa che potrebbe ripetersi (un oggetto che al momento e` unico nella pagina, ma che in un futuro potrebbe essere affiancato ad un altro) e` meglio una class. Comunque in molti casi usare id o class e` una scelta personale e non ci sono problemi.

Caso particolare:
#header #corner_header_left, #corner_header_right {...}
Qui ci sono due problemi.
1. intendi l'oggetto #corner_left inserito in #header e l'oggetto #corner_right indipenedentemente da dove e` inserito? Probabilmente no, ed intal caso la sintassi e` errata: dopo la virgola occorre iniziare il path daccapo.
2. che senso ha definire l'oggetto unico #corner_left ma solo quello che sta dentro #header? Se e` unico puoi omettere #header davanti, se e` ripetuto e` un errore di id


Seconda questione: non ho la conoscenza del codice HTML, che e` necessaria per poter dare un giudizio sulla semantica


Accessibilita`:
Se un'immagine e` di abbellimento, va inseerita come sfondo: chi non vede nonha interesse a capire gli abbellimenti, ma e` interessato solo al contenuto.
Se invece un'immagine veicola del contenuto, l'immagine va inserita nel tag <img> e il contenuto va inserito nell'attributo alt="..."

Esempio. Supponi che esiste un ente "Diamoci una mano" e supponi che tale ente abbia un logo con due mani che si stringono.

Nella pagina Web ci sara` il logo. In linea di massima il logo va inserito in un <img>, e nell'alt va scritto "logo" (o simile). Non ha senso scrivere "due mani che si stringono".
Invece in una ipotetica pagina con la spiegazione del logo, il logo andra` riportato sempre in un'<img>, ma nell'alt ci dovra` essere spiegato "due mani che si stringono una e` bianca ed una scura", dato che in tal caso chi non vede non potrebbe altrimenti capire il testo a corredo dell'immagine.
E supponi che sempre lo stesso ente voglia avere come sfondo di tutte le pagine l'immagine delle mani sfumate. Puo` essere un bell'effetto grafico, ma a chi legge non interessa in modo specifico che in tutte le pagine sia chiarito lo sfondo: resta una cosa di sfondo, che non viene spiegata ad uno che non ci vede, che non viene stampata (in certe stampanti in b/n lo sfondo potrebbe nascondere il primo piano) e che quindi non ha necessita` di alt (sarebbe controproducente).