css esterno per definizione testi e links

[theorange]

ciao

sto provando per bene i css per definire su un file esterno i vari campi di testo, e il cambio di colore per i link

qui il css:

body{
background: #E2E4F1;
margin: 0;
background-image: url(immagini/main2_16.jpg);
background-repeat:no;
background-attachment:fixed;

}

div.titolo{
color:#2255DD;
font-size:22px;
text-align:center;
vertical-align:top;
font-family:impact;
}

div.link{
font-size:12px;
text-align:center;
vertical-align:top;
font-family:arial;
font-weight:bold;
}

A:visited {color: #444444}
A:visited {text-decoration: none}
A:hover {color: #2255DD}
A:hover {text-decoration: none}
A:link {color: #444444}
A:link {text-decoration: none}

con IE va tuto bene.

con mozilla/firefox invece mi ripete lo sfondo (tenendolo fisso) e nei links non mi cambia colore

nel file html ad ogni campo scrivo <DIV class=xxxxxx>bla bla</DIV>

dove sbaglio??

[pierofix]

Innanzitutto, proviamo ad ottimizzare il codice:

body { 
   background:#e2e4f1; 
   margin:0;
   background:url(immagini/main2_16.jpg) fixed no-repeat 0 0;
} 
div.titolo { 
   color:#25d;
   font:22px impact,sans-serif; /* Sarebbe meglio usare gli em o % */
   text-align:center; 
   vertical-align:top; /* Proprietà non applicabile a un div */
} 
div.link {
   font:bold 12px arial,sans-serif; /* Vedi sopra */
   text-align:center; 
   vertical-align:top; /* Vedi sopra */
} 
a:link {
   color:#444;
   text-decoration:none;
}
a:visited {
   color: #444;
   text-decoration:none;
}
a:hover {
   color: #25d;
   text-decoration:none;
}

Alla fine è stato necessario inserire gli stati link, visited e hover nell'ordine giusto, ovvero "link, visited, hover, active". Occhio anche alle note che ho inserito nel codice.

[theorange]

grazie!!

il % preferirei non usarlo perchè ho bisogno che il testo venga visualizzato sempre grande uguale...

px non è valido perchè non è riconosciuto???

[pierofix]

No no, i valori sono validi e standard, infatti rientrano nelle specifiche ufficiali. Il fatto è che il nuovo web vuole essere più maturo ed intelligente. Ecco che si è capito che "se qualcuno non può leggere ciò che pubblichiamo, cosa lo pubblichiamo a fare?".

Da tempo il W3C sta sviluppando un progetto legato all'accessibilità e noi sviluppatori siamo particolarmente interessati dal documento che si occupa dell'accessibilità ai contenuti:

- originale: www.w3.org/TR/WCAG10/
- traduzione in italiano: www.aib.it/aib/cwai/WAI-trad.htm

Se noti, al punto 3.4 è spiegato come è consigliabile l'uso di unità di misura relative (come em o %, appunto) per permettere a persone con problemi (più o meno gravi) alla vista possano ridimensionare il testo semplicemente per... riuscire a leggerlo.

Il problema, comunque, attualmente è - come al solito :rollo: - Internet Explorer, il quale non permette di ridimensionare il testo specificato in px o comunque unità fisse. Firefox, Opera, Mozilla, Netscape e tutti i browser seri, invece, si fanno un baffo dell'u.m. e ridimensionano tutto indistintamente.

Il concetto, quindi, è che bisogna dare all'utente (che può essere normodotato, ipodotato o disabile) il diritto di fruire delle informazioni. Una legge italiana (ma ce ne sono di simili in altre parti del mondo) obbliga certe tipologie di siti (tipo le Pubbliche Amministrazioni o comunque siti che offrono servizio pubblico) a seguire il tipo di regole dettate nel documento visto sopra ma anche se il tuo sito non rientra in tale categoria, trovo comunque giusto cominciare a crescere e far entrare quelle linee guida come naturale evoluzione della pratica di progettazione dei siti web.

E non lo dico perchè ho particolari competenze: sono un neodiplomato che lavora come geometra e la mia è pura passione. Credo comunque che un web intelligente e accessibile sia possibilee possa darci maggiori soddisfazioni.

[theorange]

grazie mille!!!

solo un appunto:

body {
background:#e2e4f1;
margin:0;
background:url(immagini/main2_16.jpg) fixed no-repeat 0 0;
}

ora non mi visualizza più il colore di sfondo...

col mio codice strampalato di prima invece lo vedevo...

[pierofix]

Scusa, ho fatto un errore nella fretta. Ecco il codice definitivo:

body {
   margin:0; 
   background:#e2e4f1 url(immagini/main2_16.jpg) fixed no-repeat 0 0; 
}

Ciao e scusa.

[theorange]

scusa????

e de che??

grazie mille!!!