Problème de dimensionnement Auto sur 5 colonnes

Bonjour,

Dans le but de remplacer les tableaux, et de tirer parti des CSS, je crée 5 colonnes avec des images en background, ciomme ceci:


le code css est:

#box1-1 {
	background-image: url(/images_portail_2007/box1-1.gif);
	float: left;
	height: 28px;
	width: 41px;
	top: 0px;
	right: 0px;
}
#box1-2 {
	background-image: url(/images_portail_2007/box1-2.gif);
	background-repeat: repeat-x;
	height: 28px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 28px;
	font-weight: 500;
	color: #FFFFFF;
	width: auto;
}
#box1-3 {
	background-image: url(/images_portail_2007/box1-3.gif);
	height: 28px;
	width: 16px;
	float: left;
}
#box1-4 {
	background-image: url(/images_portail_2007/box1-4.gif);
	background-repeat: repeat;
	height: 28px;
	float: left;
	width: auto;
	}
#box1-5 {
	background-image: url(/images_portail_2007/box1-5.gif);
	float: right;
	height: 28px;
	width: 25px;
} 

La colonne 2 s'étend avec le texte qu'elle contient.

J'aimerais que la colonne 4, qui contient juste une image de fond, occupe tout l'espace en autoextend entre les colonnes 03 et 05.

Comment faire?

Merci de votre aide.
Eric

Bonjour Éric et bienvenue sur ce forum.

Quel est le but poursuivi ? As-tu très exactement cinq colonnes contenant chacune un contenu spécifique (et pas juste des images de fond ou de mise en forme) ?

Attention à la tentation facile de transcrire en divs ce que l'on faisait en tableaux : dans ce cas, autant garder un tableau à cinq cellules, ça sera bien plus robuste qu'un bricolage à base de divs...

Plutôt que te dire ce qui cloche avec ce que tu as fait, j'aimerais plutôt que tu nous présente ce que tu essaie de faire, afin que l'on te propose des solutions peut-être plus adaptées à tes besoins que ce que tu as réalisé et qui ressemble, à vue de nez, à du bricolage.
Modifié par mpop (11 Oct 2006 - 12:37)

Ok ok, je bricole, je suis nul, etc...

Mon but est d'apprendre le XHTML, et donc de comprendre comment fonctionnent les CSS.

C'est pourquoi je souhaite savoir si une colonne peut effectuer un autoextend par rapport à une autre colonne.

Cliquer sur l'image qui explique très bien le problème.

Merci pour votre réponse.

alsaboss a écrit :
C'est pourquoi je souhaite savoir si une colonne peut effectuer un autoextend par rapport à une autre colonne.

Je t'arrête tout de suite : les colonnes et le découpage d'une mise en page en colonnes, c'est la stratégie adoptée pour une mise en page à l'aide de tableaux de mise en forme.

Si on veut faire une mise en page avec un code sémantique et une mise en forme via une feuille de style CSS, il ne faut pas réfléchir ni en colonnes, ni en termes de découpage en colonnes.

Enfin, des divs (ou autre élément CSS hors table, tr, td, etc.) ne pourra jamais être une colonne au même titre qu'une colonne de tableau, avec les même propriétés.

La question est donc : que veux-tu réaliser exactement ?

Ton image présente le haut d'une maquette, découpé en cinq colonnes. Ce découpage est adapté pour une mise en page en tableaux, mais il ne sera pas adapté pour une mise en page CSS. Donc : on oublie, on repart de la maquette, et on demande des conseils pour réaliser cette maquette ou une partie précise de cette maquette.

Hop, c'est parti.

Je ne veux rien réaliser, je cherche à comprendre la mise en forme par les CSS.

Je voulais savoir si une colonne (ce site regorge d'exemples d'utilisation des CSS pour faire des colonnes qui remplaceraient les Tables) peut, selon mon exemple faire un autoextend par rapport à une autre dont la largeur serait variable en fonction tu texte qu'elle contient.

Ni plus, ni moins. Quand je saurai me servir des CSS, je prendrai mes décisions stratégiques en fonction des paramètres que j'aurai acquis.

alsaboss a écrit :
Je ne veux rien réaliser, je cherche à comprendre la mise en forme par les CSS.

Mais en général on comprend mieux face à un objectif concret...

alsaboss a écrit :
(ce site regorge d'exemples d'utilisation des CSS pour faire des colonnes qui remplaceraient les Tables)

Correction : ce site regorge d'exemples d'utilisation des CSS pour faire des mises en pages avec plusieurs blocs sur une même largeur, ce qui correspond effectivement à un type de design pour lequel on utilisait traditionnellement des tableaux.
Une colonne, c'est quelque chose d'assez précis, même si par abus de langage on parle souvent de « colonnes » pour deux blocs positionnés côte-à-côte.

alsaboss a écrit :
Je voulais savoir si une colonne (...) peut, selon mon exemple faire un autoextend par rapport à une autre dont la largeur serait variable en fonction tu texte qu'elle contient.

Oui, une colonne de tableau fait ça très bien.
Avec deux divs flottantes (souvent utilisées pour faire des « colonnes »), je crois pas que ça soit jouable.

Mais hors de tout contexte concret ça ne veut pas dire grand chose.