28220 sujets

CSS et mise en forme, CSS3

[Résolu] Probleme de hauteur de <p>

Bonjour à tous,
J'ai un petit soucis avec ma mise en page.
Voici en gros le code de ma page :


<p class="paragraphe">
<span class="span">
Contenu 1
</span>
Contenu 2
</p>



Dans ma feuille de style :

.paragraphe{
border:1px solid black;
}
.span{
display:block;
float:left;
}


Et donc mon probleme évidement c'est que quand contenu 1 est plus important que contenu 2, et bien un bout est à l'extérieur de la bordure...

Merci à tous ceux qui voudront bien se pencher sur ma question !
Modifié par p.florent (20 Aug 2005 - 00:29)
Ello,

il faut rajouter un 'clear:both' en fin de paragraphe.

par exemple :

 <hr style="clear:both; display:none" />


après Contenu 2
Modifié par AlphaYoDa (19 Aug 2005 - 20:10)
Administrateur
AlphaYoDa a écrit :

par exemple :

 <hr style="clear:both; display:none" />

Attention : avec un display none, l'élément ne sera pas du tout pris en compte Smiley ohwell

a écrit :
<span class="span">
Est-ce bien logique ? Smiley sweatdrop
Que signifie ta classe "span" ? Pourquoi rajouter un nom de classe à une balise déjà existante ? Et surtout pourquoi lui donner un nom de classe qui n'a aucun rapport avec sa fonction ?
Raphael a écrit :

Attention : avec un display none, l'élément ne sera pas du tout pris en compte Smiley ohwell



euh.. ouais.. non mais ... il y a du bordel dans ma tête.

p.florent : tu peux poster le code html complet qui pose problème, ou un lien ? J'ai reproduit chez moi mais je ne vois pas trop où est le problème
Modifié par AlphaYoDa (19 Aug 2005 - 20:29)
Bah parce que c'est ce que j'ai pris dans l'exemple mais dans mon cas elle s'apelle "reponse" Smiley cligne


EDIT :
Le probleme c'est que je bosse en local, et que ya pas mal de php dans ma page (c'est un forum) donc je peux pas trop te montrer...
Modifié par p.florent (19 Aug 2005 - 20:29)
Tu as déjà un premier résultat en ajoutant "overflow:auto;" à .paragraphe

.paragraphe{
overflow:auto;
border:1px solid black;
}


<p class="reponse">
<span class="titre_reponse">Message posté le 19/08/2005 - 19:33:01</span>
<br/>
<span class="fiche_membre">
<a href="?membre=Florent">Florent</a>
<br/><br/><img src="/membres/avatars/1" alt=""/>
<br/><br/>
<b>Touriste</b><br/>
Inscrit le 19/08/2005<br/>
1 Messages envoyés<br/>
<br/>
<b>Né le </b><br/>
28/10/1987<br/>
<b>Sexe :</b><br/>
Homme<br/>
<b>Lieu :</b><br/>
A l'ouest<br/>
<b>Loisirs :</b><br/>php<br/></span>

		Salut tout le monde !<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
!!<br/><br/>________________________________________<br/>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</p>


et le css :




.reponse{
	border-top:1px solid #0C6700;
	border-left:1px solid #0C6700;
	border-right:3px solid #0C6700;
	border-bottom:3px solid #0C6700;
	padding:4px;
	background:#FAF8FD;
	}

.titre_reponse{
	display:block;
	background:#E8D3FF;
	height:15px;
	font-weight:bold;
	}

.fiche_membre{
	display:block;
	float:left;
	margin-right:4px;
	padding-right:4px;
	border-right:2px dashed #E8D3FF;
	margin-bottom:10px;
	
	}
	

<div class="reponse">
<span class="titre_reponse">Message posté le 19/08/2005 - 19:33:01</span>
<br/>
<span class="fiche_membre">
<a href="?membre=Florent">Florent</a>
<br/><br/><img src="/membres/avatars/1" alt=""/>
<br/><br/>
<b>Touriste</b><br/>
Inscrit le 19/08/2005<br/>
1 Messages envoyés<br/>
<br/>
<b>Né le </b><br/>
28/10/1987<br/>
<b>Sexe :</b><br/>
Homme<br/>
<b>Lieu :</b><br/>
A l'ouest<br/>
<b>Loisirs :</b><br/>php<br/></span>

Salut tout le monde !<br />
a bla bla bla bla bla bla bla bla bla bla bla bla <br />
!!<br/><br/>________________________________________<br/>
bla bla bla bla bla bla bla
<hr style="clear:both; visibility:hidden;" /></div>



j'ai remplacé <p class=reponse> par <div..>
et ajouté un <hr /> en bas pour forcer la hauteur.
tu peux envisager de faire ça avec un div aussi par exemple.

ps: pour mettre en évidence (gras), je crois que les <strong> sont mieux que <b>.
Modifié par AlphaYoDa (19 Aug 2005 - 21:02)
je vais essayé tout ça...
intéréssant pour b et strong !! Mais en quoi c'est mieux ? c'est plus long à taper aussi Smiley langue
Sujet clos
Aller à