28173 sujets

CSS et mise en forme, CSS3

Problème de paragraphe

Salut à tous,

A force de me battre des heures avec les css pour comprendre les différences entre ie et firefox, j'ai fini par acheter le très bon livre de Raphael Goetter "CSS2 pratique du design web" que je vous recommande fortement. Cela permet de gagner beaucoup de temps et évite beaucoup de stress.

J'ai cependant un petit souci que je n'arrive pas à résoudre même avec le bouquin.

Losque j'écris dans une balise p le mot paragraphe avec un widh de 50px, firefox me crée bien une boite de 50px mais le mot paragraphe sort de la boite p. Sous ie le mot paragraphe est bien dans la boite mais ce petit farceur m'agrandit la boite pour faire entrer le mot paragraphe.

Enfin si je coupe le mot paragraphe en 2 mots para graphe tout rentre dans l'ordre et j'ai le même affichage sous ie et firefox.

Y a t-il une astuce pour que le mot paragraphe rentre dans ma boite p de 50px sous firefox/ie et se voit de la même façon sous ie/firefox ? (sous firefox le mot ne sort pas de la boite de 50px -il est coupé automatiquement- et sous ie la boite n'est pas agrandie pour faire entrer le mot).

La DOCTYPE reste en XHTML 1.0 Strict.

Merci de votre réponse.

Sylvain.


<!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">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

<style type="text/css">
/*<![CDATA[*/
<!--

	.div1
	{
	 width:300px;
	 padding-top:2em;
	 /*padding-right:20px;*/
	 border : 2px solid red;
	 background : yellow;
	}
	.div1 p
	{
	 width : 50px;
	 margin-left :3em;
	 margin-top:0px;
	 margin-bottom:0px;
	 /*margin-right : 20px;*/
	 background : green;
	}
	.div2
	{
	 width:300px;
	 border : 2px solid red;
	}
	
	
	-->
/*]]>*/
	</style>
	<title>
      Page title
    </title>
	</head>
	<body>
	<div class="div1"><p>paragraphe de contenu paragraphe de contenu paragraphe de contenu</p></div>
	<div class="div2"><p>paragraphe de contenu paragraphe de contenu paragraphe de contenu</p></div>
	<br />
	<div class="div1"><p>para graphe de contenu para graphe de contenu para graphe de contenu</p></div>
	</body>
</html>
Salut sylvainmart Smiley cligne ,

en ce qui concerne IE6, il s'agit d'un "bug" qui fait que le conteneur s'adapte à la taille du texte (corrigé avec IE7 il me semble).

Pour ce qui est de couper un mot automatiquement cela n'existe pas sans utiliser PHP ou Javascript (à ma connaissance Smiley murf ).

Et pour avoir le même rendu IE/FF/... il faut spécifier comment est traité "ce qui déborde" du conteneur à l'aide de overflow (avec par exemple la valeur hidden ou auto).

A+
Merci beaucoup Heyoan,

Pour IE7, le bug n'est toujours pas corrigé.

La propriété overflow est en effet la réponse, avec auto cela me rajoute des ascenceurs.

J'aurais préféré que le mot soit coupé automatiquement avec les css mais puisque ça n'est pas possible tant pis.

Voici le code :

.div1 p
	{
	 width : 50px;
	 margin-left :3em;
	 margin-top:0px;
	 margin-bottom:0px;
	 /*margin-right : 20px;*/
	 background : green;
	 overflow : auto;
	}
Sujet clos
Aller à