28172 sujets

CSS et mise en forme, CSS3

[problème] Overflow pas sympa !!!

Bonjour à tous,

Il est rare que je poste des appels au secours sur ce forum, mais là je suis dépassé (et ce n'est pas faute d'avoir épluché le net de fonds en combles).

Je suis en train d'essayer de mettre en place en Tchat très simple, sans BDD et à base PHP/JQuery. Un script très basique mais qui refuse de m'obéir dans la mise en forme...

Je voudrais que le champ ou l'on écris les messages reste fixe en bas de page (plutôt : en bas de navigateur !) et que les messages, eux, s'empilent les uns sous les autres (le dernier étant toujours positionner juste au dessus du champ texte, un Tchat normal quoi...)

J'ai gratter dans tous les sens, je ne vois pas comment faire ça...

Voici mon HTML et mon CSS actuel (non retouché, c'est le script de base trouvé sur internet) :

chat.html :
<body>
<div id="chat">
	<!-- Chat Room -->
    <div id="room"></div>
	<!-- Formulaire -->
	<div id="form">
    <form action="#" method="post">
        <input type="text" name="user" value="Anonyme" size="7"/>
        <input type="text" name="message" size="30" AUTOCOMPLETE="off" />
        <input type="submit" value="ok" />
    </form>
    </div>
</div>
</body>


style.css :
#chat {
    background:#5D5D5D url(images/header.png) bottom left repeat-x;
    border:3px outset #555;
    color:#FFF;
    font:11px Verdana, Helvetica, sans-serif;
    padding:10px;
    width:350px;
}
#chat * {
    padding:0;
    margin:0;
}
#chat input[name=user] {
    background:#FFF url(images/user.gif) left center no-repeat;
    padding-left:20px;
}
#chat input[name=message] {
    background:#FFF url(images/message.gif) left center no-repeat;
    padding-left:20px;
}
#chat h3 {
    font-family:"Trebuchet MS", Tahoma, sans-serif;
    margin:0;
}
#room {
    background:#FFF;
    color:#000;
    height:400px;
    margin:10px 0;
    overflow:auto;    
}
#room dt,
#room dd {
    padding:8px;
}
#room dt {
    background:#EFEFEF url(images/user.gif) left center no-repeat;
    border-bottom:1px dotted #CCC;
    border-top:1px dotted #CCC;
    padding-left:20px;
}


J'ai retourné ça dans tous les sens : en vain !!! J'espère avoir été à peu près clair dans l'exposition de mon problème pour qu'une âme charitable puisse me venir en aide...

Bien à vous.
Bonjour,

Impossible de dire quoi que ce soit sans connaitre la structure du DOM généré dans <div id="room"></div>.

Questions:
- Ton système de chat fonctionne bien, et ton problème porte uniquement sur une question de mise en page (placer les éléments au bon endroit)?
- Tu sais utiliser des outils tels que Firebug et Web Inspector pour inspecter le code HTML généré par des scripts JS?
Modifié par fvsch (02 Nov 2011 - 13:53)
fvsch > Oui mon système est parfaitement fonctionnel... Non je ne sais pas utiliser les outils comme Firebug ou WebInspector (même jamais entendu parler de ce dernier...)

Je fini par penser que le problème de positionnement n'est pas seulement du au CSS, peut-être qu'il faut regarder du côté du JS... Le PHP se contente d'écrire les données dans un fichier, donc ce n'est pas lui...

Voici mon JS (utilisant la librairie JQuery) :

$(function() {
    $('#chat form').submit(function() {
        var user    = $('#chat input[name=user]').val();
        var message = $('#chat input[name=message]').val();
        $.post('chat/chat.php', { 'user':user, 'message':message }, function() {
            refreshChat();
        });
        $('#chat input[name=message]').val('');
        return false;
    });
    
    function refreshChat() {
        $.ajax({
            url: "chat/chat.html", 
			ifModified:true,
            success: function(content){
                $('#room').html(content);
            }
        });
        setTimeout(refreshChat, 5000);
    }
    refreshChat();
});


Et voici le fichier HTML qui va bien :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Un Chat élémentaire en jQuery / Php</title>
<link type="text/css" rel="stylesheet" href="chat/chat.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="chat/chat.js"></script>
</head>
<body>
<div id="chat">
	<!-- Chat Room -->
    <div id="room"><dl></dl></div>
	<!-- Formulaire -->
    <form action="#" method="post">
        <input type="text" name="user" value="Anonyme" size="7"/>
        <input type="text" name="message" size="30" AUTOCOMPLETE="off" />
        <input type="submit" value="ok" />
    </form>
</div>
</body>
</html>


Je débute dans ce domaine, je suis peut-être passé à côté de quelque-chose...
Modifié par SillyKat (02 Nov 2011 - 14:08)
SillyKat a écrit :
Non je ne sais pas utiliser les outils comme Firebug ou WebInspector (même jamais entendu parler de ce dernier...)

Alors il faut commencer par là.
Firebug est une extension pour Firefox. Web Inspector c'est l'outil de développement intégré par défaut à Chrome. Il y a aussi DragonFly intégré par défaut à Opera, et les Developer Tools intégrés dans IE 8-9.

Tous ces outils te permettent d'inspecter le DOM de la page, c'est à dire l'équivalent dans la mémoire du navigateur du code HTML de la page. Dans le cas présent, tu as un certains nombre d'éléments qui vont être créés à l’intérieur de la <div id="room"></div>. Il faudrait savoir lesquels exactement.

En anglais, il y a ce Firebug Guide for Web Designers publié récemment qui est vachement bien.
Sujet clos
Aller à