28220 sujets

CSS et mise en forme, CSS3

[résolu]Passage à la ligne auto pour texte

salut à tous Smiley smile

j'ai un soucis avec une div.
j'aimerai que mon texte passe tout seul à la ligne au lieu de sortir ou d'agrandire la largeur de celle-ci.

c'est important que la div ne s'agrandisse pas en largeur!
(c'est pour pouvoir permettre au mal voyant d'agrandire manuellement la taille des police du texte sans que cela ne deforme mon site Smiley cligne )

voila le code de ma div et son css:
<div id="contenu">
<p id="texte">
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<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
</p>
</div>

#contenu {
background-color: #daa232;
float:left;
width: 575px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 0px;
text-align: center;
}
#texte {
color: blue;
}


j'ai deja essayer pas mal de truc mais je trouve pas
pour l'instant seul un overflow: auto est ma solution Smiley decu

si vous vouler plus d'info sur le reste de ma page, je vous mais le code aussi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>une div en pousse une autre</title>
<style type="text/css">

body {
background-color : #bbb;
color : black;
margin-top : 20px;
margin-bottom : 20px;
}
#header {
background-color: blue;
width : 775px ;
height: 100px ;
margin-left: auto; margin-right: auto;
text-align: center;
}
#menus {
width : 180px;
float: left;
}
#menu1 {
background-color: green;
height: 300px;
}
#menu2 {
background-color: #FFFF00;
height: 200px;
}
#main {
background-color: white;
margin-right: auto; margin-left: auto;
width : 775px ;
min-height: 500px;
}
#footer {
background-color: blue;
width : 775px ;
height: 30px ;
margin-left: auto; margin-right: auto;
text-align: center;
}
#menu3 {
background-color: black;
float: left;
width: 595px;
height: 30px;
}
#titre {
background-color: silver;
float: left;
width: 470px;
height: 30px;
text-align: center;
}
#fonction {
background-color: navy;
float: left;
height: 30px;
width: 120px;
}
#go_top {
background-color: navy;
clear: both;
margin-left: 755px;
bottom: 0px;
height: 18px;
width: 20px;
}
#top {
border: 0px;
width: 20px;
height: 18px;
}
#contenu {
background-color: #daa232;
float:left;
width: 575px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 0px;
text-align: center;
}
#texte {
color: blue;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="main">
<div id="menus">
<div id="menu1">
</div>
<div id="menu2">
</div>
</div>
<div id="menu3">
<div id="titre"></div>
<div id="fonction"></div>
</div>
<!-- ici le contenu -->
<div id="contenu">
<p id="texte">
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<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
</p>
</div>
<div id="go_top"></div>

</div>
<div id="footer"></div>
</body>
</html>


je recherche juste à faire en sorte que la largeur de ma div de contenu soit fixe et que le texte passe automatiquement à la ligne quand il est trop long pour cette largeur

merci d'avance Smiley cligne
Modifié par beroots (29 Oct 2005 - 15:06)
suprime les <br> et structure ton document avec des balise <p></p>...

oupss , pardon j'avais pas vu, tu as bien utilisé la balise <p></p>
Modifié par ilo (27 Oct 2005 - 23:38)
Sujet clos
Aller à