[résolu] Deux paragraphes qui se chevauchent suit à un height

Bonsoir,

Et oui, je suis souvent sur le forum, mais bon je débute en programmation, alors...

J'ai un soucis d'affichage que voici en image :


ON peut voir que les deux paragraphes se chevauchent.

En fait j'ai donné un height de 35px à chaque paragraphe pour pouvoir voir l'image de fond en totalité (taille 32px)

Si je rajoute un line-height, l'effet est pire encore !

Alors comment résoudre se problème ?

Voici le css correspondant aux deux paragraphe :

.erreur, .ok, .alert {
font-size : 15px;
height : 35px;
padding-left : 35px;
font-weight : bold;
}


.ok {
background : url('../../../images/front_office_design/blocs_droits/valid.png');
background-repeat : no-repeat;
color : #009900;

}

.alert {

background : url('../../../images/front_office_design/blocs_droits/messagebox_warning.gif');
background-repeat : no-repeat;
color : #ff6600;
}

Merci pour votre aide que je sollicite beaucoup ces derniers jours.
Modifié par sylvainbucule (23 Aug 2007 - 19:07)

Salut,

Tu devrais peut être :

.erreur {
font-size : 15px;
height : 35px;
padding-left : 35px;
font-weight : bold;
}
.ok {
background:url('../../../images/front_office_design/blocs_droits/valid.png');
background-repeat : no-repeat;
color : #009900;
}
.alert {
background:url('../../../images/front_office_design/blocs_droits/messagebox_warning.gif');
background-repeat : no-repeat;
color : #ff6600;
}

avec en html class="erreur ok" et "erreur alert".

Note que sur .ok, tu as mis urrl au lieu de url.

en faisant cela , j'ai l'erreur qui n'a plus la même mise en forme que la classe ok et alert, ce que je ne veux pas.

De plus, avec ta proposition, si j'ai un message qui utilise la classe ok ou alert et qu'il tient sur une seule ligne, je n'aurais pas l'image de fond entière :

ex :


J'ai essayé avec un margin, mais cela ne change rien.
Modifié par sylvainbucule (23 Aug 2007 - 11:36)

bonjour,

Pour l'image , il faut aussi la positionné avec par exemple :

background-position:center left;

de façon a l'afficher centré horizontalement dans le conteneur.

Pour ce qui est de dimensionné le paragraphe et conserver la possibilité d'afficher 1 ou plusieurs ligne de texte , tu peut simplement estimer une hauteur minimale en te servant des paddings (Attention ,mode standard pour IE ! + eventuellement un height:1%; toujours pour IE si le layout fait defaut):

padding:8px 0 7px 35px; 

8 + 7 + 15 (taille police ) = 35px. Ce qui semble suffissant pour afficher l'image complete.

a priori ton html serait : ?

<p class="erreur ok">texte ok</p>
<p class="erreur alert">texte erreur</p>

Si ta page embarque un doctype valide et qu'aucune autre regle css interfere avec celle-ci (attention au !important sur d'autre paragraphes de la page par exemple) , je ne vois pas de raison pour que cela ne fonctionne pas .

GC

Super, cela fonctionne, bien vu !
Merci