28172 sujets

CSS et mise en forme, CSS3

Mettre en forme une liste non ordonnée

Deux questions :
1- Comment centrer la liste non ordonnée (en jaune) dans la page ?
2- Comment centrer les li (class="nomElement") dans la zone jaune ?
Une démo avec un fiddle serait la bienvenue.

     <ul id="visuElements">
           <li id="nomElement1" class="nomElement">Elément 1</li>
           <li id="nomElement2" class="nomElement">Elément 2</li>
           <li id="nomElement3" class="nomElement">Elément 3</li>
           <li id="nomElement4" class="nomElement">Elément 4</li>
           <li id="nomElement5" class="nomElement">Elément 5</li>
           <li id="nomElement6" class="nomElement">Elément 6</li>
           <li id="nomElement7" class="nomElement">Elément 7</li>
           <li id="nomElement8" class="nomElement">Elément 8</li>
           <li id="nomElement9" class="nomElement">Elément 9</li>
          <li id="nomElement10" class="nomElement">Elément 10</li>  
     </ul> 




    #visuElements {
                 list-style: none;
                 position:fixed;
                 height:80%;
                 top:0px;
                 background-color:yellow;
                 width:85%;
                 overflow:auto;
               
             }
            
             .nomElement {
                  font-family:"Arial";
                  padding:10px;  
                  color:black;	
                 font-size:25px;
                  background-color:white;  
                  width:95%;
                  margin-bottom:20px;
	         line-height:110%;
                  text-align:center;
                  box-shadow: 3px 3px 5px #666666;
                 border: 2px solid darkblue;
            }


jsfiddle
https://jsfiddle.net/fredericmarcel/eoufm7gm/14/

Merci de votre aide.
Frédéric Smiley smile
Modifié par fredericmarcel (05 Sep 2016 - 14:36)
Bonjour Fredericmarcel,

Une chose me gêne dans ton énoncé. En effet tu souhaite placer ta liste (élément ul) au centre de ta page alors que tu utilise un positionnement fixe. J'ai du mal à percevoir l'objectif final par cette méthode.

Admettons qu'il s'agisse d'une (bête) erreur. Ta liste est un élément de type block soit qui va occuper la largeur de son conteneur (moins les émargements bien entendu).
Je vois que tu fixe sa taille à 85 % de celle-ci et c'est un bon réflexe pour obtenir le centrage.
Il n'y manque qu'une toute petite chose à savoir une marge latérale automatique soit:
ul {
  margin-left: auto;
  margin-right: auto;
}


Le raisonnement pour les composantes de cette liste est exactement le même à savoir :
- affichage en type block des éléments LI (comportement par défaut)
- définition de la largeur de ces éléments (fixer la taille ou fournir un min/max)
- marges latérales automatiques

Si vraiment ta liste doit-être en position fixe, il y a des solutions mais je préfèrerais que tu me confirme que cela est bien ton souhait avant de me lancer dans une seconde explication.

En attendant, bonne continuation Smiley smile


Edit : A y regarder de plus près, j'ai de plus en plus l'impression que la liste en position fixe est bien une volonté de ta part. Tu définis la liste comme mesurant 85% de la largeur de l'espace disponible. Ce qui signifie qu'il reste 15% d'espace disponible.
Un left: 7,5% devrait te permettre d'arriver facilement à tes fins.

Par contre un overflow: auto sur ta liste ne me paraît pas judicieux.
Puis-je te suggérer plutôt :
overflow-x: none;
overflow-y: auto;
?
Si vraiment tu souhaite limiter la casse. Le top étant de ne pas donner de hauteur à l'élément afin qu'il s'adapte automatiquement à son contenu.


Edit numéro 2 : Inutile de préciser l'unité de mesure à une valeur nulle car :
0px = 0rem = 0vw = 0 = la tête à toto
Smiley cligne
Modifié par Greg_Lumiere (05 Sep 2016 - 14:59)
Sujet clos
Aller à