immagine header

[Gio&Ste]

Sto cercando di fare in modo che l'immagine che compare nell'header di un sito che sto facendo cambi in base alla risoluzione, in modo da non risultare tagliata o peggio ancora duplicata.

 <script type="text/javascript"> 
<!-- 
if (screen.width == "800"){ // 800 
document.write('<link rel="stylesheet" href="css/style800.css" type="text/css">'); 
} 
if (screen.width == "1024"){ // 1024 
document.write('<link rel="stylesheet" type="text/css" href="../css/style1024.css">');
} 
// --> 
</script>

In questo modo funziona, vorrei continuare ad utilizzare questo modo per richiamare il foglio di stile

 <style type="text/css">
@import url(css/posizione.css);
</style>

[br1]

chi = (screen.width <= "800")?'800':'1024';
document.write(' <style type="text/css">');
document.write('@import url(css/style'+chi+'.css);');
document.write('</style>');



ciao

[Mich_]

NOn sono sicuro di aver capito.

Intendi questo?

<script type="text/javascript"> 
<!-- 
if (screen.width == "800"){ // 800 
  document.write('<style type="text/css">@import url(css/style800.css);</style>'); 
} 
else if (screen.width == "1024"){ // 1024 
  document.write('<style type="text/css">@import url(css/style1024.css);</style>');
} 
// --> 
</script>

Tieni presente che non ci sono solo le risoluzioni 800 e 1024.
In ambiente Intel/Windows ci sono anche 640, 1240, ed altre piu` alte.
In ambiente MAC le risoluzioni sono diverse.
Ed esistono altri ambienti.

Dovresti quindi usare una formulazione differente:
if(screen.width < 1000) { ...}
else {...}

E comunque chi ha schermi ad alta risoluzione di solito usa il browser in una finestra.
Quindi, per come la vedo io, stai facendo un lavoro inutile, se non controproducente.
Il mio consiglio e` di fare un'immagine che vada bene per circa 800x600 e centrarla nella finestra (senza farla ripetere).

[Gio&Ste]

Mich_ sembra proprio che hai capito il mio problema, io inserisco l'immagine in questo modo. Fino ad ora era una immagine adatta ad uno schermo 800x600.
Non so come fare a centrarla nella pagina.

div#header{height:77px;background-color:#36C;color: #ff0; background-image: url(../images/panoramica.gif)}

[Mich_]

Nota che la soluzione di br1, e` molto simile alla mia, solo un po` piu` compatta ed elegante.

Se invece ti riferisci al fatto di centrare lo sfondo, vedi questo CSS:

div#header{ 
  height:77px;
  background-color:#36C;
  background-image: url(../images/panoramica.gif);
  background-repeat: no-repeat;
  background-position: center, center; /* o altre posizioni */
  color: #ff0; 
}

[Gio&Ste]

In che senso controproducente?

[Mich_]

Ti faccio il mio esempio.
Io ho uno schermo largo circa 1240 px.
In tale schermo apro una finestra del browser di circa 800px, sufficiente per tutti i siti fatti bene e per la maggior parte dei siti.
Se qualcuno fa lo sniffing della larghezza dello schermo, trova il 1240, ma se le pagine che vengono scaricate sono larghe 1240px, io devo iniziare a scrollare orizzontalmente, e quindi rinuncio alla navigazione.

(Della serie "chi non sa programmare non e` degno della mia attenzione").

[Gio&Ste]

Grazie della spiegazione, anche se non penso che ilfatyto che devi scrollare orizzontalmente ti crei qualche problema.
Diverso è naturalmente il discorso se c'è del testo a destra e bisogna scrollare per poterlo trovare.