28173 sujets

CSS et mise en forme, CSS3

[Résolu] 2 soucis de mise en page tchat

Bonjour,
en un premier temps, voici la page problématique: http://atelierblog.free.fr/chat.php

1° Le soucis est que lorsque le message soumis est "long", le texte ne ce met pas a la ligne et sort du conteneur.

2° Lorsque je vais a la ligne (touche entrée) dans mon textarea, cette mise a la ligne n'est pas effectif dans mon message afficher.

Voici mon code css:

#minichat_formulaire{
 border:1px dashed #ddd;
background-color:#efefef;
width:900px;
height:700px;
}
 
 
 #minichat_dialogues{
 padding-left:10px;
 float:left;
 width:700px;
 height:700px;
 }
 
 #minichat_form{
 border-left:1px dashed #ddd;
 float:right;
 height:100%;
 width:170px;
 background-color:#eee;
 }
 #minichat_pseudo{
 padding-left:10px;
 padding-bottom:10px;
 }
 #minichat_pseudo-texte{
 text-align:center;
 font-family:Arial;
 font-size:0.8em;
 color:#000;
 }
  #minichat_message{
 padding-left:10px;
 padding-bottom:10px;
 }
 #minichat_message-texte{
 text-align:center;
 font-family:Arial;
 font-size:0.8em;
 color:#000;
 }
 #minichat_pseudochamp input{
width:120px;
margin-left:15px;
 }
  #minichat_messagechamp input{
width:120px;
height:100px;
margin-left:15px;
 }
   #minichat_sendchamp input{
margin-left:35px;
 }
#minichat_dialpseudo{
float:left;
border:1px solid green;
width:120px;
height:80px;
}
#minichat_dialmess{
float:left;
border:1px solid blue;
width:550px;
height:80px;
}


et la page php :

<!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" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-15" />
	  <link rel="stylesheet" type="text/css" href="style.css"
	  media="screen" />
</head>
<body>

<div id="minichat_formulaire">

 <?php
	
	
if (isset($_POST['pseudo']) AND isset($_POST['message']))  // Si la variable existe
{
if ($_POST['pseudo'] != NULL AND $_POST['message'] !=NULL) //Si les champ pseudo et message sont différent de NULL
{

mysql_connect ('localhost', 'root', ''); //On ce connect a la base de donnée
mysql_select_db ('zero');

$message = mysql_real_escape_string(htmlspecialchars($_POST['message'])); //Pour la sécurité
$pseudo = mysql_real_escape_string(htmlspecialchars($_POST['pseudo'])); //Pour la sécurité
	
mysql_query ("INSERT INTO minichat VALUES ('', '$pseudo', '$message')"); //On insert la valeur de la variable pseudo et message dans la bdd


mysql_close (); //on ce deconnect de la bdd	

}
}	
	?>
	
	<div id="minichat_form">
	
	
	
	
<form action="chat.php" method="post">

<p>

    <div id="minichat_pseudo">
        <div id="minichat_pseudo-texte">
Pseudo 
        </div><!--pseudo texte-->

        <div id="minichat_pseudochamp">
 <input type="text" name="pseudo" value="<?php echo $_POST['pseudo']; ?>"/>
    </div><!--pseudo champ-->
        </div><!--pseudo-->

		
		
        <div id="minichat_message">
    <div id="minichat_message-texte">
 Message 
    </div><!--messagetexte-->
        <div id="minichat_messagechamp">
 <textarea name="message" cols="16" rows="5"></textarea>
        </div><!--message champ-->
  
        </div><!--message-->  
  
        <div id="minichat_sendchamp"> 
 <input type="submit" value="Envoyer" />
        </div><!--send champ-->
</p>

</form>
   
   </div> <!-- form -->
   
 <div id="minichat_dialogues">  
   		<?php

mysql_connect ('localhost', 'root', '');
mysql_select_db ('zero');

$reponse = mysql_query("SELECT * FROM minichat ORDER BY id DESC LIMIT 0, 8");

mysql_close();

while ($donnees = mysql_fetch_array($reponse) )
{

?>
<p><div id="minichat_dialpseudo"><strong><?php echo $donnees['pseudo']; ?></strong> :</div><!--minichat_dialpseudo--> 
<div id="minichat_dialmess"><?php echo $donnees['message']; ?></div><!--minichat_dialmess--></p>
 
<?php
}
?>
</div><!--minichat_dialogues-->

</div><!--minichat_formulaire-->


</body>
</html>


Merci d'avance
Modifié par Romaric (27 Aug 2007 - 00:50)
Bonjour,

Pour le 1°, tu devrais faire des tests avec des lorem ipsum ou des mots réalistes, parce qu'un "mot" (2222...etc...) de tant de "lettres" comme tu l'as fait pour ton test ne peut être renvoyé à la ligne.

J'ai juste jeté un oeil, pas sûr d'avoir bien saisi la question, désolé si je suis à côté,
Merci, bah a priori s'etait bien ça le problème, par contre je n'avais jamais remarquer qu'une suite de chiffres sans espace fesais buger les affichages :s
Sujet clos
Aller à