[résolu] Gabarit en 3 colonnes dont une à largeur fixe et centrée.

Salut,

je n'ai pas de lien à vous donner pour illustrer mon problème, mais il est simple a expliquer et à comprendre, je m'explique :

Je suis en train de refaire le site de la boite dans laquelle je bosse, et au passage, je vais tester pluxml que j'ai découvert il y a peu, mais ça c'est pas important pour la résolution du problème, c'est juste pour situer.

Mon problème c'est que le design que je veux faire est composé d'une colonne centrale de largeur fixe et de deux autres sur les côtés à largeur variable selon la résolution, c'est à dire qui vont jusqu'aux bords.

Le pourquoi je veux ça, c'est que j'ai besoin d'une image de background a gauche de ma partie centrale qui aille jusqu'au bord à mettre en repeat-x, et d'une autre me servant de header en quelque sorte qui s'étend sur tout le reste, mes images sont à peu près identiques, sauf que leur hauteur diffère.

Donc hauteur differente et pouvant s'étirer jusqu'au bord, je ne vois que la solution que je vous ai exposé plus haut, le problème c'est que je ne sais pas si c'est possible, j'ai bien cherché mais je vois pas comment faire.

La seule autre possibilité que j'ai, c'est de ne pas faire un design centré, de le faire calé a gauche, avec une largeur fixe pour ma colonne de gauche.

Quelqu'un a une idée ?
Modifié par stoopx (07 Nov 2006 - 01:23)

Bonjour,

Pas tout compris, un petit lien ou un schéma !!

Bonjour,

+1 ...

stoopx a écrit :

je n'ai pas de lien à vous donner pour illustrer mon problème, mais il est simple a expliquer et à comprendre

pas vraiment simple à comprendre !

Salut ghost et Vero, merci d'avoir répondu, désolé, je n'ai peut-être pas été aussi clair que je le pensais, je vous ai fait un petit schéma :


http://www.image-dream.com/membre/up/mini_anonym/b484a6b0c91d2038962c2b662eb24f2d.jpg

Alors je réexplique, les lignes rouges déterminent les trois parties du design, A ,B et C, les blocs noir représentent mes images.

La partie centrale B a une largeur fixe de 700px et doit être centrée dans l'écran, pour le background, j'utilise une image en repeat.

Sur les parties A et C, j'ai besoin d'une image en repeat qui s'étire du bord de ma partie centrale, jusqu'au bord de l'écran, distance qui varie selon la résolution, à droite, l'image est la même que sur la partie centrale, si ça avait été le cas sur toute la largeur de l'écran, je n'aurais pas eu de soucis, un background général aurait suffit, mais le problème c'est qu'à gauche, je veux une image plus haute.

Donc je me suis demandé comment théoriquement, je pourrais parvenir à ça et pour ça il me faudrait un gabarit en 3 colonnes, celle du milieu centré et à taille fixe, et une sur chaque bord à taille variable, mais d'après mes connaissances en css j'ai peur que ce ne soit pas possible, étant par nature assez humble et modeste, je ne prétends pas tout connaître en css, loin de là, c'est donc pourquoi, ne connaissant pas de solution à mon problème, et n'en ayant pas trouvé par mes recherches, je pose la question ici.

Comme je le disais dans mon premier post, une solution de secours pour obtenir le même design est de ne pas faire le site centré et de mettre une largeur fixe à gauche, mais j'aimerais bien qu'il soit centré, une autre solution mais pas géniale est de faire de l'approximatif, c'est à dire de spécifier une largeur de 15 ou 20 % à mes parties gauche et droite ce qui centrerait à peu près ma partie centrale, mais selon la résolution d'écran, celle-ci ne se retrouverait pas au même endroit à moins que quelqu'un connaisse un rapport qui me donnerait le même résultat quelque soit la résolution.

Donc ma question est, est-il possible de créer un gabarit en 3 colonnes avec une partie centrale à largeur fixe et centrée par rapport à l'écran, et deux parties sur les côtés remplissant l'espace restant ?

... c'est vrai que c'est pas si simple lol

bonsoir,

sans avoir tester , voici comment je tenterais le resultat:

1) d'abord une dtd valide
2) 2 conteneurs recevant les background de droite et gauche , se partageant la page a 50% chacun en largeur , positioné en absolu avec une height de 100% et right/left:0 et bottom:0 .
3) html et body mis a height:100%;
4) pour justifié la presecence de ces deux balise supplementaire y incorporé a l'attention de certains visiteurs des liens de conforts de navigation comme un raccourcie vers le contenu de la page , rappel du nom de la page visité , un fil d'ariane , etc ... , ou utilisé 2 span qui disparaitront en cas de navigation sur le site sans css .
5) mettre le reste du html en static et centré le site avec les valeurs css habituelles.

j'espere faire avancé un peu l'histoire

bonsoir

Merci gcyrillus, ça m'a l'air pas con du tout, je ne peux pas tester ça tout de suite parce qu'il est tard et que j'ai une lettre de motivations à rédiger à la main pour demain matin (euh tout à l'heure ) mais dès que j'ai un instant, je teste ça, et je vous tiens au courant.

Si d'autres voient d'autres façons de faire, je crache pas dessus non plus ...

Bonjour,

Le seul problème reste la perte d'accessibilité des 2 colonnes extérieures en cas de diminution de la resolution ... mais je n'ai pas réussi mieux !! il n'ya qu'à voir !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
		<title>Test</title>
<style>
html, body{
height: 100%;
margin:0;
padding:0;
}

#conteneur {
width: 100%;
margin:0;
padding:0;
height: 100%;
position: relative;
background: orange;
top:0;
left:0;
}

#gauche{
width: 50%;
height: 100%;
position: absolute;
top:0;
left:0;
margin:0;
padding:0;
background: blue;
z-index: 10;

}

#droite{
width: 50%;
height: 100%;
margin:0;
padding:0;
margin-left:50%;
background: yellow;
}

#centre{
width: 700px;
height: 100%;
position: absolute;
background: green; 
left: 50%;
margin-left: -350px;
top: 0;
z-index: 100;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>
</div>
</body>

</html>

Salut.

Il me semble qu'il y a un div en trop dans la solution de gcyrillus. Pourquoi ne pas laisser l'image la plus courte dans l'arrière-plan de html ou body ?

Avec

<body>
   <div id="background">
   </div>
   <div id="global">
       Le contenu de la page
   </div>
</body>

Et

body {
  background: url(imageCourte.png) repeat-x;
}
#background {
   position: absolute;
   width: 50%;
   height: XXXpx; /* La hauteur de l'image de fond */
   background: url(imageLongue.png) repeat-x;
   z-index: 1;
}
#global {
   width: 700px;
   margin: 0 auto;
   background: url(imageCourte.png) repeat-x;
   position: relative;
   z-index: 99;
}
}

ça devrait suffire, non ?

Pour ce qui est de "justifier" la présence de la balise supplémentaire, est-ce bien nécessaire ? D'accord, c'est une entorse au balisage sémantique, mais tant qu'à placer des liens de confort, autant les placer à l'endroit le plus approprié (et tant pis si la div reste vide)

le div se peut d'etre une <li> de liste de lien de confort , le position:absolute; se suffit de n'importe quel type de balise ...
++

Waou, j'avais peur ce week-end en voyant que je n'avais aucune réponse, et là c'est la déferlante , merci.

Alors en suivant les conseils avisés que gcyrillus m'a donné hier soir, j'ai testé en début d'aprem ceci :

<body>
<div id="gauche">
<a id="lien_confort" href="index.html"></a>
</div>
<div id="droit"></div>
<div id="conteneur">
</div>
</body>

et

#gauche {
position: absolute;
top: 0px;
left: 0px; 
bottom: 0px;
width: 50%;
height: 100%;
margin-top: 0px;
margin-left: 0px;
background : url(img/imagelongue.jpg) repeat-x;
}

#lien_confort{
background-image: url(img/autreimageutile.png);
position: absolute;
top: 0px;
left: 100%;
width: 98px;
height: 522px;
margin-top: 0px;
margin-left: -449px;
}

#droit {
position: absolute;
top: 0px;
left: 50%; 
bottom: 0px;
width: 50%;
height: 100%;
margin-top: 0px;
margin-left: 0px;
background : url(img/imagecourte.jpg) repeat-x;
}

#conteneur {
position: absolute;
left: 50%; 
top: 0px;
width: 700px;
height: 100%;
margin-top: 0px;
margin-left: -350px;
background : url(img/imagecourte.jpg) repeat-x;
}

avec une image utile a mon design en background du lien de confort qui vient se placer toujours au bord de ma partie centrale, et ça marche, pas eu de soucis, j'ai testé diverses résolutions et nickel, c'est ce que je voulais, alors effectivement, je peux certainement me passer de la partie de droite, ce qui va sans doute me servir aussi pour le design en réduisant mon code puisque du coup je pourrais mettre autre chose en background de ma partie centrale qu'il m'aurait fallu mettre dans un autre bloc sinon.


je n'ai pas trop compris ce que tu voulais dire par là gcyrillus :

a écrit :
Le seul problème reste la perte d'accessibilité des 2 colonnes extérieures en cas de diminution de la resolution ...

je suis au taf et j'ai lu et réponds vite fait parce que je finis dans trois minutes donc pas trop eu le temps d'y réfléchir mais à première lecture, je ne vois pas trop ce que tu entends par là

ps : mon code est pas optimisé, j'ai fait des tests vite fait en reprenant des bouts de css que j'avais déjà fait pour d'autres sites et où je n'ai modifié que ce qu'il me fallait (pour pas tout réecrire et ainsi gagner du temps) donc il y a des trucs en trop et d'autres qui ne sont pas fait pareils, n'y faites pas gaffe siouplé

Je teste avec une colonne en moins et je vous tiens au courant merci encore
Modifié par stoopx (06 Nov 2006 - 19:14)

bonsoir , heu , c'est ghost qu'il faut remercier .

tu peut aussi faire pour le html , si tu as peur de la divite .

<ul>
<li id="gauche">
<a id="lien_confort" href="index.html">acceuil</a>
</li>
<li id="droit">vous étes ici : page 1</li>
</ul>
<div id="conteneur">
</div>

Sopo evoquait aussi d'une image dans le fond de html et l'autre de body , si tu veut faire abstraction de IE en mode quirk et les "vieux" navigateurs . c'est une solution qui ne demande aucune balise supplementaires.
Pour inclure les vieux navigateur il te proposait alors un div (ou autre) + body , puis la page ...

bref , il ya eu au moins 3 personnes qui se sont interessé a ton probleme

++

Bonsoir,

Flaté qu'on m'ait prété les mêmes compétences que gcyrillus (j'ai encore de la marge !!!)

Pour la perte d'accessiblité, si tu réduits ta fenêtre, tant que tu n'atteinds pas la limite de ton bloc central, tu n'auras pas la barre de scroll horizontal donc les parties cachées de tes colonnes externes ne seront plus accessibles (jusqu'à disparaitre) ... Ennnuyeux en fonction du contenu (menu par exemple) mais si elle ne representent que des cosmétiques alors ...

Bonsoir, désolé de m'être trompé de personne lol, quoi qu'il en soit, mes remerciements vont vers tous ceux qui ont participé, donc gcyrillus, ghost et sopo.

Pour ce qui est de la perte d'accessibilité des parties gauche et droite quand on baisse en réso, pas de soucis, elle ne servent qu'a l'esthetique du site, sinon j'aurais dû choisir une largeur inférieur pour ma partie centrale évidemment, mais comme ça ça me convient très bien, je suis content, ça marche comme je le voulais et en plus j'ai appris quelque chose, je ne savais pas qu'on pouvait rajouter des blocs de cette façon avec un site centré.