28172 sujets

CSS et mise en forme, CSS3

Mise en page en colonne et depassement

Pages :
Bonjour,

Je m'arrache les cheveux depuis 2 jours pour arriver à obtenir ce que je veux !

J'ai une mise en page en 3 colonnes. Les 2 colonnes latérales doivent etre contenu dans la colonne centrale.
Les colonnes latérales peuvent avoir un contenu plus grand (long) que la colonne centrale mais en l'etat actuelle des choses étant positionnées si elles sont plus grandes elles depassent de la cellule centrale.

Je voudrais que dans ce cas précis elle agrandissent la taille de la colonne centrale et non pas quelle depassent.

Comment faire ?

Voici le code XHTML : 

<div id="conteneur-millieu">
	
	<div id="centre">
		Contenu central
	</div>

	<div id="gauche">
		Contenu de la colonne de gauche qui ne doit pas depasser
	</div>

	<div id="droite">
		Contenu de la colonne de droite qui ne doit pas depasser
	</div>
	
</div>


code CSS : 

#conteneur-millieu {margin:0 auto; width:766px;}
#conteneur-millieu {position:relative;}
#centre {padding:4px 148px; background-color:red;}
#gauche,#droite {position:absolute; top:0; width:144px; background-color:blue;}
#droite {right:0; background-color:green;}


Merci d'avance pour votre aide !
Les flottants sont tes amis! Smiley smile 
[#black][b]HTML[/b][/#]

<div id="conteneur-millieu">
	<div id="gauche">
		Contenu de la colonne de gauche qui ne doit pas depasser
	</div>
	<div id="droite">
		Contenu de la colonne de droite qui ne doit pas depasser
	</div>
	<div id="centre">
		Contenu central
	</div>
</div>


[#black][b]CSS[/b][/#]

#conteneur-millieu {margin:0 auto; width:766px; overflow:auto;}
#gauche,#droite {float:left; width:144px;}
#droite {float:right;}
#centre {padding:4px 148px}
Bonjour,

Merci mais je n'ai aucune différence sous IE7 ni FF avec ton code
Le colonne centrale n'est pas agrandie.

De plus si possible j'aimerais conserver dans le code la colonne centrale en haut dans le code.

Je suis perdu sur ce coup Smiley decu
neutronweb a écrit :
La colonne centrale n'est pas agrandie.

La colonne centrale dont tu parles, c'est la division "conteneur-millieu" ou "centre" ?
Dans ce cas, c'est vers la méthode dite des colonnes factices qu'il faudra te tourner.

Au niveau de la structure du code, si tu préfères placer #centre avant #gauche et #droite, tu pourras procéder dans ta feuille de styles de cette manière:

#conteneur-millieu {margin:0 auto; width:766px; overflow:auto}
#gauche,#droite {width:144px;}
#gauche,#centre {float:left}
#gauche {margin-left:-618px}
#droite {margin-left:622px}
#centre {width:470px; margin-left:148px}
neutronweb a écrit :
J'ai une des 2 colonnes qui a disparu avec ce css.
N'y aurait il pas une erreur ?

Non, je ne crois pas. T'es-tu bien basé sur ta structure HTML du premier post?
non effectivement j'avais fait une erreur
je vais voir si je trouve des infos sur colonnes factices

Le code quetu me donne en lui meme ne suffit pas si ?

en fait actuellement j'ai un entete et un pied comme ceci : 


<body>

<div id="tete">
	Mon entete
</div>

<div id="conteneur-millieu">
	
	<div id="centre">
		Contenu central
	</div>

	<div id="gauche">
		Contenu de la colonne de gauche qui ne doit pas depasser
	</div>

	<div id="droite">
		Contenu de la colonne de droite qui ne doit pas depasser
	</div>
	
</div>

<div id="pied">
	Mon pied
</div>

</body>
Une remarque en passant: il est préférable d'être en mesure de comprendre le code fourni à titre d'exemple et de l'adapter à ses besoins.

Si on n'y arrive pas, c'est sans doute que l'on a quelques révisions (HTML, CSS) à faire. Smiley cligne
Bonjour,

Ce n'est pas moi qui vais te contredir !
J'ai un peu etudier le sujet et je comprend bien la solution donnée par Benjamin.

Par contre ell ene fonctionne pas sous IE inférieur à 7. Sur ces navigateurs là on a la colonne de droite qui s'affiche sur la droite mais sous le reste du contenu. Et sa je ne comprend vraiement pas pourquoi.

Est ce que une personne peux m'expliquer la raison ?
certe mais c'est quel type de bug qu'on rencontre ici.
J'ai vraiement grand mal ici à comprendre.

Peux tu m'en dire 2 mots ?
Hello,

Je n'ai pas vu de pied de page. S'il n'y a pas de contraintes graphiques particulières, placer les colonnes latérales en position absolue est une option.

Sinon, côté intégration on se simplifiera grandement la vie si on peut partir sur un ordre dans le code HTML soit de type gauche, droite, centre, soit de type gauche, centre, droite.

Il y a aussi la possibilité de faire flotter la colonne centrale tout à gauche, celle de gauche au centre, et celle de droite à droite... et d'intervertir les deux premières via le positionnement relatif.

Mais j'avoue ne jamais avoir été tenté par l'utilisation des techniques de type «One True Layout» en production, car je n'ai jamais eu besoin de «tricher» avec l'ordre du contenu dans le code HTML (vu le peu de crédit que j'apporte aux prétendus gains de référencement attendus).
Hello,

ouf j'ai ps tout compris ton discourt.
Le probleme est que justement avec mon systeme actuel de position absolue sa déborde...

Je cherche justement à faire sans tout en ayant mon contenu principal en premier.

Je suis au bout des idée et des tutos, je fini par me demander si il existe vraiement une solution à mon probleme !!
J'ai beau adompter la solution de benjamin je comprend pas pourquoi elle ne fonctionne pas sous IE inférieur à 7 !
neutronweb a écrit :
Hello,

ouf j'ai ps tout compris ton discourt.
Le probleme est que justement avec mon systeme actuel de position absolue sa déborde...

Je cherche justement à faire sans tout en ayant mon contenu principal en premier.

Je suis au bout des idée et des tutos, je fini par me demander si il existe vraiement une solution à mon probleme !!
J'ai beau adompter la solution de benjamin je comprend pas pourquoi elle ne fonctionne pas sous IE inférieur à 7 !


Bonjour,

Il faudrait clairement faire un effort sur l'expression. Ton message précédent est incompréhensible pour moi Smiley eek .
Bonjour,

Effectivement... je vais reformuler !

Je disais ne pas avoir compris les explications de Florant.
Mon css actuel utilise déjà les positions absolue et justement mon probleme de debordement viens de là d'où mon present post.

Je cherche à effectuer une presentation en trois colonnes sans dobrodement tout en concervant le contenu principal ( la colonne centrale) en haut dans le code XHTML.

Enfin je me demandais si il existais vraiement une solution à mon probleme et comment je pouvais rendre la solution proposée par benjamin fonctionelle avec IE inférieur à la version 7.
Oki doki. Autant pour moi, j'avais un peu zappé le début du sujet.

Donc la solution à adopter (sauf si on souhaite changer l'ordre du contenu HTML pour avoir colonne de gauche puis colonne de droite puis colonne centrale ou bien gauche puis centre puis droit) est celle indiquée par Benjamin.
Tu dis que tu n'arrives pas à l'appliquer de manière compatible avec IE6. On peut voir ce que ça donne pour l'instant?

neutronweb a écrit :
tout en concervant le contenu principal ( la colonne centrale) en haut dans le code XHTML.

Je suppose que la raison de cette contrainte est une référencite aigüe basée sur des postulats non démontrables? Smiley murf
Hello,

Référencement oui dans la mesure ou c'est une refonte (d'un design à base de tableau avec le contenu en premier) et que la direction ne veux pas prendre le risque de modifier l'ordre du contenu et je pense que c'est un risque qu'il ne faut effectivement pas prendre. Mais ceci reste effectivement discutable je suis bien ok avec toi.

Mon probleme est que c'est ok sous IE 7 et FF mais que sous IE inférieur à 7 ce n'est pas du tout ok et que je n'arrive pas à trouver pourquoi ni, si c'est du à un bug, de quel bug il est question.
Sous IE inférieur à 7 j'ai la colonne de droite qui s'affiche bien à droite mais sous les autres colonnes qui elles sont bien coté à cote mais sur le bord droit !

Actuellement voilà où j'en suis :

XHTML : 

<div id="tete">
	Mon entete
</div>

<div id="conteneur-millieu">
	
	<div id="centre">
		Contenu de la colonne du centre
	</div>

	<div id="gauche">
		Contenu de la colonne du gauche qui est long. 
		Contenu de la colonne du gauche qui est long. 
		Contenu de la colonne du gauche qui est long. 
		Contenu de la colonne du gauche qui est long. 
		Contenu de la colonne du gauche qui est long. 
	</div>

	<div id="droite">
		Contenu de la colonne de droite
	</div>
	
</div>

<div id="pied">
	Mon pied
</div>


CSS : 

#conteneur-millieu {overflow:auto; margin:0 auto; width:766px; background-color:red;}
#gauche,#droite {width:144px;}
#gauche,#centre {float:left}
#gauche {margin-left:-618px; background-color:green;}
#droite {margin-left:622px; background-color:blue;}
#centre {width:470px; margin-left:148px; background-color:pink;}
#tete {margin:0 auto; width:766px; position:relative; height:50px; background-color:yellow;}
#pied {margin:0 auto; width:766px; height:50px; background-color:yellow;}


Si tu as une idée ou une page qui parle du bug je suis preneur car j'en suis à m'arracher les cheveux !
Pages :
Sujet clos
Aller à