28234 sujets

CSS et mise en forme, CSS3

[Résolu] 2 problèmes avec liste numérotée

JSFiddle : https://jsfiddle.net/fredericmarcel/13fnzjvk/18/

Problème 1 :
Comment aligner la liste sur le titre au milieu de la page ?

Problème 2 :
Le texte des éléments devrait être :
Elément 1;
Elément 2;
Element 3
etc

Mais le texte du dernier élément créé remplace tous les textes des listes précédemment créées par "append"


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var total = 0;
$(document).ready(function(){

    $("#btn").click(function(){
    	total++;
      //alert(nom);
        $("#liste").append("<li></li>");
        $("#liste li").text("Element " + total)
    });
});
</script>

<body>



<h1>
Ceci est le titre centré horizontalement
</h1>

<button id="btn">nouveau</button>

<div id="table">
  <ol id="liste"> </ol>
</div>




h1 {
  display:block;
  margin:0 auto;
  text-align:center;
}

<#table {
  display:table;
  margin-left:auto;
  
}
#liste {
  display:block;
  margin: 0 auto;
   margin-top:30px;
}

#btn {
  display:block;
  margin:0 auto;
  margin-top: 30px;
}

Modifié par Felipe (19 Feb 2016 - 11:13)
Modérateur
Hello,

Pour la première question, je n'ai pas vraiment compris.

Pour le point 2, j'ai forké ton jsfiddle pour te proposer 2 solutions :

- Ajouté ton texte directement à la création de ton <li>
- Cibler ton dernier élément (étant donné que c'est un append) pour insérer ton texte

a+
Merci Fork.

Pour la première question, je voudrais que la liste soit centrée horizontalement au milieu de la page et pas à gauche de la page.
Modérateur
Bonjour,

pour le 2 , si il n'y a aucune Infos a réutilisée, CSS counter peut s'en charger. ( https://developer.mozilla.org/fr/docs/Web/CSS/Compteurs_CSS )
La difference avec une injection dans le DOM via javascript et un pseudo element c'est que le contenu d'un pseudo element n'est ni copiable ni selectionnable ... il n'existe pas vraiment .
ol {
  counter-reset: ollis;
}

li {
  counter-increment: ollis;
}

li:before {
  content: 'element 'counter(ollis);
}


Pour le 1 , display , list-style-position et un reset sur les marges internes et externes:
ol {
  display: table;
  margin: 1em auto;
  padding: 0;
}

li {
  list-style-position: inside;
}


https://jsfiddle.net/13fnzjvk/19/
Modifié par gcyrillus (19 Feb 2016 - 11:59)
Bonjour,


Gcyrillus Ton fiddle me pose un problème à partir du 10ème élément. L'encombrement de LI devenant plus grand que ses prédécesseurs, cela conduit à un retour à la ligne situé entre "élément" et le numéro.

De plus #table est précédé d'un signe inférieur à qui rend la ligne invalide.

En enlevant ce caractère parasite, la liste s'aligne complètement à droite.


Vu via Firefox.
Modifié par Greg_Lumiere (19 Feb 2016 - 12:09)
Modérateur
Greg_Lumiere a écrit :
Bonjour,


Gccyrillus Ton fiddle me pose un problème à partir du 10ème élément. L'encombrement de LI devenant plus grand que ses prédécesseurs, cela conduit à un retour à la ligne situé entre "élément" et le numéro.

Si la numerotation est externe, il n'y a pas lieu de s'en soucier réellement.
[quote=Greg_Lumiere
De plus #table est précédé d'un signe inférieur à qui rend la ligne invalide.

En enlevant ce caractère parasite, la liste s'aligne complètement à droite.


Vu via Firefox.
reliquat du code du fiddle original ...
https://jsfiddle.net/13fnzjvk/20/ nettoyé du css original pour éviter toute confusion/interférences Smiley cligne
gcyrillus a écrit :

https://jsfiddle.net/13fnzjvk/20/ nettoyé du css original pour éviter toute confusion/interférences


Alors là je suis d'accord. Si avec ça Fredericmarcel n'est pas satisfait, je mange mon chapeau.


Gcyrillus : je parlais des numéros générés par JS et non ceux de Css. De toute façon avec cette version nettoyée le twist n'apparaît plus.
Modifié par Greg_Lumiere (19 Feb 2016 - 12:53)
Sujet clos
Aller à