28173 sujets

CSS et mise en forme, CSS3

Positionnement des div

Bonjour,
Toujours dans la quête d'un css propre, je cherche a faire la chose suviante
En gros, je souhaite afficher une liste d'éléments les uns au dessous des autres.
Chaque élément contient sur sa partie gauche une image, et sur la partie droite, un texte descriptif.

A l'heure actuelle, j'ai fait le code suivant:


		<div id="result_element">
			<div id="image_resultat">'
				<img src="...">
			</div>
		
	               <div id="content_resultat">
	
			description longue
		        </div>
		<div style="clear:both;"></div>
		</div>


Avec le css suivant;


div#result_element{
	margin-top:20px;
	border:dashed 1px;
	border-color:#f2e7d8;;
	width:545px;
	
}
div#image_resultat{
	width:90px;
	float:left;
	text-align:center;
	margin-top:5px;
	
}
div#content_resultat{
	float:left;
	vertical-align:top;
	margin-top:5px;
	line-height:25px;
	width:440px;
}


Hors, dans mon affichage, mon premier élément prend une hauteur démesurée mais les autres éléments s'affichent correctement. J'avoue ne pas vraiment comprendre.

Si vous aviez une idée.

Merci d'avance.
Modifié par InsaneBrain (20 Jun 2007 - 15:44)
si je place un position:absolute dans les attributs de la div result_element, les éléments ont bien la bonne disposition, par contre, ils sont tous superposés les uns sur les autres.
Comment pourrais je alors les faire apparaitre les uns sous les autres sachant que comme ma liste est crée dynamiquement, je ne peux pas spécifier de position fixé en hauteur?
Je continue mes test, et je constate qu'en enlevant la div qui fait le clear:both dans la div result_element, mon affichage est correct à l'exception que mes bordures de div dashed n'entourent plus la div result_element.

Des que j'avance d'un coté, je recule de l'autre on dirait ^^
Bonjour,

Une petite liste pour faire simple
  <style type="text/css">
ul{
	margin-top:20px;
	border:dashed 1px;	
	width:545px;
	list-style-type: none;
}

 li{
	margin-top:5px;
}

.image_resultat{
	width:90px;
}

.content_resultat{
	line-height:25px;
	vertical-align: top;
}

</style>
</head>
<body>
		<ul id="result_element">
			<li >
				<img src="image.jpg" class="image_resultat"><span class="content_resultat">description longue</span>
			</li>
			<li >
				<img src="image.jpg" class="image_resultat"><span class="content_resultat">description longue</span>
			</li>			
			<li >
				<img src="image.jpg" class="image_resultat"><span class="content_resultat">description longue</span>
			</li>			
		</ul>
</body>
Sujet clos
Aller à