[Résolu] Texte dépassant un bloc paragraphe

Bonjour,

Sur mon site web, je fais afficher des informations concernant un jeu.
Voici une petite image pour vous montrer de quoi ca a l'air



Je sépare les informations par des lignes visible, qui sont en fait le contour du paragraph.
Or, lorsque l'information est trop longue, elle s'étend sur plusieurs lignes et sort du paragraph, donc la ligne visible de séparation se retrouve cacher derrière l'information.

<p class='lesInfoJeux'>
  <label class='infoJeux'>Jeux : </label>
  <span class='infoJeux'><a class='infosJeuxEvent'>Nom du jeu</a></span>
</p>
<p class='lesInfoJeux'>
  <label class='infoJeux'>Serveur : </label>
  <span class='infoJeux'><a class='infosJeuxEvent'>Nom du serveur</a></span>
</p>
....

et le .css que j'utilise

p.lesInfoJeux 
{ width:80%; padding:0.3em 0em 0.3em 0em;  border-bottom:1px solid silver; margin:0em 0em 0em 1.5em; clear:both;}
label.infoJeux { 	width: 18%;	}
span.infoJeux { display: block;	width: 60%;	float: right; color:#000000;}

si vous avez une idée pourquoi l'information sort du bloc de paragraphe (surement a cause du float du span) ou si vous savez comment faire pour avoir un affichage du genre, je vous en remerci d'avance
Modifié par Sylvain245 (21 Nov 2010 - 11:39)

Bonjour,

C'est le float qui déborde de ton paragraphe.

Ce qu'il faut c'est indiquer une gestion du débordement sur ton paragraphe.

Donc :

p.lesInfoJeux{  overflow: auto ; }

ou un

p.lesInfoJeux{  overflow: hidden ; }

Il me semble que pour les vieilles versions d'explhorreur, il faut ajouter une info en plus (pour le HasLayout) :

p.lesInfoJeux{  overflow: auto ; zoom: 1 ; }

ou

p.lesInfoJeux{  overflow: hidden ; zoom: 1 ; }

Sinon, il me semble que les labels ne sont que pour les formulaires, tu ne devrais pas les utiliser de cette manière.
Modifié par Borak (21 Nov 2010 - 11:08)

Merci bien

Oui en effet le overflow:hidden; fait le travail, le :auto lui fait apparaitre des barre de défilement parfois (donc assez moche).