créér un nouveau design !

Poru un minichat !!!

8 avril 2007 à 13:49:11

Salut à tous, voilà, j'ai réussi à faire un mini-chat(c'était dur) grace à l'aide des zéros du forum Php !
(je recré le topic, car il y a eut un bug sur l'autre :p)
Mais maintenant, mission design^^
Je voudrais faire un truc genre:
Image utilisateur

voici mon code :

<table><thead>
<tr><th>Mini-Chat</th>
<td colspan="4">
<h5>Dernier message le <?php echo date('d/m/Y à H:i', $donnees['timestamp']) ;?></h5>
</td><td>Version 1.00.04</td>
</tr></thead>
<tfoot>
<tr><td colspan="2">
<form action="minichat.php" method="post">

<p>
<input type="hidden" name="pseudo" value="<?php echo $pseudo ?>" /><br />
Message : <textarea name="message" rows="1" cols="35" maxlength="250"></textarea><br />

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

</form>
</td>
</tr></tfoot><tbody>
<?
// Puis on fait une boucle pour afficher tous les résultats :
while ($donnees = mysql_fetch_array($reponse) )
{
echo '<tr><td><h4>' . $donnees['pseudo'] . ' :</h4></td><td colspan="4"><h5>' . $donnees['message'] . '<br>______________________</h5></td><td><h5>le '.date('d/m/Y <br>à H:i', $donnees['timestamp']).'</td></h5></tr>';
}
?></tbody>
</table>

Css:

table
{
background-color: rgb(255,233,140);
border: 0px; /* ... auront une bordure de 1px */
border-collapse: collapse;
margin: 10px;
width: 600px;
}
#thead td /* Toutes les cellules des tableaux... */
{
height: 10px;
width: 200px;
text-align: center;
border: 0px solid black; /* ... auront une bordure de 1px */
}
td
{
width:100px;
height:20px;
}
th /* Toutes les cellules des tableaux... */
{
width: 50px;
height: 10px ;
border: 0px solid black; /* ... auront une bordure de 1px */
font-weight: bold;
}
#tbody th
{
width:546px ;
height: 10px;

}

Je sais, je suis pas très doué, mais bon^^
Je souhaiterai également enlever les traits, les bordures quoi^ que je mettrai dans une image !

Pour le moment, ça donne ça:
http://shinchanno.free.fr/minichat.php
mince faut être membre; voici le compte test:
pseudo:test1 /mdp:test23

Merci d'avance pour votre aide!

Unkky

8 avril 2007 à 14:59:26

Je trouve que comme dans ton image modèle, "Mini-Chat Dernier message le 01/01/1970 à 01:00 Version 1.00.04" ça serait mieux dans une seule cellule sur les 3 colonnes, et la version est peu utile à mon avis
Ensuite, orange sur bleu, je trouve ça trop agressif
Pour enlever les bordures, je pense qu'il faut enlever les deux lignes "border" dans le CSS(pas sûr mais ça devrait marcher)

PigKey86

8 avril 2007 à 15:50:18

pour le jaune, je sais^^
Mais je mettrais une image en fond

Mais tu saurais pas comment faire, pour réduire la case pseudo et le'/'/' à ee:ee

Parce que, le message est tout petit^^

Merci d'avance :-°

Unkky

8 avril 2007 à 16:12:08

Je viens de mieux regarder ton code, pourquoi t'as fait 4 colonnes pour celle du milieu ??
Pour la case pseudo il faut réduire toute la colonne, désolé mais je suis pas très tableau, ça devrait t'aider : http://perso.orange.fr/chatinais/courhtml/tableau/plantab.htm

PigKey86

8 avril 2007 à 16:26:39

EDIT: Non, tout va bien, merci pour votre aide !