Template 4 colonnes qui se redimensionne suivant la taille de l'écran

Bonjour

Je viens lancer un appel à l'aide. Je me lance dans un type de montage que je n'ai pas l'habitude de maîtriser et je suis un peu pommé entre ce que peut faire le CSS ou le Javascript.

Voici le montage ci-dessous


Il s'agit d'un site qui devra être centré dans la largeur de l'écran.
Les 4 colonnes doivent dans tous les cas prendre toute la hauteur de l'écran.

La subtilité est que si l'utilisateur redimensionne son écran, les images doivent se réduire tout en restant centrées dans la largeur et prendre toute la hauteur de l'écran.

J'ai tenté avec ce guide : http://css-tricks.com/how-to-resizeable-background-image/

Ca prend forme sauf que mes colonnes ne restent pas collées l'une à l'autre en cas de redimensionnement.

Le site sur lequel s'est basée la graphiste est celui là : http://www.k2.pl

Si quelqu'un peut m'aider ca serait génial !

Merci beaucoup !

Bonjour,

Hmm, ça sent quand même bien le design de graphiste print cette histoire.

Dans l'idéal, demander au graphiste de simuler (en déclinant son visuel):
- la mise en page souhaitée sur une largeur de 980px;
- la mise en page souhaitée sur une largeur de 1600px.
Ça te donnera déjà des repères solides (pour peu que les propositions du graphiste tiennent compte des possibilités techniques en intégration web, ce qui peut demander quelques aller-retours ou un travail en commun) pour savoir comment tout ça est censé s'adapter (ou non) à la largeur du viewport.

Pour ce qui est de la hauteur, a priori il faut s'adapter à la hauteur du contenu (donc scroll vertical de base), et avoir un menu en position:fixed.

Pour la mise en page sur 4 colonnes ça doit pouvoir se gérer avec du display:table-cell (si la compatibilité IE7 n'est pas requise, autrement on devra peut-être utiliser un tableau de mise en page).