3 colonnes de couleurs differents et de meme hauteur IE et Mozilla

Bonjour tout le monde ,

Voila je cherche donc comme l'indique le titre quelque chose de très bannale c'est à dire avoir 3 colonnes composés de 2 menus, 1 à gauche et 1 à droite et le contenu au milieu . En me balladant et en lisant plusieus sujet , j'étais tombé la dessus : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Et en regardant je métais dis c'est exactement ce qu'il me faut .
Je commence donc à préparer tout en me basant la dessus . Quelle fut ma surprise quand je mapercu que l'impression de meme hauteur des 3 colonnes sur les shéma n'était qu'une impression . J'ai utilisé la webdevelopper toolbar pour regarder la size au cas ou comme ca et je me suis apercu que la couleur du corps nous trompait et laissait à penser que les 3 colonnes étaient de la meme taille et diminuaient ou augementaient par rapport au contenu au milieu . C'est donc ca que je cherche à faire : 3 colonnes de meme taille de couleurs differentes dont la taille est défini par la taille de celle du milieu (contenu) . Il me semble que c'est sujet qui à déja fait couler beaucoup d'ancre et me semblait il qu'il n'y avait pas encore de solution . J'ai l'impression cependant d'être sur le début d'une piste mais malheuresement elle ne fonctionne que sous mozilla . Comment peut on faire prendre en compte une valeur height en % ou relative (ou la bonne syntaxe équivalente à relative) à internet explorer ? Merci beaucoup A+

Salut

Il y a plusieurs possibilités ... est-ce que le site est en largeur fixe ou fluide ?

jacquesdupontd a écrit :
C'est donc ca que je cherche à faire : 3 colonnes de meme taille de couleurs differentes dont la taille est défini par la taille de celle du milieu (contenu) . Il me semble que c'est sujet qui à déja fait couler beaucoup d'ancre et me semblait il qu'il n'y avait pas encore de solution.

Il y a une solution toute simple, et son petit nom c'est display: table-cell;
Bien sûr, IE étant à la traîne, ça demandera un peu d'élégante dégradation.

Un article qui date de septembre 2004 (donc c'est pas une innovation qui date de ce matin) :
http://www.blog-and-blues.org/weblog/2004/09/24/304
Modifié par mpop (26 Jul 2006 - 20:28)

Ah oui et bien jai lu cette article avec ces fameux table-celle et vous savez quoi ? et bien la colone de droite dans ie ne fait pas du tout la meme hauteur que celle de gauche , exactement comme dans les exemples que j'ai pu voir qui croyaient le faire . Il suffit de recopier simplement cette page , d'appliquer un petit background-color sur la droite et de s'apercevoir très vite que dans mozilla c'est ok mais que dans ie pas du tout . Donc pour l'instant je n'ai vu aucun des exemples supposés montrer ca le faire .
Sopo: si il ya plusieurs possiblités donnes moi en une n'importe je construirai ma page en fonction de ca .

Merci beaucoup, A+

la question t'a été posée: est-ce que tes menus sont de largeur fixe ou fluide?
Si'ils sont fixes en mettant des images d'arriere plan couleur du menu tu resouds le probleme

Bonjour,

jacquesdupontd a écrit :
Il suffit de recopier simplement cette page , d'appliquer un petit background-color sur la droite et de s'apercevoir très vite que dans mozilla c'est ok mais que dans ie pas du tout

Oui, bien-sûr, puisque la technique pour IE repose justement sur la simulation de colonnes de même hauteur via les background

C'est le sens de la question sur la largeur de tes menus : un menu de largeur fixe permettra très facilement de simuler le colonnage. Un menu de largeur variable, selon le design précis, rendra cette simulation plus difficile et parfois impossible.

D'une manière générale, pour te permettre de mieux saisir le problème: pour réaliser des colonnes de mêmes hauteurs réelles, il faut :
- soit passer par des éléments HTML dont le rendu par défaut génère des boîtes de même hauteur: <table><td>
- soit passer par d'autres éléments HTML et forcer leur rendu à adopter le même mode de calcul de hauteur: display:table

IE ne gérant pas cette valeur de display, le rendu dans ce navigateur (sans utiliser <table>) doit nécessairement passer par un artifice et ne donnera qu'une apparence de colonnes de même hauteur.

Si tu souhaites absolument des colonnes ayant véritablement la même hauteur, y compris dans IE, utilise simplement un tableau HTML à trois cellules.
Modifié par Laurent Denis (27 Jul 2006 - 08:44)

jacquesdupontd a écrit :
c'est sujet qui à déja fait couler beaucoup d'ancre

C'est en effet souvent un naufrage

Et moi qui me à moi même "si tu trouve ca va être la fete" genre la quete du graal. J'ai néanmoins trouvé une petite technique intéréssante sous ie , avec la technique des deux absolute (menu de chaque coté) en top: 0%; bottom:0%; qui marche à merveille , mais pas dans ie . Et sinon j'ai fini par créer l'illusion vraiment bien et mieux que ce que j'avais vu pour l'instant avec une en_tete , 3 colonnes de couleurs différentes et un pied de page, le tout dans mozilla et ie . Voila je vous donne l'adresse , dites moi vraiment ce que vous en pensez mais comparer à ce que j'ai vu vraiment je trouve ca mieux pour le moment si lont doit créer un peu l'illusion . Reste à savoir si tout est valide :
http://mtdo.info/test/test.html

A noter qu'il faut que le contenu du milieu soit toujours plus grand que les autres colones si l'ont veut garder l'illusion mais il y a des moyens de faire que ce soit le cas tout le temps .

Merci encore pour vos réponse a+

Voir le résultat lorsque le contenu est moins long que les menus (ce n'est pas nécessairement un problème, tant que la longueur de contenu peut être maîtrisée, mais à l'usage, c'est très rarement le cas).

Oui je t'ai dis effectivement ca ne marche pas quand le contenu est plus long mais on peut se débrouiller pour faire qu'il ne soit jamais plus long avec des overflow et tout ca ou une taille minimum . Mais bon sinon c'est pas mal non ?
C'est une technique que je n'avais jamais vu , on a bien 3 colones de couleurs différentes (meme avec une image différente que je viens de rajouter) qu'en penses tu ?

ps: en plus je peux reflechir à quelque chose pour les cas ou le contenu est plus long pour tromper l'utilisateur et la couleur ou l'image continue quand meme . Après il est necessaire de bien définir l'espace ou le texte est et ne doit pas dépasser peut etre à l'aide de padding . VOila .
Modifié par jacquesdupontd (27 Jul 2006 - 12:20)

Il y a beaucoup de choses inutiles dans la CSS. Il faudrait déjà ramener le code à l'essentiel.

Par exemple, une valeur de padding négative est invalide et sera ignorée par les navigateurs.

Beaucoup de choses inutiles ? euh oui ya la padding ca je le savais ca yest c'est enlevé mais je vois pas le reste qui forme le beaucoup de choses inutiles. Pourrais tu m'informer sur ce que je peux enlever et avoir exactement la meme chose sachant que le padding est bien enlevé désormais ? Merci d'avance ,donc pour répondre à ma question précedement posée :

"Mais bon sinon c'est pas mal non ?
C'est une technique que je n'avais jamais vu , on a bien 3 colones de couleurs différentes (meme avec une image différente que je viens de rajouter) qu'en penses tu ?"

je déduis ta réponse dur à trouver , "non c'est pas terrible ?"

Pour une fois que je croyais avoir trouvé un truc cool , en tout cas j'ai du le trouver tout seul car je ne l'ai trouvé nullpart. Merci pour tes conseils .

ps: Nouvel apercu un peu plus joli pour montrer les capacitées de cette technique . http://mtdo.info/test/test.php
Modifié par jacquesdupontd (27 Jul 2006 - 15:05)

Plus je cherche et plus je m'apercoit que personne n'a trouvé cette technique. J'ai bien l'impression qu'elle est effecivement novatrice et réponds à la plupart des besoins des personnes cherchant à faire d'après ce que j'ai pu voir sur les dizaines de forum visités .

Hello,

Je fais un passage rapide, donc mon avis n'est peut-être pas du plus pertinent qui soit mais a première vue :
- le code est très difficile à lire et comprendre en raison de tous les enchevêtrement de styles.
Tu réussis à cumuler toutes les méthodes d'inclusion de style possible : dans un fichier .css + dans le header + directement dans les balises. Au final, c'est strictement impossible de comprendre l'ensemble.
- apparemment pour chaque "bloc", tu emploies 8 ou 9 éléments <div> imbriqués les uns dans les autres. En clair, pour 5 parties (header, bloc1, etc.), tu utilises plus de 45 <div> imbriqués !
Si c'est le cas, il est bien préférable d'employer des tableaux qui seront au final beaucoup plus facile d'accès aux personnes handicapées.

Un petit exemple : voici le code employé rien que pour le bloc de pied de page :

<div id="pied_page">
<div style="background-image: url('merged/apparence/161_184_154-255_0_0-haut_milieu-bandebleu.gif')" class="elementhaut">
<div style="background-image: url('merged/apparence/120_120_120-haut_gauche-curved.gif');" class="coin-haut_gauche" >
</div>
<div class="hmilieu">
<h4>pieddepage</h4>
</div>
<div style="background-image: url('merged/apparence/120_120_120-haut_droite-curved.gif');" class="coin-haut_droite" >
</div>
<br/>
</div>
    pied_de_page pied_de_page pied_de_page pied_de_page pied_de_page<br />
	pied_de_page pied_de_page pied_de_page pied_de_page pied_de_page<br />
	pied_de_page pied_de_page pied_de_page pied_de_page pied_de_page<br />
	pied_de_page pied_de_page pied_de_page pied_de_page pied_de_page<br />

	pied_de_page pied_de_page pied_de_page pied_de_page pied_de_page<br />
	pied_de_page pied_de_page pied_de_page pied_de_page pied_de_page<br />
	pied_de_page pied_de_page pied_de_page pied_de_page pied_de_page<br />
	pied_de_page pied_de_page pied_de_page pied_de_page pied_de_page<br />

<div style="background-image: url('merged/apparence/182_184_154-255_0_0-bas_milieu-bandebleu.gif')" class="elementbas">

<div style="background-image: url('merged/apparence/120_120_120-bas_gauche-curved.gif');" class="coin-bas_gauche" ></div>
<div class="bmilieu">
<h4>pieddepage</h4>
</div>
<div style="background-image: url('merged/apparence/120_120_120-bas_droite-curved.gif');" class="coin-bas_droite" >
</div>
<br/>
</div>
</div>

... Tu trouves ce code vraiment propre, compréhensible et accessible ?

Le nombre énorme de <div> provient peut-être de ta volonté de rajouter des coins arrondis, mais si tu veux qu'on comprenne ton document, il vaudrait mieux le réduire au plus simple possible.

Bonne chance.
Modifié par Raphael (27 Jul 2006 - 18:53)

bon ok ca cetait facile ta pris celui ou jai mis les coins evidement regarde plutot celui la . Et oui tu as raison cest pourquoi jai mis dans le post precedent la bonne page celle ci n'était qu'un plus our vous faire voir ... http://mtdo.info/test/test.html
Modifié par jacquesdupontd (27 Jul 2006 - 19:14)

Bon, ça se résume à:

#surcontenu {
float: left;
background-color: yellow;
width: 100%;
}
#contenu {
float: left;
width: 80%;
background-color: green;
}
#sommaire {
float: right;
width: 75%;
background-color: gray;
}

<body>
  <div id="surcontenu">
    <div id="contenu">
      <div id="sommaire">
        <p>center</p>
      </div>
      <p>left</p>
    </div>
    <p>right</p>
  </div>
  <div id="footer">
    footer
  </div>
</body>

le float:left de #surcontenu joue le même rôle que les div clear et les overflow:hidden/auto d'autres modèles 3 trois colonnes : forcer #surcontenu à s'étendre verticalement pour englober ses descendants flottants).

Les colonnes latérales débordent sous la colonne centrale si le contenu de celle-ci est insuffisant (ce que ne font pas d'autres modèles de fausses colonnes).

J'avoue ne pas voir l'apport, désolé (j'aurais aimé, pourtant : du nouveau en matière de mise en page est forcément toujours le bienvenu.)
Modifié par Laurent Denis (27 Jul 2006 - 19:39)

Oui je suis d'accord qu'effectivement ma technique ne fonctionne comme je l'ai dit que si le milieu est plus grand que les autres . Mais aucune des autres méthodes ne fait descendre chaque colones, meme uniquement en fonction de la hauteur du milieu , jusqu'en bas . Sans hack et de la meme facon dans ie et dans mozilla , toutes les techniques que j'ai pu voir ne font pas ca . SI bien que tu peux mettre du contenu en bas des colones comme une images de bas pour ton graphisme comme dans la page test.php ce qui n'est pas possible dans les autres techniques sinon je veux bien les voirs mais je les ai toutes testés et meme les overflow hidden ne reproduisaient pas cette effet . Maintenant je suis entierement d'accord c'est très embetant qu'il faille obligatoirement un milieu avec plus de contenu , mais pour certains site ou c'est le cas tout le temps ou des sites qui savent à peu pres la taille maximale qu'aura la colonne ce qui est aussi très souvent le cas (a ce moment ou mais une valeur fixe minimum sur le milieu) ca peu servir . Merci encore a+

jacquesdupontd a écrit :
Oui je suis d'accord qu'effectivement ma technique ne fonctionne comme je l'ai dit que si le milieu est plus grand que les autres . Mais aucune des autres méthodes ne fait descendre chaque colones, meme uniquement en fonction de la hauteur du milieu , jusqu'en bas . Sans hack et de la meme facon dans ie et dans mozilla , toutes les techniques que j'ai pu voir ne font pas ca . SI bien que tu peux mettre du contenu en bas des colones comme une images de bas pour ton graphisme comme dans la page test.php ce qui n'est pas possible dans les autres techniques sinon je veux bien les voirs mais je les ai toutes testés et meme les overflow hidden ne reproduisaient pas cette effet . Maintenant je suis entierement d'accord c'est très embetant qu'il faille obligatoirement un milieu avec plus de contenu , mais pour certains site ou c'est le cas tout le temps ou des sites qui savent à peu pres la taille maximale qu'aura la colonne ce qui est aussi très souvent le cas (a ce moment ou mais une valeur fixe minimum sur le milieu) ca peu servir . Merci encore a+

Bonjour Jacques,

Lors de tes prochaines interventions sur ce forum, pense juste à aérer un peu ton texte, en créant des paragraphes par exemple. Que l'on souhaite demander de l'aide ou en apporter, une bonne lisibilité est essentielle.

Au passage, les signes de ponctuation simples (points, virgules, points de suspension) ne sont jamais précédés d'une espace en typographie française, contrairement aux signes de ponctuation doubles (point-virgule, deux-points).

toutes mes excuses.
Modifié par jacquesdupontd (27 Jul 2006 - 22:00)