28173 sujets

CSS et mise en forme, CSS3

Pas de retour ligne dans un float

Bonjour,

Dans une page mise en forme par CSS du type header, menu-left, "frame", footer, je cherche à intégrer deux colonnes dans la "frame"
Pour se faire :
CSS :
.float {
float: left;
width: 49%;
margin: 0.5%;
}
HTML
<div class="float">......</div>

Problème : pas de retour ligne dans le float les textes débordent.

Merci par avance pour toute aide.

Cordialement
Hello,

a écrit :
Problème : pas de retour ligne dans le float les textes débordent.


Montre voir un peu le texte que tu essaie de lui mettre dedans ?

Et, pour éviter des soucis sous IE6, rajoute un display:inline a ta déclaration.
Voici le modèle de code utilisé


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="float: left; width: 30%; height: 100px; margin: 2%; background-color:#F5C552"> 
  <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div style="float: left; width: 30%; height: 100px; margin: 2%; background-color:#F5C552"> 
  <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>
</div>
<div style="clear: both"> </div>
</body>
</html>
Modérateur
bonjour,

Ceci est normal Smiley smile .

Pour empecher les debordement:
overflow:hidden;

Pour scroller sur les debordement:
overflow:auto;


et pour casser les mots dans IE:
word-break:break-all;


ce qui donne ta page test comme ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="float: left; width: 30%; height: 100px; margin: 2%; background-color:#F5C552;overflow:hidden;word-break:break-all;"> 
  <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div style="float: left; width: 30%; height: 100px; margin: 2%; background-color:#F5C552;overflow:auto;word-break:break-all;"> 
  <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>
</div>
<div style="clear: both"> </div>
</body>
</html>


Ensuite , tu peut prevoir de t'aider d'un script js ou serveur pour casser les chaines trop longues , ou d'inserer automatiquement une balise tout les x caracteres .

Une balise : <wbr> , peut jouer cet effet . Elle provoque un retour a la ligne si besoin , sinon rien. (en principe)
Pour opera , elle peut-etre surchargé d'un after pour jouer son role:
wbr:after { content: "\00200B" }


En cherchant j'ai trouvé ceci : http://www.quirksmode.org/oddsandends/wbr.html qui en parle et qui propose quelques soluces.

En final , pas de soluction miracles Smiley smile

GC
Et surtout, comme je m'y attendais, tu testes avec des mots qui n'existent pas, des suites de 70 lettres...

Teste avec du vrai faux texte, un beau Lorem Ipsum, ça ira beaucoup mieux.
Merci à gcyrillus mais le problème est résolu sur IE7, il subsiste sur FIREFOX.

Ce que je ne comprends pas c'est que les exemples donnés sur Alsacreations et OpenWeb donnent des affichages sans défaut et je n'ai fait que reprendre les CSS et HTML de ces exemples !
Problème résolu

Le retour ligne se fait par les espaces entre les mots.

Merci à JokoZetla
Sujet clos
Aller à