[RESOLU] 3 col. avec milieu centré et fixe

Bonjour à tous,

Je reprends la création de sites web pour aider qqn après plusieurs années sans montage et je m'arrache les cheveux sur le gabarit.
Je voudrais en fait :
un rendu en 3 colonnes avec :
- la colonne du milieu fixe à 980 px et centrée dans la page
- une colonne gauche avec une image de fond n°1
- une colonne droite avec une image de fond n°2
- les colonnes Gauche et droite doivent être extensibles pour que le tout soit de 100%

Quelqu'un saurait-il m'aider ?
J'avais une solution avec une image de fond unique mais au redimensionnement en dessous des 980 px, le fond glisse sous le cadre principal et le rendu n'est pas terrible...

Merci de votre aide,

Bonjour J'arrive pas vraiment à saisir ton problème, alors si c'est possible de fournir un lien ou bien un code (au limite du nécessaire) peut être que nous pourrons t'aider

Bonjour Unami,

Merci de vouloir m'aider.
Ci-joint la maquette...
ce qui est appelé 'partie fixe' doit être centré à l'écran.
A gauche, un fond blanc avec un liseré gris doit être répété
A droite, un fond gris uni

Peut-être que tu comprendras mieux mes difficultés,
merci !

Y aura t-il du contenu dans les colonnes gauche et droite? ou bien c'est réservé seulement pour les background ?
Aussi pour le height du centre est-il extensible ou bien fixe car selon ce que je constate d’après la charte (Le coin bas droit du centre) la hauteur est peut être fixe ?! à part si vous prévoyez de redéfinir ce coin avec un background à ombre répétitif, car celui la ne l'est pas.
Modifié par unami (29 May 2011 - 18:54)

Il n'y a aucun contenu.
Tout le contenu se trouve dans la partie centrale.

et pour

a écrit :
Aussi pour le height du centre est-il extensible ou bien fixe car selon ce que je constate d’après la charte (Le coin bas droit du centre) la hauteur est peut être fixe ?! à part si vous prévoyez de redéfinir ce coin avec un background à ombre répétitif, car celui la ne l'est pas.

Alors la bon nouvelle c est que tu n'aura pas besoin de 3 colonnes je t'expliquerai après m'avoir répondu sur le height du centre
Modifié par unami (29 May 2011 - 18:56)

La hauteur sera fixe en effet, dans les 750px de mémoire...

Alors tu n'as besoin que d'un div qu'on nomme par exemple #main et du body pour mettre cela en œuvre:
C'est dans le body que tu va mettre le background de ton image (Ce bandeau déplié qui passe à travers la page):

body{
  background: #fff url('le bandeau ici') no-repeat center 0;
  margin:0;
  padding:0;
}
#main{
  width:980px;
  margin:0 auto;
}

Tu peux optimiser le background image en ne gardant que les parties non blanches et tu peux jouer avec la position y du background pour bien positionner l'image par rapport à ton body selon le découpage que tu feras.
Tant que dans #main tu mettras tes nouveaux éléments et tu leurs affectes la mise en forme souhaité.
N:Si la hauteur va être extensible tu dois découper la partie basse de ton background et prévoir un Div en dessous de main qui prendra toute la largeur de la page et qui contiendra le background du footer exactement comme dans le body à part le changement de l image et de la position y.
J'espère que ça t'aidera
Modifié par unami (29 May 2011 - 19:14)

C'est en fait la solution que j'ai mise en place, mais le bug que j'aimerais contourner est au redimensionnement de la fenêtre en dessous de 980px, la "pliure" du bandeau passe sous le logo...


Je voudrais que le fond ne bouge plus en dessous de 980px ou alors il faut que je trouve une autre façon de monter le site pour contrer ce pb...

Je pensais qu'avec un fond uni gris sur la droite, je trouverais un moyen de le monter, mais je n'arrive tjs pas au résultat souhaité...

Une idée ?
Merci encore
Modifié par cinelles (31 May 2011 - 20:18)

Bonjour
Excuse moi pour le retard , (le boulot), alors maintenant je crois avoir compris ton problème je crois trouver un issu (un bricolage):
Je vois sur le lien fourni un div#gabarit c'est sur celui là que tu vas mener ton jeu, tu lui mets exactement les mêmes infos de background que le body ( background: url("/images/fond-page.jpg") no-repeat scroll center top transparent; ) Le width du body change au redimensionnement mais pour ce div ça ne change pas alors son centre restera le même. J'espère t'avoir aider
N: J'aime bien le design de ce site, et bon continuation pour le reste.

T'es génial ! ça marche impeccable !!
Merci beaucoup d'avoir pris le temps de me dépanner...

Allez maintenant je m'attaque au menu !
Encore merci !
Modifié par cinelles (31 May 2011 - 20:19)

cinelles a écrit :
La hauteur sera fixe en effet, dans les 750px de mémoire...

Damned, il y a encore des gens qui font l'erreur de concevoir des sites de hauteur fixe.
Quinze ans d'éducation au Web à refaire...

Plus sérieusement, ça ne saute pas aux yeux mais ce design pourrait très bien être rendu extensible en hauteur.

En passant, la solution donnée par unami est pas mal, mais il me semble qu'on peut s'en sortir sans rajouter de DIV supplémentaire, en mettant l'image de fond sur BODY et en utilisant min-width pour éviter que BODY ne prenne une largeur inférieure à 980px quand on diminue le viewport.

bonjour
Pour:

fvsch a écrit :
... mais il me semble qu'on peut s'en sortir sans rajouter de DIV supplémentaire ...

, je crois que la description faite ici n'est pas la plus juste à ce cas car ce n'est pas un div supplémentaire et comme le décrit mon intervention j'ai pas demandé d'ajouter de div supplémentaire, mais d'exploiter celui déjà existant pour arriver à sa fin. Toute fois pour le min-width j'y pensé en premier cas, mais en l'essayant sur firebug ff4 sur la page qu'il a fourni précédemment, pour une raison quelconque ça n'a pas marché alors j'ai proposé cette solution là.
Pour la hauteur fixe d'un site, à mon avis je crois que c'est le concepteur du site qui définisse la nature du site web selon leur besoins et le résultat voulu. Et je trouve pas des inconvénients pour cette conception, sachant que les sites flash sont aussi de width et height fixes, alors si on peut avoir quelques raisons convaincantes j'aimerais bien les connaitre si c'est possible fvsch
Modifié par unami (01 Jun 2011 - 02:11)

unami a écrit :
Pour la hauteur fixe d'un site, à mon avis je crois que c'est le concepteur du site qui définisse la nature du site web selon leur besoins et le résultat voulu.

Non non, les hauteurs fixes pour une interface en HTML c'est juste une erreur dans l'absolu.
Sauf si on travaille exclusivement sur des images, la hauteur du contenu n'est pas prévisible. On peut prévoir la hauteur que prendra un contenu donné dans un cas «idéal», mais une caractéristique du Web (et de HTML et CSS en particulier) c'est que l'utilisateur peut agrandir ou diminuer la taille du texte, peut imposer ses propres styles utilisateur grâce à différents outils.

En gros, hauteur fixe = contenu qui dépasse pour une partie des utilisateurs = pas pro.

Oui je comprends ton point de vue mais en ce qui concerne l'inconvénient que tu viens de cité, bien sur que ce n est pas pro de laisser le contenu apparaitre d'une telle sorte, et c'est pour cela que les concepteurs de ce genre de site font appel à des bloques avec des croll

unami a écrit :
des bloques avec des croll

Ce qui passe remarquablement bien sur smartphone, tablette et autres petits écrans.
Les barres de défilement internes, c'est le mal™.