28182 sujets

CSS et mise en forme, CSS3

bonjour j'ai mis

	  <!--début du formulaire-->
	  <form id="global-panel-liste-newsletters" action="toto.php" method="post" >
	  <fieldset>

	  <legend>Il y à 5 newsletters qui ont était envoier</legend>


	  <!--début du titre des envoie à là newsletters-->
      <div id="panel-liste-newsletters-envoier-titre">
	  <span class="panel-liste-newsletters-envoier-titre-id">id</span>
	  <span class="panel-liste-newsletters-envoier-titre-pseudo">pseudo</span>
	  <h3 class="panel-liste-newsletters-envoier-titre-titre">titre</h3>
	  <p class="panel-liste-newsletters-envoier-titre-contenu">contenu</p>
	  <p class="panel-liste-newsletters-envoier-titre-date">date envoie </p>
	  <p class="panel-liste-newsletters-envoier-titre-activer-desactiver">activer/desactiver</p>
	  <div class="panel-liste-newsletters-envoier-titre-tout-supprimer"><input type="checkbox" name="supprimer-panel-liste-newsletters-envoier" id="tout-supprimer-panel-liste-newsletters-envoier" /><label for="tout-supprimer-panel-liste-newsletters-envoier"><span></span></label></div>  
	  </div>
	  <!--fin du titre des envoie à là newsletters-->

	  <!--début de la pagination pour les des envoie à là newsletters-->
	  <div class="global-pagination-liste-newsletters-envoier">
	  <ol class="pagination-liste-newsletters-envoier">
	  <li class="pagination-liste-newsletters-envoier-precedent"><a href="/?page=2" title="précédent">« précédent</a></li>
	  <li class="pagination-liste-newsletters-envoier-active"><a href="/?page=1" title="page 1">1</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=2" title="page 2">2</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=3" title="page 3">3</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=4" title="page 4">4</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=5" title="page 5">5</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=6" title="page 6">6</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=7" title="page 7">7</a></li>
	  <li class="pagination-liste-newsletters-envoier-suivant"><a href="/?page=2" title="suivant">suivant »</a></li>
	  </ol></div>
	  <!--fin de la pagination pour les des envoie à là newsletters-->

	  <!--début du contenu des envoie à là newsletters-->
	  <ol>
	  <!--début du 1 er newsletters envoier-->
	  <li class="panel-liste-newsletters-envoier">
	  <span class="panel-liste-newsletters-envoier-id">1</span>
	  <div class="panel-liste-newsletters-envoier-avatar icon-membre-panel-liste-newsletters-envoier-avatar-homme"><div class="membre-panel-liste-newsletters-envoier-homme-statut-en-ligne"></div></div>
	  <span class="panel-liste-newsletters-envoier-pseudo">pseudo</span>
	  <h3 class="panel-liste-newsletters-envoier-titre">titre de la newsletters</h3>
	  <p class="panel-liste-newsletters-envoier-contenu">contenu.......................................</p>
	  <p class="panel-liste-newsletters-envoier-date">le 01/08/2019</p>
	  <ol class="panel-liste-newsletters-envoier-activer-desactiver"><li class="liste-newsletters-activer-desactiver"><input type="radio" name="activer-desactiver-newsletters" id="activer-newsletters" /><label for="activer-newsletters"><span></span>activer la newsletters</label></li>
	                                                         <li class="liste-newsletters-activer-desactiver"><input type="radio" name="activer-desactiver-newsletters" id="desactiver-newsletters" /><label for="desactiver-newsletters"><span></span>desactiver la newsletters</label></li>
      </ol>
	  <div class="panel-liste-newsletters-envoier-supprimer"><input type="checkbox" name="supprimer-newsletters" id="supprimer-newsletters" /><label for="supprimer-newsletters"><span></span></label> </div>  
	  </li>
	  <!--fin du 1 er newsletters envoier-->
	  <!--début du 2 ème newsletters envoier-->
	  <li class="panel-liste-newsletters-envoier">
	  <span class="panel-liste-newsletters-envoier-id">2</span>
	  <div class="panel-liste-newsletters-envoier-avatar icon-membre-panel-liste-newsletters-envoier-avatar-homme"><div class="membre-panel-liste-newsletters-envoier-homme-statut-en-ligne"></div></div>
	  <span class="panel-liste-newsletters-envoier-pseudo">pseudo</span>
	  <h3 class="panel-liste-newsletters-envoier-titre">titre de la newsletters</h3>
	  <p class="panel-liste-newsletters-envoier-contenu">contenu.......................................</p>
	  <p class="panel-liste-newsletters-envoier-date">le 01/08/2019</p>
	  <ol class="panel-liste-newsletters-envoier-activer-desactiver"><li class="liste-newsletters-activer-desactiver"><input type="radio" name="activer-desactiver-newsletters" id="activer-newsletters" /><label for="activer-newsletters"><span></span>activer la newsletters</label></li>
	                                                         <li class="liste-newsletters-activer-desactiver"><input type="radio" name="activer-desactiver-newsletters" id="desactiver-newsletters" /><label for="desactiver-newsletters"><span></span>desactiver la newsletters</label></li>
      </ol>
	  <div class="panel-liste-newsletters-envoier-supprimer"><input type="checkbox" name="supprimer-newsletters" id="supprimer-newsletters" /><label for="supprimer-newsletters"><span></span></label> </div>  
	  </li>
	  <!--fin du 2 ème newsletters envoier-->
	  </ol>
	  <!--fin du contenu des envoie à là newsletters-->

	  <!--début de la pagination pour les des envoie à là newsletters-->
	  <div class="global-pagination-liste-newsletters-envoier">
	  <ol class="pagination-liste-newsletters-envoier">
	  <li class="pagination-liste-newsletters-envoier-precedent"><a href="/?page=2" title="précédent">« précédent</a></li>
	  <li class="pagination-liste-newsletters-envoier-active"><a href="/?page=1" title="page 1">1</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=2" title="page 2">2</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=3" title="page 3">3</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=4" title="page 4">4</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=5" title="page 5">5</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=6" title="page 6">6</a></li>
	  <li class="pagination-liste-newsletters-envoier-simple"><a href="/?page=7" title="page 7">7</a></li>
	  <li class="pagination-liste-newsletters-envoier-suivant"><a href="/?page=2" title="suivant">suivant »</a></li>
	  </ol></div>
	  <!--fin de la pagination pour les des envoie à là newsletters-->



	  <legend>Il y à 5 membres qui sont inscrit à la newletters</legend>

	  <!--début du titre des membres inscrit à là newsletters-->
      <div id="panel-liste-newsletters-membre-inscrit-titre">
	  <span class="panel-liste-newsletters-membre-inscrit-titre-id">id</span>
	  <span class="panel-liste-newsletters-membre-inscrit-titre-pseudo">pseudo</span>
	  <p class="panel-liste-newsletters-membre-inscrit-titre-date-inscription-site">date inscription du site </p>
	  <p class="panel-liste-newsletters-membre-inscrit-titre-date-inscription-newsletters">date inscription à la newsletters </p>
	  <div class="panel-liste-newsletters-membre-inscrit-titre-tout-supprimer"><input type="checkbox" name="supprimer-panel-liste-newsletters-envoier" id="tout-supprimer-panel-liste-newsletters-envoier" /><label for="tout-supprimer-panel-liste-newsletters-envoier"><span></span></label></div>  
	  </div>
	  <!--fin du titre des membres inscrit à là newsletters-->

	  <!--début de la pagination pour les des envoie à là newsletters-->
	  <div class="global-pagination-liste-newsletters-membre-inscrit">
	  <ol class="pagination-liste-newsletters-membre-inscrit">
	  <li class="pagination-liste-newsletters-membre-inscrit-precedent"><a href="/?page=2" title="précédent">« précédent</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-active"><a href="/?page=1" title="page 1">1</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=2" title="page 2">2</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=3" title="page 3">3</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=4" title="page 4">4</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=5" title="page 5">5</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=6" title="page 6">6</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=7" title="page 7">7</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-suivant"><a href="/?page=2" title="suivant">suivant »</a></li>
	  </ol></div>
	  <!--fin de la pagination pour les des envoie à là newsletters-->

	  <!--début du contenu des membres inscrit à la newsletters-->
	  <ol>
	  <!--début du 1 er membres inscrit à la newsletters-->
	  <li class="panel-liste-newsletters-membre-inscrit">
	  <span class="panel-liste-newsletters-membre-inscrit-id">1</span>
	  <div class="panel-liste-newsletters-membre-inscrit-avatar icon-membre-panel-liste-newsletters-membre-inscrit-avatar-homme"><div class="membre-panel-liste-newsletters-membre-inscrit-homme-statut-en-ligne"></div></div>
	  <span class="panel-liste-newsletters-membre-inscrit-pseudo">pseudo</span>
	  <p class="panel-liste-newsletters-membre-inscrit-date-inscription-site">le 01/08/2019</p>
	  <p class="panel-liste-newsletters-membre-inscrit-date-inscription-newsletters">le 01/08/2019</p>
	  <div class="panel-liste-newsletters-membre-inscrit-tout-supprimer"><input type="checkbox" name="supprimer-newsletters" id="supprimer-newsletters" /><label for="supprimer-newsletters"><span></span></label> </div>  
	  </li>
	  <!--fin du 1 er membres inscrit à la newsletters-->
	  <!--début du 2 ème membres inscrit à la newsletters-->
	  <li class="panel-liste-newsletters-membre-inscrit">
	  <span class="panel-liste-newsletters-membre-inscrit-id">2</span>
	  <div class="panel-liste-newsletters-membre-inscrit-avatar icon-membre-panel-liste-newsletters-membre-inscrit-avatar-homme"><div class="membre-panel-liste-newsletters-membre-inscrit-homme-statut-en-ligne"></div></div>
	  <span class="panel-liste-newsletters-membre-inscrit-pseudo">pseudo</span>
	  <p class="panel-liste-newsletters-membre-inscrit-date-inscription-site">le 01/08/2019</p>
	  <p class="panel-liste-newsletters-membre-inscrit-date-inscription-newsletters">le 01/08/2019</p>
	  <div class="panel-liste-newsletters-membre-inscrit-tout-supprimer"><input type="checkbox" name="supprimer-newsletters" id="supprimer-newsletters" /><label for="supprimer-newsletters"><span></span></label> </div>  
	  </li>
	  <!--fin du 2 ème membres inscrit à la newsletters-->
	  </ol>
	  <!--fin du contenu des membres inscrit à la newsletters-->

	  <!--début de la pagination pour les des envoie à là newsletters-->
	  <div class="global-pagination-liste-newsletters-membre-inscrit">
	  <ol class="pagination-liste-newsletters-membre-inscrit">
	  <li class="pagination-liste-newsletters-membre-inscrit-precedent"><a href="/?page=2" title="précédent">« précédent</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-active"><a href="/?page=1" title="page 1">1</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=2" title="page 2">2</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=3" title="page 3">3</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=4" title="page 4">4</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=5" title="page 5">5</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=6" title="page 6">6</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-simple"><a href="/?page=7" title="page 7">7</a></li>
	  <li class="pagination-liste-newsletters-membre-inscrit-suivant"><a href="/?page=2" title="suivant">suivant »</a></li>
	  </ol></div>
	  <!--fin de la pagination pour les des envoie à là newsletters-->

	  </fieldset>
	  </form>
	  <!--fin du global du formulaire-->


et ca fait ca come resultat

https://www.noelshack.com/2019-36-3-1567620141-cap1.png

a votre avis c'est bien ou pas
Modifié par ivan75 (04 Sep 2019 - 20:02)