[classi e id]

[Sibelium]

Il mio quesito

ho un foglio di stile in cui definisco l'aspetto dei tag div


div.testo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
padding: 10px;
width: 350px;
margin: 5px;
margin-top: 0;
border: 1px solid #cccccc;
border-top: 1px solid #000000;
background:url(../immagini/mah.gif);
background-position:center;
background-repeat: no-repeat;
background-color: #ffffff
}
Vorrei però che in alcune pagine cambi l'immagine di sfondo nel tag div.
Come si può fare scrivendo solo una regola css che mi specifica unicamente l'immagine nuova senza ripetere le altre impostazioni?
Grazie :gren:

[Marcolino's]

Ovviamente apriori non puoi.
Se hai un foglio di stile non puoi modificarlo on the fly.
Però qualcosa puoi pur sempre fare, ad esempio creare un foglio di stile inserito in ogni pagina che ridefinisce solo la proprietà che interessa a te.

[panta]

ma no, non c'è bisogno... basta che crieuna seconda classe per i div e la chiami testo2 e nell'html delle pagine a cui vuoi cambiare l'aspetto, invece di associare ai div interessati la classe testo, associ la classe testo2

ciauz

[cantard]

Originariamente inviato da Sibelium

Vorrei però che in alcune pagine cambi l'immagine di sfondo nel tag div.
Come si può fare scrivendo solo una regola css che mi specifica unicamente l'immagine nuova senza ripetere le altre impostazioni?
Grazie :gren:

potresti usare 2 div:

<div id="testo">
<div id=prima>contenuto con sfondo</div>
</div>

così erediti le impostazioni per il testo dal div#testo

div#testo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px; /* meglio usare em */
padding: 10px;
width: 350px;
margin: 5px;
margin-top: 0;
border: 1px solid #ccc;}

div#prima{
background:url(../immagini/mah.gif) center no-repeat #fff;color: #000;}
div#seconda{
background:url(../immagini/boh.gif) center no-repeat #fff;color: #000;}

...più o meno una cosa del genere...

inoltre potresti usare unità em al posto di pixel, per permettere di ingrandire la pagina.

[panta]

se vuoi risparmiare codice va bene come idea, ma invece di usare due id dentro a una classe enerica testo, usa due sottoclassi così puoi applicarle a + paragrafi

ciauz

[Marcolino's]

Originariamente inviato da Marcolino's
Ovviamente apriori non puoi.
Se hai un foglio di stile non puoi modificarlo on the fly.
Però qualcosa puoi pur sempre fare, ad esempio creare un foglio di stile inserito in ogni pagina che ridefinisce solo la proprietà che interessa a te.

Non avevo capito un piffero della sua domanda

[makeZoner's]

Originariamente inviato da Sibelium
Il mio quesito

ho un foglio di stile in cui definisco l'aspetto dei tag div


div.testo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
padding: 10px;
width: 350px;
margin: 5px;
margin-top: 0;
border: 1px solid #cccccc;
border-top: 1px solid #000000;
background:url(../immagini/mah.gif);
background-position:center;
background-repeat: no-repeat;
background-color: #ffffff
}
Vorrei però che in alcune pagine cambi l'immagine di sfondo nel tag div.
Come si può fare scrivendo solo una regola css che mi specifica unicamente l'immagine nuova senza ripetere le altre impostazioni?
Grazie :gren:

La soluzione è alquanto semplice.

Intanto lasci lo stesso foglio di stile per TUTTE le pagine.

Poi, SOLO nelle pagine in cui vuoi cambiare l'immagine di sfondo, all'interno del tag <STYLE> [CSS in linea], ridefinisci SOLO la proprietà sfondo del DIV.

div.testo {
background:url(../immagini/mah_NEW.gif) !important;
}

l'*!important* serve a sostituire/ridefinire tutti i valori di una determinata proprietà, dando una priorità più alta a quello contrassegnato con quest'ultimo.

Quindi, ricapitolando:
1. il CSS di base rimane lo stesso, con uno sfondo generico
2. ogni pagina avrà però, nei suoi tag <STYLE> ... </STYLE>

div.testo {
background:url(../immagini/[IMMAGINE_SEZIONE].gif) !important;
}

dove IMMAGINE_SEZIONE sarà sostituito dall'immagine della sezione

PICCOLA NOTA
--
Il div, con ID testo, puoi richiamarlo così: #testo
Se invece assegni una CLASS, lascia perdere questa nota.

[Sibelium]

Grazie di cuore, l'ultima soluzione mi sembra la + migliore assai
Grazie makeZoner's!

[makeZoner's]

Originariamente inviato da Sibelium
Grazie di cuore, l'ultima soluzione mi sembra la + migliore assai
Grazie makeZoner's!

Dimenticavo un chiarimento.

Internet Explorer non supporta l'attributo !important; come fanno invece Opera e Mozilla.

In ogni caso, se c'è una proprietà DUPLICATA nel CSS, quella presa in considerazione è sempre l'ultima. Il problema è quindi ovviato.