Partage

Problème design Chat

Sujet résolu

9 décembre 2005 à 17:41:46

Bonjour a tous!!

J'ai mis ce topic dans cette section, car même si l'on parle de mon ''chat'' ; j'ai besoin de vos connaissances en CSS!!!
Mon code est le même que celui de Mateo dans son TP de la partie PHP.
Mon souhait serait d'entourer tous les messages de mon chat d'une bordure (border) ! J'ai aussi une autre question :comment puis je faire pour réduire l'espace entre les messages? J'ai essayé avec un margin-top et un margin-bottom ; mais cela n'as pas marché.
Merci d'avance!

Tithugues

9 décembre 2005 à 17:51:02

Citation : Darkyky

Bonjour a tous!!
J'ai mis ce topic dans cette section, car même si l'on parle de mon ''chat'' ; j'ai besoin de vos connaissances en CSS!!!
Mon code est le même que celui de Mateo dans son TP de la partie PHP.
Mon souhait serait d'entourer tous les messages de mon chat d'une bordure (border) ! J'ai aussi une autre question :comment puis je faire pour réduire l'espace entre les messages? J'ai essayé avec un margin-top et un margin-bottom ; mais cela n'as pas marché.
Merci d'avance!

Salut,
Tu ne voudrais pas montrer un peu ton code pour voir sur quoi on pourrait agir s'il te plait???

neoxx78

9 décembre 2005 à 17:57:47

Tu manques d'imagination dis moi ...
Pour la bordure il suffit d'appliquer la propriété border à la balise qui contient le message

Exemple :

div#message_chat {
border : 2px solid black
}

Et si les margin ne marche pas pour réduire l'espace entre les messages essaye les padding

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Darkyky

9 décembre 2005 à 18:00:56

Pas de problème!!

<!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>Mini-chat</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
form
{
text-align:center;
}
</style>
<body>

<?php
if (isset($_POST['pseudo']) AND isset($_POST['message'])) // Si les variables existent
{
if ($_POST['pseudo'] != NULL AND $_POST['message'] != NULL) // Si on a quelque chose à enregistrer
{
// D'abord, on se connecte à MySQL
mysql_connect("localhost", "sdz", "mot_de_passe");
mysql_select_db("coursphp");

// On utilise la fonction PHP htmlentities pour éviter d'enregistrer du code HTML dans la table
$message = htmlentities ($_POST['message']);
$pseudo = htmlentities ($_POST['pseudo']);

// Ensuite on enregistre le message
mysql_query("INSERT INTO minichat VALUES('', '$pseudo', '$message')");

// On se déconnecte de MySQL
mysql_close();
}
}

// Que l'on ait enregistré des données ou pas...
// On affiche le formulaire puis les 10 derniers messages

// Tout d'abord le formulaire :
?>

<form action="minichat.php" method="post">

<fieldset>
Pseudo : <input type="text" name="pseudo" /><br />
Message : <input type="text" name="message" /><br />

<input type="submit" value="Envoyer" />
</fieldset>

</form>

<?php

// Maintenant on doit récupérer les 10 dernières entrées de la table
// On se connecte d'abord à MySQL :
mysql_connect("localhost", "sdz", "mot_de_passe");
mysql_select_db("coursphp");

// On utilise la requête suivante pour récupérer les 10 derniers messages :
$reponse = mysql_query("SELECT * FROM minichat ORDER BY ID DESC LIMIT 0,10");

// On se déconnecte de MySQL
mysql_close();

// Puis on fait une boucle pour afficher tous les résultats :
while ($donnees = mysql_fetch_array($reponse) )
{
?>

<p><div class="minichatall"><div class="minichatps"><strong><?php echo $donnees['pseudo']; ?> :</strong></div><div class="minichat"> <?php echo $donnees['message']; ?></div></div></p>

<?php
}
// Fin de la boucle, le script est terminé !
?>

</body>
</html>

Par la même occasion;j'ai visité beaucoup de topics a ce sujet; mais je n'ai pas trouvé comment appliquer la solution (je dois être nul... :-°

) ; quand on actualise la page; comment faire pour que le message n'apparaisse pas deux fois ?
Merci

Edit:J'ai essayé de mettre une bordure a la balise; mais ca me met une bordure a chaque message; et non a l'ensemble comme je le voudrais.

neoxx78

9 décembre 2005 à 18:05:39

Tu as trop de div inutile

D'ailleurs <p> ne peut contenir que des balises "inline" et non "bloc" comme tes div

Voilà quelque chose de plus juste

Tu obitens le meme résulat avec ça ... pas besoin mettre des sélecteurs partout :-°

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Darkyky

9 décembre 2005 à 18:07:12

Euh merci pour la correction mais cela ne resout pas mon problème... :euh:

neoxx78

9 décembre 2005 à 18:11:23

Normal ... il faut que tu adapte ton CSS en fonction ...

Pour mettre une bordure au tout :

.minichat {
border : /* Tu mets la bordure que tu veux */
}

Pour changer le pseudo :

.minichat p strong {
/* Les caractéristiques du pseudo à mettre */
}

Pour changer le message en lui même :

.minichat p {
/* Les caractéristiques du texte */
}

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Darkyky

9 décembre 2005 à 18:18:35

Ce n'est pas un point qu'il faut mettre après un class (dans le CSS) ??

D'accord merci!! Je vais essayer ça....

neoxx78

9 décembre 2005 à 18:20:02

Oui pardon

... je suis habitué à mettre des id avec des div :euh:

je corrige tout de suite

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Darkyky

9 décembre 2005 à 18:27:21

Ah !! Merci tu a résolu mon problème d'espace entre les messages! C'est pas encore collé comme je le voudrais mais c'est deja mieux .

Par contre; la bordure entoure chaque message :colere:

!
Je te donne mon CSS:

.minichat {
font-family:verdana , serif;
font-size:12px;
color:black;
border:2px double black ;

padding-bottom:10px;
padding-top:10px;
background-image:url("adresse");
}

.minichat p {
font-family:verdana , serif;
font-size:12px;
color:black;

}

neoxx78

9 décembre 2005 à 18:40:39

ha tu veux qu'elle entoure tous les message à la fois

je ne t'avais pas compris.

Alors il faut que tu crées un bloc <div> qui englobe tout le chat ... que tu mettras avant tout code PHP

tu n'auras qu'a mettre : <div class="minichat_tout"> ... ton code du minichat ... </div>

Tu peux mettre un id à la place de la classe si tu le souhaites

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Darkyky

9 décembre 2005 à 18:53:58

Je suis désolé; mais j'avais pensé la même chose; je viens de réessayer; mais cela ne marche pas; je ne sais pas pourquoi!

(J'ai fais ce que tu m'as dit).

neoxx78

9 décembre 2005 à 20:56:35

Donne moi tout le code avec lequel tu as fait ton test

(XHTML/PHP et CSS) Normalement il n'y a aucune raison pour que ça ne marche pas

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Darkyky

9 décembre 2005 à 21:27:20

Décidement; c'est toi qui m'aide sur tous mes topics :lol:

!

alors:

<div class="minichat_all">
<?php
if (isset($_POST['pseudo']) AND isset($_POST['message'])) // Si les variables existent
{
if ($_POST['pseudo'] != NULL AND $_POST['message'] != NULL) // Si on a quelque chose à enregistrer
{
// D'abord, on se connecte à MySQL
mysql_connect("localhost", "tu timaginais choper mon pass?", "tu timaginais choper mon pass?");
mysql_select_db("tu timaginais choper mon pass?");

// On utilise la fonction PHP htmlentities pour éviter d'enregistrer du code HTML dans la table
$message = htmlentities ($_POST['message']);
$pseudo = htmlentities ($_POST['pseudo']);

// Ensuite on enregistre le message
mysql_query("INSERT INTO minichat VALUES('', '$pseudo', '$message')");

// On se déconnecte de MySQL
mysql_close();
}
}

// Que l'on ait enregistré des données ou pas...
// On affiche le formulaire puis les 10 derniers messages

// Tout d'abord le formulaire :
?>

<form action="minichat.php" method="post">

<fieldset>
Pseudo : <input type="text" name="pseudo" /><br />
Message : <input type="text" name="message" /><br />

<input type="submit" value="Envoyer" />
</fieldset>

</form>

<?php

// Maintenant on doit récupérer les 10 dernières entrées de la table
// On se connecte d'abord à MySQL :
mysql_connect("localhost", "tu timaginais choper mon pass?", "tu timaginais choper mon pass?");
mysql_select_db("tu timaginais choper mon pass?");

// On utilise la requête suivante pour récupérer les 10 derniers messages :
$reponse = mysql_query("SELECT * FROM minichat ORDER BY ID DESC LIMIT 0,10");

// On se déconnecte de MySQL
mysql_close();

// Puis on fait une boucle pour afficher tous les résultats :
while ($donnees = mysql_fetch_array($reponse) )
{
?>

<div class="minichat"><p><strong><?php echo $donnees['pseudo']; ?> :</strong><?php echo $donnees['message']; ?></p></div>

<?php
}
// Fin de la boucle, le script est terminé !
?>

</div>

SVP: Soyez pas méchant; si j'oublie d'enlever le mdp ; me le piquez pas hein :euh:

.minichat {
font-family:verdana , serif;
font-size:12px;
color:black;
border:2px double black ;

padding-bottom:10px;
padding-top:10px;
background-image:url("http://diablo.free45.free.fr/darkysite/images/sunset_mountain.jpg");
}

.minichat p {
font-family:verdana , serif;
font-size:12px;
color:black;

}
.minichatall {
border:2px double black;
}

neoxx78

9 décembre 2005 à 21:45:18

Je sais pourquoi

tu as oublié un "_" entre minichat et all dans ton CSS

c'est pour ça que ça bug

Sinon enlève la bordure dans le CSS sur .minichat car tu auras une double bordure ... Chaque message sera entouré d'une bordure ainsi que le bloc de tous les messages ... ce n'est pas ce que tu veuc je pense

Vous n'imaginez tous ce que neoxx78 peut faire pour vous

EDIT : ton <div class="minichat_all"> doit etre mis après ton formulaire

sinon ton formulaire sera lui aussi entouré d'une bordure

Voila le code corrigé

<?php
if (isset($_POST['pseudo']) AND isset($_POST['message'])) // Si les variables existent
{
if ($_POST['pseudo'] != NULL AND $_POST['message'] != NULL) // Si on a quelque chose à enregistrer
{
// D'abord, on se connecte à MySQL
mysql_connect("localhost", "tu timaginais choper mon pass?", "tu timaginais choper mon pass?");
mysql_select_db("tu timaginais choper mon pass?");

// On utilise la fonction PHP htmlentities pour éviter d'enregistrer du code HTML dans la table
$message = htmlentities ($_POST['message']);
$pseudo = htmlentities ($_POST['pseudo']);

// Ensuite on enregistre le message
mysql_query("INSERT INTO minichat VALUES('', '$pseudo', '$message')");

// On se déconnecte de MySQL
mysql_close();
}
}

// Que l'on ait enregistré des données ou pas...
// On affiche le formulaire puis les 10 derniers messages

// Tout d'abord le formulaire :
?>

<form action="minichat.php" method="post">

<fieldset>
Pseudo : <input type="text" name="pseudo" /><br />
Message : <input type="text" name="message" /><br />

<input type="submit" value="Envoyer" />
</fieldset>

</form>

<div class="minichat_all">
<?php

// Maintenant on doit récupérer les 10 dernières entrées de la table
// On se connecte d'abord à MySQL :
mysql_connect("localhost", "tu timaginais choper mon pass?", "tu timaginais choper mon pass?");
mysql_select_db("tu timaginais choper mon pass?");

// On utilise la requête suivante pour récupérer les 10 derniers messages :
$reponse = mysql_query("SELECT * FROM minichat ORDER BY ID DESC LIMIT 0,10");

// On se déconnecte de MySQL
mysql_close();

// Puis on fait une boucle pour afficher tous les résultats :
while ($donnees = mysql_fetch_array($reponse) )
{
?>

<div class="minichat"><p><strong><?php echo $donnees['pseudo']; ?> :</strong><?php echo $donnees['message']; ?></p></div>

<?php
}
// Fin de la boucle, le script est terminé !
?>

</div>

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Darkyky

9 décembre 2005 à 21:50:32

lol!!Merci beaucoup! Ca marche !

Dans la pub c'est pas citroën?

neoxx78

9 décembre 2005 à 21:53:54

Oui

Mais je l'ai quand meme changé la phrase ! J'ai enlevé Citroen pour mettre neoxx78 :lol:

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

Darkyky

9 décembre 2005 à 21:58:06

Edit:Ah ouai c'est vrai! Je fonce sur ce forum!

neoxx78

9 décembre 2005 à 22:01:05

hop hop, tu es dans la mauvaise section ...

C'est un problème de PHP là

(et je suis au meme niveau que toi dans ce cas

)

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal