Contenuto div centrale che si adatta a seconda della risoluzione

[FN79]

Ciao a tutti.
Sto iniziando a progettare un nuovo sito ma ho un dubbio enorme.
La struttura prevedere:

- una header fissa al centro con larghezza e altezza fissa di 1200 x 130px
- un footer sempre agganciato al fondo del monitor (indipendentemente dalla risoluzione) posizionato al centro e con larghezza e altezza fissa di 1200 x 60px

Praticamente mi scorre sempre e solo la parte centrale tra l'header e il footer.
Il problema inizia qui, nel senso che il cliente mi chiede che il contenuto del middle sia sempre ben visibile e proporzionale indipendentemente dalla risoluzione del monitor dell'utente finale.

Per esempio considerando che l'homepage è composta da 2 file di immagini il risultato deve essere che tra la fine della seconda fila di foto e il piede sempre fisso in basso non ci deve essere nè sfondo bianco di stacco nè barra di scorrimento laterale.

Quindi praticamente le immagini e/o il contenuto del middle dovrebbero ridimensionarsi a seconda della risoluzione del monitor dell'utente in modo da potergli proporre sempre la migliore visualizzazione possibile.

Io non so come costruire una struttura centrale del genere (header e footer sono invece pronti) ne tantomeno dire al grafico le dimensioni corrette in altezza delle immagini.

Avete qualche soluzione da suggerirmi oppure qualche sito da cui prendere spunto?
Spero di essermi riuscita a spiegare ..

Grazie 1000
FN

[freenetw]

Dive usare le percentuali per width e height e non i pixel. In questo modo le dimensioni saranno sempre proporzionate alla grandezza dello schermo

[FN79]

Cioè, tu mi consigli di usare le percentuali per il middle?
Non ho ben capito, scusa

Per l'header e il footer visto che devono essere sempre fissi e al centro posso continuare ad usare le dimensioni in px? .. effettivamente funzionano correttamente.

Dovrei fare un contenitore middle in percentuale?
Ma poi che dimensioni dico al grafico perche mi dia le immagini corrette?

[freenetw]

Esattamente.
Per le immagini puoi anche usare le proprietà width ed height così:
#tuodiv img {
width: 40%;
height: 40%;
}

[FN79]

Grazie per la risposta, però credo di non riuscirmi a far capire.
Per esempio, guarda l'homepage di questo sito http://www.patriziapepe.com/it/it .. ha una struttura simile a quello che devo fare io ..

Considerando che da me il bottom deve essere fisso ed attaccato al fondo del browser, io vorrei che l'immagine centrale si ridimensionasse come larghezza / lunghezza in base alla risoluzione del monitor.

Sia che la veda a 800x600 che a 1024 x 768 il lato in basso dell'immagine deve 'toccare' il bottom fisso in fondo.

Un pò + chiaro?
Io non posso dare come hai scritto tu un 40% (o un'altra percentuale) così a caso ..

[freenetw]

Scusami è, ma se tu dai ipotesi width: 100%; significa tutta la la larghezza dello schermo, se dai 50% significa la metà, quindi se a te serve un'immagine che devi essere larga il 30% dello schermo metti 30% e quella sarà la larghezza. Solo tu sai quale sia questo valore e quindi farlo adattare alle tue esigenze. Non credo abbia mai scritto di mettere percentuali a caso ^^

[FN79]

Per 'a caso' intendevo il fatto che non so quale percentuale mettere perchè a seconda della risoluzione dello schermo io non posso mettere il 100% oppure il 40% .. non riesco a vedere correttamente l'immagine in nessuno dei due modi ..
O me la taglia oppure mi lascia uno spazio bianco prima di toccare il menù fisso in fondo ..

L'immagine dovrebbe autonomamenta allargarsi o restringersi dentro al div tra l'header ed il footer (fissi rispettivamente al top e al bottom della pagina) a seconda della risoluzione del monitor senza che venga tagliata o deformata.

Bah, secondo me non ci salterò mai fuori ..