Problema con delle immagini e delle divisioni che si spostano.

cassiopea

Problema con delle immagini e delle divisioni che si spostano.

Salve a tutti, ho un piccolo problema di css.
In questa pagina:
lacasadeibambini3.org/progetti-formazione.html
Quando restringo la pagina per i monitor piccoli la fotografia con il bambino e le parti dentro alle divisioni colorate escono dal layout creando un bruttissimo effetto e andando nel background.
Come posso risolvere?
Come posso fare in modo che si restringano senza uscire?
Grazie.

marinski

Per quel che ne so hai 2 possibilità:
Una é quella di usare un javascript che mi sembra sia adatto a queste sitauzioni, ovvero se rimpicciolisci la finestra del browser l'immagine rimpicciolisce con essa.
C'é uno script apposta da scaricare ma non so dove sia, googlando un po' lo troverai.
Oppure fai comparire un immagine di grandezza diversa per ogni risoluzione differente con questa funzione:


 
<html> 
<head> 
</head> 
<script Language="Javascript"> function Getris() { 
if (screen.width==800 || screen.height==600) { 
document.picture.src='foto_800.jpg' } 
if (screen.width==1024 || screen.height==768) { 
document.picture.src='foto_1024.jpg' }
if (screen.width==1280 || screen.height==1024){ 
document.picture.src='foto_1280.jpg' } 
} 
</script> 
 
<body onLoad="Getris()"> 
<img name="picture" src="qualsiasi_foto.jpg"> 
</body> 
</html>

La seconda possibilità é di usare dimensioni fisse del tuo div content e non em come credo tu abbia usato, ovvero elastiche...
così oltre a non uscire l'immagine il sito non si restringerà minimamente