28220 sujets

CSS et mise en forme, CSS3

Slt,
voila j'ai fait un petit script php pour afficher les 5 dernier membre homme et les 5 dernier membre femme de mon site les titres sont sous forme de claque avec ce code CSS :


.sous_titre {
  width:99%;
  border-bottom:dashed 2px #2393D3;
  color:#2393D3;
  font:120% Helvetica,Arial,sans-serif;
  text-align: right;
}


et les foto sont dans des paragraphe (<p> </p>) avec comme simple code CSS float:left;
mais le problème est lorsque les images prenent pas toute la longueur de la derniere ligne le sous titre qui doit ce trouver en-dessous ce met à la suite de la dernière image, comment faire pour qu'il ce mette en-dessous ?

Merci d'avance pour votre aide.
sympa la présentation sous forme de "claque" Smiley langue

non mais franchement, travaille sur le float et les dimensions.
Merci de vôtre réponse, mais le problème c'est que ça fait 2h que je suis dessus et je n'y arrive pas.
voici le code php avec les <p> et <div> :


	echo '<p style="float:left;">'.$foto.'
				<a href="?p=profil&id='.$d_homme['id'].'" class="link_acc_profil">'.$d_homme['pseudo'].'</a><br />
						'.$age.' ans<br />
						'.$d_homme['ville'].'</p>';


C'est dans une boucle qui ce repète 5 fois.
Le code du <div> pour le calque du sous-titre :


echo '<div class="sous_titre">Les 5 dernières femmes inscrites</div>';



Merci de bien vouloir m'éguiller.
hum, déjà pour le sous-titre utilise <h2>

Ensuite, utilise les floats en liaison avec :
<dl>
  <dt><a href="..."><img src="laphoto.jpg" alt="" /></a></dt>
  <dd>la description</dd>
</dl>

et lié avec un css du style :
dt { float: left; width: ...px; height: ...px; }
dd { float: left; width: ...px; height: ...px; }

avec evidemment la même hauteur pour chaque.

Pour DL, met un largeur qui fait qu'on puisse englober 3 ou 5 duos dt/dd par ligne.
Merci je vais essayer de faire avec ça mais ce que je ne comprend pas c'est pourquoi :

<div class="profil_acc">

   <p style="float:left;"><img src="le chemin/l'image.jpg" class="float:left;" /><a href="?p=profil&id=id" class="link_acc_profil">le pseudo/a><br />âge ans<br />ville</p>

   <p style="float:left;"><img src="le chemin/l'image.jpg" class="float:left;" /><a href="?p=profil&id=id" class="link_acc_profil">le pseudo/a><br />âge ans<br />ville</p>

   <p style="float:left;"><img src="le chemin/l'image.jpg" class="float:left;" /><a href="?p=profil&id=id" class="link_acc_profil">le pseudo/a><br />âge ans<br />ville</p>

   <p style="float:left;"><img src="le chemin/l'image.jpg" class="float:left;" /><a href="?p=profil&id=id" class="link_acc_profil">le pseudo/a><br />âge ans<br />ville</p>

   <p style="float:left;"><img src="le chemin/l'image.jpg" class="float:left;" /><a href="?p=profil&id=id" class="link_acc_profil">le pseudo/a><br />âge ans<br />ville</p>

</div>

<div class="sous_titre">Les 5 dernières femmes inscrites</div>


ça ne m'affiche pas :

img1 commentaire1 img2 commentaire2 img3 commentaire3
img4 commentaire4 img5 commentaire5

Les 5 dernières femmes inscrites.

Merci d'avance pour vôtre et merci pour vôtre bout de code que je vais tester.
désolé j'ai oublié la class profil_acc.

.profil_acc {
  width:99%;
  color:#000000;
  border:dashed 0px #2393D3;
  font:100% Helvetica,Arial,sans-serif;
}
bon j'ai un petit peu avancé voila ce que j'obtien :
upload/1312-Sanstitre.JPG
ce pendant je n'arrive pas à supprimer l'espace au-dessus de l'image 4.
Bonne fin de soirée à tous.
Merci encore.
je refait pour voir ça à planter à l'upload.
upload/1312-Sanstitre1.JPG .
j'espère que ça à marcher.
Merci encore et bonne fin de soirée