8800 sujets

Développement web côté serveur, CMS

[Résolu] Fixer le nombre de div par ligne

Bonjour,

J'ai réalisé une requête sql pour récupérer tous les clubs sportifs, et qui sont situés dans les div. Le résultat s'affiche les uns derrières les autres, comment fixer par exemple, 3 div par ligne. Voici la structure : 


?><div class="titre_menu">LISTE DES EQUIPES</div><p>
<?php

	$query="SELECT* FROM equipe where eq_lfrs=1";
	$result = mysql_query($query);
	while($ligne=mysql_fetch_array($result))
		{
			$nom_equipe=$ligne['nom_equipe'];
			$image=$ligne['logo'];
			$id_equipe=$ligne['id_equipe'];

			?>
                       <div id="equipe_fiche">

				<div id="degrade_eq"></div>
				<div id="equipe_logo"><?php

				echo "<a href=fiche_equipe.php?voir=$id_equipe style=text-decoration:none;>";
				echo "<B>$nom_equipe</B>";
				echo "<br>";
				echo '<img src="'.$image.'" border=0 width=40px>';
				echo "</a>";
				
			?>
                       </div>

			</div>
		}



Merci d'avance
Modifié par Cecilia (05 Apr 2009 - 21:22)
Salut,

j'ai déplacé ton sujet car il ne concerne pas xhtml. Smiley cligne

D'ailleurs il aurait plus sa place dans le salon css puisqu'il ne s'agit que d'une question de présentation mais comme il est truffé de PHP je l'ai mis ici (pour une question qui n'est pas directement liée à PHP tu auras bien plus de chances d'avoir des réponses en présentant de préférence le code html généré).

En l'occurrence et puisqu'à priori chaque DIV semble avoir les mêmes dimensions, le plus simple me semble être d'utiliser la propriét float (cf. le Guide de survie du positionnement CSS).

Plus précisément j'aurais utilisé une liste. 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
ul {
	overflow: hidden;
	width: 500px;
	margin: 0; 
	padding: 10px 10px 10px 20px;
	list-style: none;
	background: blue;
}
ul li {
	float: left;
	width: 150px; 
	height: 60px;
	margin: 10px 10px 10px 0;
	border: 1px solid black;
	background: yellow;
}
	
</style>
</head>
<body>
<ul>
	<li>
		<div>
			<p>bla bla</p>
		</div>
	</li>
	<li>
		<div>
			<p>bla bla</p>
		</div>
	</li>
	<li>
		<div>
			<p>bla bla</p>
		</div>
	</li>
	<li>
		<div>
			<p>bla bla</p>
		</div>
	</li>
</ul>
</body>
</html>

Modifié par Heyoan (05 Apr 2009 - 19:06)
Sujet clos
Aller à