Ho passato un divertente pomeriggio a risolvere, tentando in vari modi, il seguente problema:
Senza fare troppi fogli CSS, visto che non ho voglia di smazzarmeli poi tutti se faccio una modifica, come posso ottenere che l'immagine di sfondo di un sito abbia dimensioni diverse a seconda che l'utente abbia lo schermo impostato su 800x600, 1024x768 o 1280x960??
ecco alla fine come ho fatto:
1) Ho salvato l'immagine prescelta con 3 nomi diversi, ovviamente in 3 immagini diverse per dimensione. 800.jpg 1024.jpg e 1280.jpg
2) Ho eliminato dal foglio di stile css principale i riferimenti al tag
body
3) Ho constatato che mettere un secondo foglio di stile solo con il tag
body, ho fatto alcune prove, non funzionava, non su tutti e tre i browser (Internet Explorer + Mozilla Firefox + Opera)
4) Ho constatato invece che mettere un tag <style> nel head (dedicato al trattamento del tag
body, ovviamente), invece, funzionava.
5) Ecco quindi la soluzione:
5a) un file javascript per la selezione della risoluzione video e conseguente scelta del tag <style> body da usare: "scelta_bg.js"
Codice: Seleziona tutto
if (screen.width > 1269) {
document.write('<style type="text/css">body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #688345; background: #90FFFF url(1280.jpg) top center no-repeat fixed;}</style>');
}
if (screen.width < 950) {
document.write('<style type="text/css">body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #688345; background: #90FFFF url(800.jpg) top center no-repeat fixed;}</style>');
}
if ((screen.width >= 950) && (screen.width <= 1269)) {
document.write('<style type="text/css">body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #688345; background: #90FFFF url(1024.jpg) top center no-repeat fixed;}</style>');
}
5b) Questo è quanto invece ho messo nel file index, nella sezione head:
Codice: Seleziona tutto
<script type="text/javascript" src="scelta_bg.js"></script>
<link rel="stylesheet" type="text/css" title="principale" href="main.css" />
Magia: in tutti e tre i browsers suddetti il comportamento è come lo volevo: a seconda della risoluzione dello schermo, viene caricata l'immagine di background corretta.
Non ho ancora controllato se verrà poi validato
XHTML 1.0 strict... ma spero di si...
Ad ogni modo, io lo posto qua, spero di essere utile a qualcuno, chi vuole discuterne è libero di farlo, naturalmente... il confronto è sempre bello, si imparano un sacco di cose !!
Ho passato un divertente pomeriggio a risolvere, tentando in vari modi, il seguente problema:
Senza fare troppi fogli CSS, visto che non ho voglia di smazzarmeli poi tutti se faccio una modifica, come posso ottenere che l'immagine di sfondo di un sito abbia dimensioni diverse a seconda che l'utente abbia lo schermo impostato su 800x600, 1024x768 o 1280x960??
ecco alla fine come ho fatto:
1) Ho salvato l'immagine prescelta con 3 nomi diversi, ovviamente in 3 immagini diverse per dimensione. 800.jpg 1024.jpg e 1280.jpg
2) Ho eliminato dal foglio di stile css principale i riferimenti al tag [b]body[/b]
3) Ho constatato che mettere un secondo foglio di stile solo con il tag [b]body[/b], ho fatto alcune prove, non funzionava, non su tutti e tre i browser (Internet Explorer + Mozilla Firefox + Opera)
4) Ho constatato invece che mettere un tag <style> nel head (dedicato al trattamento del tag [b]body[/b], ovviamente), invece, funzionava.
5) Ecco quindi la soluzione:
5a) un file javascript per la selezione della risoluzione video e conseguente scelta del tag <style> body da usare: "scelta_bg.js"
[code]if (screen.width > 1269) {
document.write('<style type="text/css">body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #688345; background: #90FFFF url(1280.jpg) top center no-repeat fixed;}</style>');
}
if (screen.width < 950) {
document.write('<style type="text/css">body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #688345; background: #90FFFF url(800.jpg) top center no-repeat fixed;}</style>');
}
if ((screen.width >= 950) && (screen.width <= 1269)) {
document.write('<style type="text/css">body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #688345; background: #90FFFF url(1024.jpg) top center no-repeat fixed;}</style>');
}[/code]
5b) Questo è quanto invece ho messo nel file index, nella sezione head:
[code]<script type="text/javascript" src="scelta_bg.js"></script>
<link rel="stylesheet" type="text/css" title="principale" href="main.css" />
[/code]
Magia: in tutti e tre i browsers suddetti il comportamento è come lo volevo: a seconda della risoluzione dello schermo, viene caricata l'immagine di background corretta.
Non ho ancora controllato se verrà poi validato [b]XHTML 1.0 strict[/b]... ma spero di si...
Ad ogni modo, io lo posto qua, spero di essere utile a qualcuno, chi vuole discuterne è libero di farlo, naturalmente... il confronto è sempre bello, si imparano un sacco di cose !!
