Immagini nel css o nel documento xhtml?Caso particolare...

pikadilly

Immagini nel css o nel documento xhtml?Caso particolare...

In questi giorni di lavoro estremo sono un pò confusa su una cosa che riguarda dei titoli creati con immagini diverse per ogni pagina.
Mi spiego.

Ho un tot di pagine con dei contenuti che prevedono dei titoli, i titoli sono immagini perchè usano un font particolari.
Abbiamo una classe chiamata .titolo_pagine.

Ora, ho due strade per far sì che ogni pagina abbia il suo titolo diverso:

La ovvia: metto l'immagine nel div class "titolo_pagine" nel documento xhtml e via.
La mia: per rendere meno pesante la pagina xhtml creo un altro foglio di stile (tanto per non fare confusione con quello principale) e ivi aggiungo una classe per ogni titolo di pagina.
Es:
.titolo_home
.titolo_servizi
.titolo_contatti

etc etc.

Perchè fare questo? Ogni classe ha la sua img di sfondo (la stessa che prima inserivo nel codice html direttamente dentro il div titolo_pagine), così ogni pagina ha un suo titolo ma l'immagine è nel foglio di stile non nel html, rendendo questo più leggero e attraverso uno span con nessuna visibiltà posso anche renderlo più accessibile.

Prima il codice era cosi:

home:

<div class="titolo_pagine"><img src="http://www.giorgiotave.it/forum/images/titolohome.jpg" alt="Home" width="120 height="56" title="Home page"/></div>
```Servizi:

.titolo_pagine {
}


Home:

<div class="titolo_home"><span>Home</span><div>

Servizi:

<div class="titolo_servizi"><span>Serivizi</span><div>

Css:

/home/
.titolo_home{
background-image: url(images/titolohome.jpg);
background-repeat: no-repeat;
height: 56px;
}

.titolo_home span{
visibility: hidden;}

/servizi/
.titolo_servizi{
background-image: url(images/titoloservizi.jpg);
background-repeat: no-repeat;
height: 56px;
}

.titolo_servizi span{
visibility: hidden;}


Spero di essermi spiegata. 

;)

karedas

Ciao pikadilli.

Il tuo esempio va più che bene , anche io opero più o meno così.
Poi vabbè vi sono forme variegate come l'uso di javascript/php e quant'altro però quello che usi è tra i più puliti che potresti usare a livello di impostazione del progetto

Al massimo potresti usare, essendo come tu dici dei titoli, l'uso degli "h*" e semplificare il codice in questo modo:

[html]
<h3 id="titolo_servizi" class="titoli">Servizi</h3>
[/html]

CSS:

[html]
#titolo_servizi{
height: 56px;
background: url('images/titoloservizi.jpg') no-repeat;
}
.titoli{
text-indent:-10000px;
font-size:0.1em;
}
[/html]In questo modo non avrai bisogno di nascondere il tuo span con l'attributo "visibility", il testo sarà ridotto al minimo essenziale e spostato di 10000px fuori dal tuo contenuto e , con questo valore, proprio fuori schermo. L'immagine di sfondo quindi farà da titolo.

Ma anche qui le uniche cose che potresti fare , come nel mio esempio, è definire un id per ogni tipo di titolo e dare una classe univoca a tutti loro per definire semplicemente gli attributi identici come appunto il font-size e il text-indent.

Ciao!

pikadilly

Ok grazie mille. Mi hai sollevato