css bulle (chat) Résolu

Question

Bonjour,
J'ai un chat et je suis entrain de faire une version mobile/tablette.
J'ai repris le css à 0 et voilà où j'en suis:

(connecter en tant que Membre)

Design basique pour les petites écran x)
Mon problème est de vouloir enlever le surplus de bulle où il y a pas de texte.

J'ai essayer avec "float:left" pour les bulles qui vont à gauche et "float:right" pour les bulle de droite sa résout mon problème, mais un autre survient. Quand c'est des petit messages ils y en a plusieurs qui s'affiche sur la même ligne :/

css bulle jaune(gauche) et bleu(droite):

/***BULLE BLEU**/
                .bulle-bleu {
                    position:relative;
                    height: 100%;
                    padding-left:5px;
                    padding-right:5px;
                    padding-bottom: 5px;
                    padding-top: 5px;
                    margin: 7px 0 7px;
                    margin-right: 3px;
                    margin-left: 28px;
                    color:#000;
                    background:#0A87A9;
                    background:-webkit-gradient(linear, 0 0, 0 100%, from(#83D8FF), to(#0A87A9));
                    background:-moz-linear-gradient(#83D8FF, #0A87A9);
                    background:-o-linear-gradient(#83D8FF, #0A87A9);
                    background:linear-gradient(#83D8FF, #0A87A9);
                    -webkit-border-radius:5px;
                    -moz-border-radius:5px;
                    border-radius:5px;
                }
                .bulle-bleu .chat-time{
                    position: absolute;
                    color: grey;
                    font-size: 10px;
                    bottom: 5px;
                    left: -27px;
                }
/***BULLE JAUNE***/
                .bulle-jaune {
                    position:relative;
                    padding-left:5px;
                    padding-right:5px;
                    padding-bottom: 5px;
                    padding-top: 5px;
                    margin: 7px 0 7px;
                    margin-left: 3px;
                    margin-right: 28px;
                    color:#000;
                    background:#A6A60B;
                    background:-webkit-gradient(linear, 0 0, 0 100%, from(#FFFC90), to(#A6A60B));
                    background:-moz-linear-gradient(#FFFC90, #A6A60B);
                    background:-o-linear-gradient(#FFFC90, #A6A60B);
                    background:linear-gradient(#FFFC90, #A6A60B);
                    -webkit-border-radius:5px;
                    -moz-border-radius:5px;
                    border-radius:5px;
                }
                .bulle-jaune .chat-time{
                    position: absolute;
                    color: grey;
                    font-size: 10px;
                    bottom: 5px;
                    right: -27px;
                }

Et voici le html/php:

if($_SESSION['Auth']['pseudo'] == $Ppseudo){$triangle="triangle-bleu";} else{$triangle="triangle-jaune";}?>
<div class="<?php echo $triangle; ?>">
<p>
<span class="chat-time" title="<?php echo date("d/m/y H:i:s",$d[$i]["date"]); ?>">
<?php echo date("H:i",$d[$i]["date"]); ?></span>
<span title="<?php echo $titre; ?>">
<font color="<?php echo $couleur ; ?>">
<strong><?php echo utf8_decode($pseudo); ?></strong>
</font></span>: 
<?php echo utf8_decode($message); ?></p></div>

Merci de votre aide !

Afficher la suite

">:

Merci de votre aide !

Totorow · Answer

Salut,

si je comprends bien vous voulez que lorsque le texte d'un message est court la "bulle" qui l'affiche ne fasse pas toute la ligne comme c'est le cas actuellement.

Si vous essayez float ça ne sert clairement pas à cela puisque float sert à positionner un élément par rapport à un autre(en "flottant" contre le côté indiqué et l'élément précédent suivant).

Pour que votre container ai la même taille que son texte il faut le passer en display:inline;

Ce qui est le cas des balises de textes par défaut.

ai je bien compris? 
Les propriétés CSS3 c'est osé pour des mobiles et des tablettes qui n'ont pas toujours des navigateurs aussi complets que ceux d'un ordinateur.
Vous avez pu testé, ça passe sans problème?

florire · Answer

J'ai mis "display:inline" à toute met bulle voici le résultat:


Pour le css3 il s'affiche correctement sur le navigateur par défaut d'android et sur safari.

florire · Answer

j'ai mis "display:inline-block" à mes bulle et j'ai mis la div des bulle a l'intérieur des balise

. Résultat: Une seule bulle par ligne, les bulle entour le texte correctement, mais elles sont toute à gauche Merci de votre aide (: EDIT: J'ai mis: p{clear:both;} et donc rajouter "float:right ou left" à mes bulles. J'ai le résultat voulu :) Merci.

Css bulle (chat)

3 réponses

Votre réponse

Discussions similaires