Alignement horizontal entre contenus de colonnes

Bonjour,

je rencontre un problème pour la présentation que je cherche à faire.
Je souhaite afficher du texte et des images dans des colonnes en conservant un alignement horizontal d'une colonne à l'autre entre les contenus identiques.

Un peu de code et un schéma pour expliquer les choses plus clairement :

<style>
#conteneur {
width:500px;
text-align:center;
}
.colonne {
width:250px;
text-align:center;
float:left;
}
.contenu {
width:240px;
}
.contenu a {
display:block;
}
.image {
width:240px;
height:200px;
}
.texte {
font:Arial 10px black;
text-align:left;
}
.clearer {
clear:both;
}
</style>

<div id="conteneur">

<div class="colonne">
	<div class="contenu">
		<div class="texte">TITRE 1</div>
		<div class="texte">SOUS TITRE 1</div>
		<img class="image" src="img1.jpg" alt="image 1" />
		<div class="texte">TEXTE 1</div>
		<a href="lien.html">lien 1</a>
	</div>
</div>
<div class="colonne">
	<div class="contenu">
		<div class="texte">TITRE 2</div>
		<div class="texte">SOUS TITRE 2</div>
		<img class="image" src="img2.jpg" alt="image 2" />
		<div class="texte">TEXTE 2</div>
		<a href="lien.html">lien 2</a>
	</div>
</div>
<div class="clearer"></div>

</div>

en gros, ça donne quelque chose comme ça (les rectangles noirs représentent des images):



alors que je voudrais obtenir ceci:



c'est-à-dire faire en sorte que les parties marquées 1, 2, 3 et 4 soient toujours alignées horizontalement et de même hauteur entre les 2 colonnes, sachant que la taille des textes qu'elles contiennent peut varier (le contenu est affiché dynamiquement via du php)... mais je n'arrive pas à obtenir ce résultat, j'ai aussi essayé avec une mise en page en tableaux mais rien à faire...

Y aurait-il une solution à ce problème?

Merci d'avance pour votre aide!
Modifié par Lenni (13 Nov 2006 - 23:09)

Bonjour,

Pour cela, il te faut donner un height à ton bloc sous titre et à ton bloc texte pour chacun de la hauteur maximale du plus long des textes (utilise <hn> pour tes titres) pour 2 blocs consécutifs.

Soit tu le fais au pif mais ce sera moche ou mieux tu calcules ton height max par paire de blocs en php ...

Salut,

merci pour ta réponse, mais justement le problème est que je ne peux pas connaître la taille des textes, étant donné qu'ils sont affichés dynamiquement et qu'ils proviennent d'une bdd, leur longueur peut varier du simple au triple, et d'autre part comme la police est également paramétrable, je ne peux pas fixer de taille maximum puisque d'une police à l'autre la place prise par un même texte peut varier énormément... j'avais déjà pensé au truc de la hauteur, mais je me demandais s'il n'y aurait pas moyen d'obtenir ce résultat en jouant sur certaines propriétés css, mais j'avoue que je suis un peu larguée... je pense que je vais devoir changer complètement la structure de mon bloc pour pouvoir faire ce que je veux...

Réponse rapide de fainéant
Et si tu faisais des blocs horizontaux au lieu de verticaux ?
Un gros div contient tout, puis tu en fais 4 à l'horizontal, qui en contiennent chacun 2 pour tes colonnes.
http://www.dabeuliou.com/arrache.jpg
Tu fixe la largeur pour chaque div, la hauteur de la balise qui contient chaque partie s'agrandissant automatiquement.
Pour les balises qui contiennent les 2 blocs tu colles un clear: both pour qu'elles soient repoussées dessous.

Ca vaut ce que ça vaut

Re,

Ou alors un height fixe moyen avec une barre de scroll vertical, c'est pas top mais ...

bonjour,

@brucefeuillette , entre
destructuré le html
(titre , texte et images,lien separé , non rgroupés dans le flux ) et
faire un tableau

....... , autant garder le tableau a mon avis .

... En fait je vois pas comment il ne peut pas obtenir ce resultat dans un tableau .

Par ailleurs div n'est pas egal a table , et le : class="colonne" est assez revelateur de la façon de voir le code html , usage de balise pour la mise en forme et non pas de son contenu.
A prioiri .colonne ou .contenu , ne sert a rien , garder l'un ou l'autre , et les div.textes pourrait-etre des balise hn et p .

Pour obtenir un comportement equivalent a l'affichage sans tableau , et en gardant chaque "block" d'information" distinct de l'autre dans le html , n'est a mon avis pas possible.

en usant du position absolute et d'un padding ou margin on peut simuler quelque chose d'aproximatif , et qui n'est surtout trop rigide pour etre utilisable.
(reprise et modif d'un exemple):

<!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>Et dire qu'un tableau c'est tout bête a faire</title>
<style type='text/css'>
body {background:#b00d10;
padding:0.5em;
border:2px solid #fada01;
}
html {
background:#baf00e;
}
#conteneur {
width:500px;
position:relative;
border:2px solid;
border-top:2px solid;
border-bottom:2px solid;
background:#def;
margin:auto;

}
.contenu {
display:table-cell;
_display:inline;
zoom:1;
padding:2em 0 0.5em;
width:250px;
_width:248px;
vertical-align:bottom;
background:#def;
border:2px solid;
border-top:0;
border-bottom:0;
margin:0 -1px 0}
.image {
display:block;
height:200px;
width:240px;
background:#badc0d;
border:2px solid #fada01;
margin: 0 auto 6em;
}
a {
display:block;
text-align:center;
background:#abc;
}
h2.texte {
position:absolute;
border-right:2px solid;
padding-top:1px;
width:240px;
_width:242px;
background:#abc;
top:0;
margin:0;
}
.texte {
padding:0 3px;

}
.xt {
position:absolute;
margin-top:0em;
_margin-top:-6em;
width:242px;
}
h1 , p.op {
color:#abc;
text-align:center;
background:#642;}
</style>
</head>
<body>

<h1>Attention , ce n'est pas un tableau !</h1>
<p class="op">Se mefier de l'aspect, ce n'est pas gerable !</p>
<div id="conteneur">
	<div class="contenu">
		<h2 class="texte">TITRE 1</h2>
		<p class="texte">SOUS TITRE 1 et blabla bal bla bla bla</p>
		<img class="image" src="img1.jpg" alt="image 1" />
		<p class="texte xt">TEXTE 1</p>
		<a href="lien.html">lien 1</a>

	</div>
	<div class="contenu">
		<h2 class="texte">TITRE 2</h2>
		<p class="texte">SOUS TITRE 2</p>
		<img class="image" src="img2.jpg" alt="image 2" />
		<p class="texte xt">TEXTE 2 a <br />
		TEXTE 2 b <br />
		TEXTE 2 c </p>
	<a href="lien.html">lien 1</a>
	</div>
</div>

<p class="op">Si ce n'est pas gerable , un tableau bien conçu le serais en revanche</p>
</body>
</html>

Enfin pour moi , ou c'est une mise en page fluide avec le display:table-cell et inline-block pour IE et le defaut de non alignement des zones de contenu "equivalente" ou le tableau !

++

bonjour,

2 post et puis parti , On imagine qu'il a gardé son tableau et n'ose pas le dire .
Pourtant , cela semble bien la meilleur façon de faire .

encore un sujet delaissé par son Auteur et qui ne risque pas d'etre [ resolu]

++