écrire html correctement

Fermé
juliette - 5 janv. 2017 à 00:33
 juliette - 6 janv. 2017 à 20:30
Bonjour,

je cherche écrire correctement mon code ;)

voilà le html
	  <p class="mini-chat-nombre-connecter-totaliter">800 Connecté</p>
	  <p class="mini-chat-nombre-connecter-totaliter">400 hommes et 400 femmes</p>

avec son code css

      .mini-chat-nombre-connecter-totaliter
	  {
	  font-size:1em;
	  font-weight:700;
	  text-align:center;
	  margin:0;
	  border-top:1px solid #CCCCCC;
	  }


esce-que c'est mieux

<p class="mini-chat-nombre-connecter-totaliter"><p>800 Connecté</p><p>400 hommes et 400 femmes</p></p>


avec le code css

      .mini-chat-nombre-connecter-totaliter
	  {
	  font-size:1em;
	  font-weight:700;
	  text-align:center;
	  margin:0;
	  }
      .mini-chat-nombre-connecter-totaliter p
	  {
	  border-top:1px solid #CCCCCC;
	  }


comment on peut ecrire correctement en sachant que la 1 er bordure top sera supprimer


A voir également:

6 réponses

Déjà c'est mieux de ne pas utiliser des classes CSS aussi longue, car c'est parce que j'ai pas fait attention aux traits d'union au début, je pensais que tu avais plusieurs classes dessus.

Ensuite il est pas conseiller de mettre des paragraphe dans des paragraphes, si tu veux englober plusieurs paragraphes utilise au moins une balise div, sinon niveau sémantique tu peux entouré avec autre chose selon le cas, car tu peux aussi avoir article

Sinon la meilleure solution je pense est la deuxième, vu que tes infos sont liées, je veux dire qu'elles se ressemblent et qu'elles doivent toujours être l'une avec l'autre, le mieux est de les entourer d'une div comme pour la deuxième solution, ça sera plus simple si tu dois les déplacer ensemble.


Enfin petit précision/question, pourquoi mettre font-size:1em;, autant ne rien mettre car les em sont relatif à la taille de base, donc mettre 1em c'est comme faire 1*<taille de base>, ça change rien.
0
Utilisateur anonyme
5 janv. 2017 à 10:40
Bonjour

Ensuite il est pas conseiller de mettre des paragraphe dans des paragraphes,
C'est même interdit. La balise <p> peut contenir du phrasing content, mais n'est pas elle même du phrasing content
https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element
0
merci j'ai fait comme ça le code je te parle pas des longue class mais juste la structure les balise

      <div class="mini-chat-conversation">
	  <div class="mini-chat-salon-gauche">
	  <p class="mini-chat-fenetre-info">Ne communique jamais tes coordonnées personnelles (nom, addresse, n° de téléphone...), ni tes identifiants.<span class="icon-mini-chat-supprimer" title="supprimer"></span></p>
	  <p class="mini-chat-fenetre-message">age, ville(75), ici pour une relation serieuse du membre</p>
	  <p class="mini-chat-fenetre-conversation-1">mon texte je suis ivan </p>
	  <div class="mini-chat-zone-avatar-pseudo-texte">
	  <p class="mini-chat-zone-avatar-pseudo">Pseudo</p>
	  <p class="mini-chat-zone-texte">texterea</p>
	  </div>
	  </div>
	  <div class="mini-chat-salon-droite">
	  
	  <div class="mini-chat-nombre-connecter-totaliter"><p>800 Connecté</p><p>400 hommes et 400 femmes</p></div>
	  
	  <div class="mini-chat-membre-connecter">
	  
	  <p class="mini-chat-membre-groupe-robot">Robot</p>
	  
	  <nav><ol>
	  <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
	  </li>
	  </ol></nav>
	  
	  <p class="mini-chat-membre-groupe-admin">Admin</p>
	  
	  <nav><ol>
	  <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
	  </li>
	  </ol></nav>
	  </div>
	  
	  <div class="mini-chat-button-statut">Statut :<?php include "../../select/minichat/statut.php"; ?></div>
	  
	  </div>
	  </div>


merci et t'iinquiéte pas après je modifie les class lol dés que tu m diras si tout est bon au niveau des balises ;) approximatif
0
j'ai un peut amélioré les balise et pas les class

tu me diras si c'est bien

      <div class="mini-chat-conversation">
	  <div class="mini-chat-salon-gauche">
	  <p class="mini-chat-fenetre-info">Ne communique jamais tes coordonnées personnelles (nom, addresse, n° de téléphone...), ni tes identifiants.<span class="icon-mini-chat-supprimer" title="supprimer"></span></p>
	  <p class="mini-chat-fenetre-message">age, ville(75), ici pour une relation serieuse du membre</p>
	  <p class="mini-chat-fenetre-conversation-1">mon texte je suis ivan </p>
	  <div class="mini-chat-zone-avatar-pseudo-texte">
	  <p class="mini-chat-zone-avatar-pseudo">Pseudo</p>
	  <p class="mini-chat-zone-texte">texterea</p>
	  </div>
	  </div>
	  <div class="mini-chat-salon-droite">
	  
	  <div class="mini-chat-nombre-connecter-totaliter"><p>800 Connecté</p><p>400 hommes et 400 femmes</p></div>
	  
	  <div class="mini-chat-membre-connecter">
	  <nav><ol>
	  <li>
	  <p class="mini-chat-membre-groupe-robot">Robot</p>
	                                   <nav><ol>
									   <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
									   </li>
									   <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
									   </li>
									   </ol></nav>
	  </li>
	  <li>
	  <p class="mini-chat-membre-groupe-admin">Admin</p>
	                                   <nav><ol>
									   <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
									   </li>
									   <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
									   </li>
									   </ol></nav>
	  </li>
	  <li>
	  <p class="mini-chat-membre-groupe-modo">Modo</p>
	                                   <nav><ol>
									   <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
									   </li>
									   <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
									   </li>
									   </ol></nav>
	  </li>
	  <li>
	  <p class="mini-chat-membre-groupe-membre">Membre</p>
	                                   <nav><ol>
									   <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
									   </li>
									   <li>
	  <div class="mini-chat-membre-en-ligne">
	  <div class="mini-chat-membre-en-ligne-avatar"><figure class="portrait-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar home"></span></figure></div>
	  <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
	  <p class="mini-chat-membre-en-ligne-age">100</p>
	  <p class="mini-chat-membre-en-ligne-departement">Mars</p>
	  </div>
									   </li>
									   </ol></nav>
	  </li>
	  </ol></nav>




	  </div>
	  
	  <div class="mini-chat-button-statut">Statut :<?php include "../../select/minichat/statut.php"; ?></div>
	  
	  </div>
	  </div>

merci
0
J'ai du mettre ton code dans Sublime Text pour le ré-indenter et mieux le comprendre avec ma coloration syntaxique car là je comprenais rien.

Déjà deux mauvaise utilisation de balise:

https://developer.mozilla.org/fr/docs/Web/HTML/Element/nav

https://developer.mozilla.org/fr/docs/Web/HTML/Element/figure

Ensuite pourquoi des ol et non ul car là je pense qu'en CSS déjà tu as dû cacher les puces, et ensuite c'est pas comme ci il y avait un membre plus important qu'un autre ou un truc du genre.

Après n'hésite pas à utiliser des titres, de h1 à h6 (plus à moins important) par exemple ceci:
<p class="mini-chat-membre-groupe-robot">Robot</p>


Devient:

<h2 class="mini-chat-membre-groupe-robot">Robot</h2>


Vu que c'est un nom de groupe, car un p est un paragraphe, est la définition de Wiki:

Un paragraphe est une section de texte en prose vouée au développement d'un point particulier souvent au moyen de plusieurs phrases, dans la continuité du précédent et du suivant. Sur le plan typographique, le début d'un paragraphe est marqué par un léger renfoncement (alinéa) ou par un saut de ligne.


Ici tu as qu'un mot...

Pareil pour les éléments relatifs au membre, utilise des span pour mettre tes infos, déjà il n'y aura pas de marge et ils seront aligner, même si en sémantiquement ça change rien (du moins la span n'est pas sémantique).

Bon après comme je sais pas à quoi servent chaque information j'ai fait que la partie mini-chat-salon-droite mais ça peut devenir ceci:
<aside class="members">
 <div class="login-info">
  <span class="total">800 connectés</span>
  <span class="total-gender">400 hommes et 400 femmes</span>
 </div>
 <div class="list-members">
  <section class="group robots">
   <h2 class="group-name">Robot</h2>
   <ul>
    <li class="member online man">
     <figure class="avatar">
      <img src=""quot;"quot;<lien avatar>" alt="John Doe">
     </figure>
     <span class="pseudo">John Doe</span>
     <span class="age">42</span>
     <span class="county">Var</span>
    </li>
    <li class="member online woman">
     <figure class="avatar">
      <img src=""quot;"quot;<lien avatar>" alt="Jane Doe">
     </figure>
     <span class="pseudo">Jane Doe</span>
     <span class="age">42</span>
     <span class="county">Var</span>
    </li>
   </ul>
  </section>
  <section class="group admins">
   <h2 class="group-name">Admin</h2>
   <ul>
    <li class="member online woman">
     <figure class="avatar">
      <img src=""quot;"quot;<lien avatar>" alt="Jane Doe">
     </figure>
     <span class="pseudo">Jane Doe</span>
     <span class="age">42</span>
     <span class="county">Var</span>
    </li>
    <li class="member online man">
     <figure class="avatar">
      <img src=""quot;"quot;<lien avatar>" alt="John Doe">
     </figure>
     <span class="pseudo">John Doe</span>
     <span class="age">42</span>
     <span class="county">Var</span>
    </li>
   </ul>
  </section>
 </div>
</aside>


Déjà en CSS ça sera plus simple pour les groupes mais tu peux quand même modifier les infos de chaque groupe avec la class liée. Après l'état en ligne/hors ligne sera plus facile à modifier, surtout plus simple pour les infos comme les avatars, et avec les classes man/woman, tu peux facilement y mettre un icône avec les :pseudo-class :before et :after

Bon il reste des modification, mais je te laisse chercher un peu.
0
merci mais entre temps j'ai refais tu me diras si c'est bien ou si je dois prendre ton code

      <div class="mini-chat-conversation">
	  <div class="mini-chat-salon-gauche">
	  <p>texte</p>
	  <p>texte</p>
	  <div class="mini-chat-fenetre-conversation-1">mon texte</div>
	  <div class="mini-chat-zone-avatar-pseudo-texte">texterea</div>
	  </div>




	  <div class="mini-chat-salon-droite">
	  <p>texte</p>
	  <p>texte</p>
	  <div class="mini-chat-membre-connecter">
	  <nav><ol>
	  <li>
	                   <h3 class="mini-chat-membre-groupe-robot">Robot</h3>
					   <nav><ol>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   </ol></nav>
	  </li>
	  <li>
	                   <h3 class="mini-chat-membre-groupe-admin">Admin</h3>
					   <nav><ol>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   </ol></nav>
	  </li>
	  <li>
	                   <h3 class="mini-chat-membre-groupe-modo">Modo</h3>
					   <nav><ol>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   </ol></nav>
	  </li>
	  <li>
	                   <h3 class="mini-chat-membre-groupe-membre">Membre</h3>
					   <nav><ol>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   <li>
					   <div class="mini-chat-membre-en-ligne">
					   <div class="mini-chat-membre-en-ligne-avatar"><figure class="photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure></div>
					   <p class="mini-chat-membre-en-ligne-pseudo">Robot</p>
					   <p class="mini-chat-membre-en-ligne-age">100</p>
					   <p class="mini-chat-membre-en-ligne-departement">Mars</p>
					   </div>
					   </li>
					   </ol></nav>
	  
	  
	  
	  
	  
	  </li>
	  </ol></nav>
	  </div>
	  
	  <div class="mini-chat-button-statut">Statut :<?php //include "../../select/minichat/statut.php"; ?></div>




	  </div>
	  </div>
	  </div>



merci
0
Utilisateur anonyme
5 janv. 2017 à 18:57
A part le h3 que t'as ajouté, le reste est identique à avant, comme pour figure où il faut une image, les classes qui restent longues, la mauvais utilisation des nav, et les ol inutile (du moins il faut un ul)
0
je suis ok pour la balise figure pas de souci je ferais ca avec les autres pages

mais j'ai mis ol c'est pour compté car les ul c'est des points donc c'est pour ca que j'ai mis ol au lieu ul
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
juste une dernière question

la balise p c'est pour mettre à partir 3 ou 4 mot et +
la balise span c'est pour un ou 2 mot genre une page avec un forum car c'est 1 mot voir 2 mots et les pseudos sont aussi dans la balise span

es-ce que c'est bien ca

une question à propos des balise figure

je veux bien supprimer div et remplacer par

<figure class="mini-chat-membre-en-ligne-avatar photo-mini-chat-membre-en-ligne"><span class="icon-avatar-mini-chat-membre-en-ligne-homme" title="avatar homme"></span></figure>

donc ce cas là ca me convient

mais là par exemple pour un forum

<figure class="forum-index-auteur photo-forum"><span class="icon-avatar-forum-homme"></span></figure>

si je met un margin sur la class photo forum pour que ca décole du cadre forum auteur

ca ne marche pas

mais si je met

<div class="forum-index-auteur"><figure class="photo-forum"><span class="icon-avatar-forum-homme"></span></figure></div>

ca marche bien on vois le cadre figure qui ne se colle pas sur le cadre forum auteur

donc défois on est obliger de le mettre dans un div et d'autre non

si c'est bien ca
0
j'ai juste fait come tu m'as dit

      <div class="mini-chat-conversation">
	  <div class="mini-chat-salon-gauche">
	  </div>

	  	  <aside class="mini-chat-salon-droite">
	  <div class="membre_lgne">
	  <span class="mini-chat-membre-ligne-total">800 Connecté</span><span class="mini-chat-membre-connecter-total">400 hommes et 400 femmes</span>
	  
	  </div>
	  
	  
	  
	  </aside>



le css

/*************************Début Des mini chat salons & membre********************************************/
      .mini-chat-conversation
	  {
	  height: calc(100% - 0em);
/*	  background-color:#0000CC;*/
	  }

	  .mini-chat-salon-gauche, .mini-chat-salon-droite
	  {
	  float:left;
	  height: calc(100% - 0em);
	  }
      .mini-chat-salon-gauche
	  {
	  width:110em;
/*	  background-color:#FF3366;*/
/*	  overflow-y: auto;*/
	  }
	  .mini-chat-salon-droite 
	  {
	  width:36.5em;
      border-left:#CCCCCC 1px solid;
	  }

	  .mini-chat-salon-gauche > .contenu
	  {
	  height: calc(100% - 0em);
/*	  overflow-y: auto;*/
	  }
	  
	  .mini-chat-salon-droite > .contenu
	  {
	  height: calc(100% - 0em);
/*	  overflow-y: auto;*/
	  }

	  .mini-chat-salon-droite span
	  {
	  border-top:1px solid #CCCCCC;
	  padding:1em;
	  }



/*************************Fin Des mini chat salons & membre********************************************/
/*************************Début Des mini chat nombre connecter*************************/

      .mini-chat-membre-ligne-total
	  {
	  font-weight:700;
	  margin-bottom:1em;
	  padding:1em;
	  text-align:center;
	  }
      .mini-chat-membre-connecter-total
	  {
	  font-weight:700;
	  padding:1em;
	  text-align:center;
      border-top:#CCCCCC 1px solid;
	  }
/*************************Fint Des mini chat nombre connecter*************************/




j'ai mis les texte centré avec padding 1em avec un border top sur les span

mais ca ne marche pas

même j'ai tester

	  aside span
	  {
	  text-align:center;
	  padding:1em;
	  }

      .membre_ligne span
	  {
	  font-weight:700;
	  margin-bottom:1em;
	  padding:1em;
	  text-align:center;
	  }

      .mini-chat-membre-ligne-total
	  {
	  font-weight:700;
	  margin-bottom:1em;
	  padding:1em;
	  text-align:center;
	  }
      .mini-chat-membre-connecter-total
	  {
	  font-weight:700;
	  padding:1em;
	  text-align:center;
      border-top:#CCCCCC 1px solid;
	  }


il ne veux me centre ni sauter une ligne entre les span malgré margin bottom

merci d'avance

car avec la balise p fonctione très bien mais come tu veux que je met des span je veux bien mais ill ne fonctionne pas

merci de m'expliqué ;)
0
c'est bon il fallait mettre span avec display blok ;)

si j'ai un souci je reposerais un nouveau message
0