[RESOLU] Même comportement qu'un tableau mais avec des divs + css

Bonjour,
J'ai une colle pour les cracks du css...franchement je l'ai retournée dans tous les sens celle-là alors j'espère qu'il y a quand même une solution !

Je cherche à faire 3 colonnes côte à côte et qui s'adaptent à leur contenu (non, partez pas ! c'est pas le topic bateau sur les templates "3 colonnes flluides" ! c'est un peu plus subtil...).

Je voudrais avoir le même comportement qu'une table qui n'aurait qu'une ligne et 3 cellules disposées côte à côte dans cette ligne.

Ma 1ère colonne contient un menu dont la taille précise varie en fonction de la langue/et des pages. Ma 3ème contient un petit menu qui varie aussi en fonction de la langue/et des pages. Et ma 2ème colonne, au milieu, prend la place qui n'est pas occupée par les deux autres.
Enfin, leconteneur de mes trois colonnes fait 1024px (enfin une taille fixe!)

Comme ça, ça n'a pas l'air insurmontable...attendez voir...
=> il n'est pas possible que la colonne du milieu glisse sous les autres (car mon background des cellules droite et gauche est transparent alors que celui de la colonne du mileu est blanc...essayez de voir à travers du blanc vous !).
C'est la que le bas blesse...
Je ne peux pas non plus appliquer des marges à droite et à gauche de ma colonne centrale car je ne sais pas à l'avance quelle taille feront mes colonnes droite et gauche !

C'est un vrai casse-tête !! J'espère que ce sont mes compétences qui pêchent et non les possibilités du css.

Allez : c'est un chouette défi pour ceux qui prétendent que le css remplace avantageusement la mise en page par tableaux !
Modifié par ordiminnie (18 Aug 2010 - 16:25)

Jusqu'à preuve du contraire les langages HTML+CSS ne servent pas à démarrer d'une idée graphique puis à se débrouiller ensuite pour la restituter, mais l'inverse. On part d'un contenu qui prendra la forme qu'il pourra au regard de nombreux critères.
Sans regarder la question posée précisément, si mettre en forme des contenus selon un canevas graphique préconçu relève du challenge (voire carrément du défi lancé à la médiévale), alors la question elle-même n'a sûrement pas de sens. Si des problèmes de transparence/fond blanc et d'autres de hauteur "pas plus que... ou moins que..." se posent et viennent former une contrainte, c'est sûrement que la question est mal posée ou l'affaire mal ficelée au départ. Un contenu doit pouvoir être utilisable sans fond et quelle que soit sa taille/hauteur. Si l'utilisateur décide d'agrandir les tailles des textes il y a fort à parier que même si une solution est apportée à ta question, elle ne le supportera pas parce qu'un élément sera fixe et donc les contenus pousseront toujours vers le bas. Il y a donc vraisemblablement une autre façon de poser la question qui appelle une solution plus immédiate, pour un résultat probablement assez proche mais bien plus stable.

Hello,

@Arsene +1... mais il y a aussi la contrainte de ce que demande le client.

Sinon techniquement il me semble bien que le tuto Un design fluide avec trois «colonnes», grâce au positionnement flottant répond à la demande (en choisissant la technique du contexte de formatage).

@Heyoan : merci pour le tuto, en fait je l'avais déjà parcouru mais sans comprendre que c'était ma solution. Je me suis longuement arretée (et mis en pratique) sur le tuto juste avant (avec les margin de part et d'autre du contenu qui sont de la meme taille que les colonnes exterieures) et après ça, j'imagine que j'ai du aller sur d'autre site...sans rien trouver de mieux...et au final j'ai oublié de revenir la dessus! merci beaucoup, ça a l'air de convenir à ce que je cherche.

@arsene: je suis d'accord avec toi dans l'ensemble mais, comme le dit Heyoan, ya aussi les contraintes du client... en fait, mon boss veut que je reproduise en html+css, un menu qu'il a vu sur un site...en flash! et les onglets sont tout en transparence, pour qu'on voit l'image de la bannière en dessous. Bref, je suis en stage, avec emploi à la clé...je suis pas trop en position de lui dire : "Jusqu'à preuve du contraire les langages HTML+CSS ne servent pas à démarrer d'une idée graphique puis à se débrouiller ensuite pour la restituter, mais l'inverse."

alors je me débrouille comme je peux..mais c'est sur que c'est pas le super respect des standarts....je fais quand même du mieux possible : j'ai quand même dit à mon patron que ct tordu à faire, ce à quoi il m'a répondu "fais le en tableaux, ça marche, je l'ai déjà fait." Là, j'étais un peu dépitée, j'ai voulu lui expliquer les standards et tout ça, mais c pas trop le genre...c'est plutot : "on met un iframe dans un tableau dans un autre tableau, le tout dans une frame !!" désolant...j'essaye de les amener à laisser tomber tout ça mais rome ne s'est pas fait en un jour !

Bref, je l'ai d'abord fait en tableau (ne trouvant pas comment faire en css) mais ya un petit bug sur IE (...) et donc je me suis dit qu'il devait y avoir une autre _bonne_ façon de faire ?!

Voilà, tout ça pour me justifier, histoire que je me traine pas une réputation de "je fais n'importe quoi pourvu que ça marche" (au contraire, je ne demande qu'à respecter les standards!)

Maintenant, si tu as une solution "plus immédiate, pour un résultat probablement assez proche mais bien plus stable.", je suis preneuse ; dans le cas où je ne trouve pas d'issue parfaite, il faudra trouver la plus acceptable.

Merci à tous les deux ! et bonne soirée

ordiminnie a écrit :
je suis pas trop en position de lui dire : "Jusqu'à preuve du contraire les langages HTML+CSS ne servent pas à démarrer d'une idée graphique puis à se débrouiller ensuite pour la restituter, mais l'inverse."

Bien sûr, c'est clair. Je disais ça juste pour dire quelque chose. Le client est roi. (juste dommage qu'il ne comprenne pas bien que ce qui devrait être roi, c'est son ROI, son retour sur investissement : il dépense une certaine somme pour un résultat X... en dépensant la même somme pour un résultat Y il accroît à la fois (1) son potentiel visiteurs (2) l'utilisabilité/pertinence de son offre commerciale (3) la pérennité de son investissement sur la durée parce que le site ne sera pas à refaire intégralement dans un an et demi.)

bien vu le coup du ROI ;

Je reposte pour signaler que finalement, la méthode "avec contexte de formatage" ne convient pas non plus car les colonnes externes sont de largeur fixe et moi, je ne peux pas déterminer à l'avance la largeur de mes colonnes droite et gauche.

Mais j'ai réussi à trouver une solution (bricolage extrême, je vais même pas en parler ici pour pas diffuser de si mauvaises façon de faire.)

Si quelqu'un est bloqué dans pareille situation, qu'il m'envoie un MP. Mais c'est pas dit que ma soluce convienne à d'autres.

Bye !

euh...comment on met sur [réglé] ?

ordiminnie a écrit :
euh...comment on met sur [réglé] ?

On édite le premier poste et on rajoute [Résolu] à la mimine dans le sujet

ordiminnie a écrit :
la méthode "avec contexte de formatage" ne convient pas non plus car les colonnes externes sont de largeur fixe

Justement non : la largeur n'a pas besoin d'être fixe. Cela va dépendre du contenu et des padding, margin, min-width, max-width, ...

Sinon pour une solution alternative le plus simple est encore le tableau.

merci pour ces précisions, j'ai apparemment mal compris (puisque je pensais qu'il fallait des largeurs fixes). J'y jetterai un oeil plus tard.
Par contre, le tableau ne convient pas sur IE, ya un défault dans l'affichage...

Merci