.messagerie div li:nth-child(even), .messagerie div li:nth-child(odd)
{
border-bottom:1px solid #CCCCCC;
width:100%;
}
.messagerie div li:nth-child(even)
{
text-align:left;
}
.messagerie div li:nth-child(odd)
{
text-align:right;
}
.messagerie div li span:nth-child(even), .messagerie div li span:nth-child(odd)
{
width:3.5em;
height:3.5em;
border:1px solid #CCCCCC;
border-radius:50%;
display:inline-table;
margin:1em;
}
.messagerie div li p:nth-child(even), .messagerie div li p:nth-child(odd)
{
display:inline-block;
}
.messagerie div li p:nth-child(even)
{
margin-left:3em;
}
.messagerie div li p:nth-child(odd)
{
margin-right:3em;
}
.messagerie div li p span:nth-child(odd), .messagerie div li p span:nth-child(even)
{
padding:1em;
position: relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
width:35em;
margin:0;
}
.messagerie div li p span:nth-child(odd)
{
background:#FF0000;
}
.messagerie div li p span:nth-child(even)
{
background:#CCCCCC;
}
.messagerie div li p span:nth-child(odd):before, .messagerie div li p span:nth-child(even):before
{
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}
.messagerie div li p span:nth-child(odd):before
{
right: 100%;
top:0.5em;
border-left: 26px solid #FF0000;
}
.messagerie div li p span:nth-child(even):before
{
left: 100%;
top:0.5em;
border-right: 26px solid #CCCCCC;
}
.messagerie div li p time:nth-child(odd), .messagerie div li p time:nth-child(even)
{
display:block;
padding-top:1em;
}
j'ai 3 questions qui ne fonctionne pas
1er question : j'ai mis ce css
.messagerie div li p span:nth-child(odd)
{
background:#FF0000;
}
.messagerie div li p span:nth-child(even)
{
background:#CCCCCC;
}
ca ne veux pas changer la couleur pour temps j'ai mis odd et even
2 eme question c'est la flêche grave before
.messagerie div li p span:nth-child(odd):before, .messagerie div li p span:nth-child(even):before
{
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}
.messagerie div li p span:nth-child(odd):before
{
right: 100%;
top:0.5em;
border-left: 26px solid #FF0000;
}
.messagerie div li p span:nth-child(even):before
{
left: 100%;
top:0.5em;
border-right: 26px solid #CCCCCC;
}
là encore une fois j'ai mis odd et even avec left et right
pour la couleur c'est que tu cibles le span:nth-child à l'intérieur des li et pas les li eux-mêmes, contrairement à ce que tu fais pour les alignements.
Ça doit être la même chose pour les ::before.
(par contre, as-tu vraiment besoin de ces sélecteurs à rallonge ? un simple ".messagerie .message" suffirait si tu donnais la classe "message" à tes li par exemple)
(et pense qu'un message peut être composé de plusieurs phrases, voir de plusieurs paragraphes, un span ne me semble pas l'élément le plus sémantiquement adapté)
- Edité par Lamecarlate 10 juin 2017 à 13:43:27
Pas d'aide concernant le code par MP, le forum est là pour ça :)
D'une part, je parlais de mettre une classe sur chaque message, donc les li, pas le ol…
Ensuite, as-tu lu ma première phrase ?
> pour la couleur c'est que tu cibles le span:nth-child à l'intérieur des li et pas les li eux-mêmes, contrairement à ce que tu fais pour les alignements.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
mais je crois avoir trouver sauf un petit detail mais rien de grave c'est sur la balise p il y a un petit marging top en trop je vois ou ca bug car il y a moyen espace blanc en trop donc il faut que je trouves quelle class c'est
sinon voilà le résultat tu me diras si c'est bon et je laisse come ça ou il faut que je change un truc par quoi
J'ai mis à jour ton code sur JSFiddle (dans une nouvelle page) : https://fiddle.jshell.net/1jgp0aqj/2/ en utilisant ".message:nth-child(odd) p" et pas ".message p:nth-child(odd)", ça marche pour moi. Tu confirmes ?
Notons que les messages alignés à droite commencent par un paragraphe mais pas ceux alignés à gauche, c'est pour ça que mettre le nth-child sur p marche aussi, mais c'est une coïncidence. Tu auras tout intérêt à avoir exactement la même structure html pour tous tes messages et changer l'ordre de l'avatar en CSS, par exemple avec "display: flex" sur le message, et "order: 1" sur l'avatar.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
donc tu voit j'ai refait la colone droite et j'ai mis une class à chaque li comme tu m'as dit car apparemment c'est mieux (donc je vais refaire la même chose pour les pages forum)
pour la collone droite j'ai mis une class à mon aside pour affiché le profil
j'ai rajouté un texterea pour écrire un message (tu me dit pour quoi metre un texterea et pas un input je veux bien t'expliqué mais ca sera trop long )
à mon avis c'est parfait tu me diras si c'est bon ou il faut modifier un truc
maintenant il faut que je remet oder 1 sur le span avatar sans que ca bug à causse le display: flex etc..
chil odd je n'ai pas mis un display:flex; là c'est bon (par contre on ne peut pas changer l'ordre avec order 1
child(even) là j'ai ms display:flex; là on peut changer l'ordre avec order 1 là on est ok mais par contre la date time ne se met pas en sous (mais par contre si j'enleve display:flex) là tout est est bon mais par contre on ne pourra pas changer l'ordre
donc c'est pour ca je ne trouves pas comment veut tu mettre un display:flex sur 2 colonne (avec time qui a un display:block;)
à mon avis il faut joué avec display:flex; et display:block;
Là, on a des messages avec un html identique (en structure), et côté CSS ils sont en display: flex, avec deux différences uniquement pour les nth-child(even), le text-align et l'order pour l'avatar.
Est-ce que ça correspond à ce que tu cherches à faire ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
le texte des message (j'ai mis width:auto; pour permettre de réduire le cadre en fonction du texte avec une limite max-width:35em; pour ne pas allez jusqu'au bout et ca va s’arrêter normale à 35em in challa)
avec un cadre avec 2 couleurs différent grâce avec odd et even et j'ai mis une flèche droite et gauche selon l'orientation des avatars
et la date se trouve en sous du cadre message et tu vois j'ai un peut triché avec margin-right:9em; margin-left:9em;
moi perso, je laisse comme ca car je comprendrais un peut et si par hazzard je doi change l'ordre des message
la premier ligne qui est à droite je veux mettre à gauche etc..
je changerais manuellement au lieu de mettre order 1 et order 2
peut être vous allez trouver long le css mais en moi je me retrouve facilement
j'ai tester de mettr 2 couleurs different mais il reste bloquer sur .message-texte:nth-child(odd)
et pour le before lsur la 1 er ligne c'est bon il se met bien à droite du cadre
mais sur la 2 ligne j'arrives pas à le mettre à gauche
et pour la longueur j'aimerais mettre widht auto qu'il s'arete au dernier message mais avec une limite
width:auto;
max-width:35em;
en attendant ta réponse je vais re tenter de l refare pour voir
merci
child odd et even
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)