27214 sujets

CSS et mise en forme, CSS3

Bonjour,
Dans un site j'ai à afficher un livre d'or, la réponse vient d'un AJAX et toutes les interventions (paginées bien sur) sont injectées en une seule fois (page par page) .
Chaque intervention est dans son div à bord rond et comprends
l'avatar de l'intervenant dans un cercle, qui devrais être calée à gauche, mais si possible au centre de la hauteur finale de son div. j'ai mis un padding pour qu'il y ait un espace à gauche.
En haut au centre et en gras, le nom du Pseudo et la date j'ignore pourquoi il wrap ???
Et enfin le message lui même au mieux justifié ?
Alors vous pouvez voir ou j'en suis ... pas génial Smiley confused

Merci de votre aide
Je mets le code plus bas, mais il est actif Ici
https://codepen.io/jplyne/pen/rNVdZxX


<div class='LesReponses' id="reponse"> 
  <div class="dialogue">
    <img src="http://www.new-chess-theory.com/avatar/2avat019.jpg" alt="" class="leleft">
    <b>30/12/2004 - Serge</b><br /><br />Bravo pour ce site original du à un ENORME travail graphique et de recherche  Continue, Michel!  Et merci de nous donner du plaisir.<br />
  </div>
</div>  



div.LesReponses{
  height:auto;
  width:auto;max-width:900px;
  margin:auto;text-align:center;
}
div.dialogue {
  display: flex;height: auto;
  width: auto;max-width: 900px;
  margin: auto;text-align: center;
  border: 1px solid #444444;
  padding-top: 20px;border-radius: 20px;
}
img.leleft {padding: 20px;border-radius:50%;width: 70px;height: 70px;}
Modérateur
Bonjour,

pour empecher ton b de passer sur 2 lignes, étant un enfant direct d'une boite en flex, tu peut lui interdire de "retrecir" :
b {flex-shrink:0;}


Je ne suis pas certains que le résultat soit celui que tu souhaites. div.dialogue etant en flex, tout ses enfants sont étalés sur une ligne, ceci inclus les 2 <br> , enfin, le texte derrière reste orphelin d'un parent et s'affiche comme il peut dans l'espace restant.

Quel est le résultat attendu en fait ? texte a coté de la date ou en dessous si le display:flex est retiré?

Cdt
Meilleure solution
Très gros progrès pour moi mais pourquoi alors, le texte qui est bien à la ligne ne vient pas vers l'image ?
Bon ça j'ais trouvé avec mon p justify .. (donnes moi ton avis...)
Et tu as peut-être repéré que j'aimerais (un petit fignolage) Smiley confused
l'mage au centre en hauteur, ???

De toute façon grâce à toi je passes en résolu ... l'image ce sera si tu as une idée, la cerise sur le gâteau ...
Encore merci à toi Smiley cligne
Modifié par Jean-Pierre-Bruneau (14 Mar 2020 - 17:20)
Je l'avait dessiné tel qu'il est, champion l'ami, m'autorises tu a remplacer mon CodePen par ta solution ? car sa rentre dans mes modules qui servent un peut partout... merci d'avance et bravo Smiley cligne
Modérateur
Bonjour, oui oeuf corse, aucun soucis, je peut même supprimer le codepen que j'ai fait si tu le souhaites.

Bon dimanche.