28172 sujets

CSS et mise en forme, CSS3

bonjour

je n'arrive pas à paramétrer la taille des éléments d'un menu , seulement le premier

li a :first-child { 
width: 200px;}

quand j'utilise ce code pour sélectionner la taille des éléments du deuxième ou du troisième élément ca ne marche pas
li:nth-child(2) { 
width: 250px;}
li:nth-child(3) { 
width: 250px;}


salutation
philiippe
Modifié par 6l20 (23 Dec 2013 - 15:07)
Et pourquoi tu veux fixer la largeur ? Par pur vice ?
Et puis dans le 1e tu cible li:a et ensuite li: .
Hello,

Ça fonctionne (fait à l'arrache Smiley cligne ), mais effectivement, cela semble "curieux" de vouloir fixer ces largeurs par les temps qui courent (mobilité, adaptative design, RWD, toussa...)

Est-il possible de voir l'ensemble de ton code, ou mieux une page en ligne ?
Administrateur
philippe3441 a écrit :
bonjour

je n'arrive pas à paramétrer la taille des éléments d'un menu , seulement le premier

li a :first-child { 
width: 200px;}

quand j'utilise ce code pour sélectionner la taille des éléments du deuxième ou du troisième élément ca ne marche pas
li:nth-child(2) { 
width: 250px;}
li:nth-child(3) { 
width: 250px;}



Bonjour,

Ces syntaxes ne ciblent pas la même chose :

- li a :first-child (avec un espace après le a)
--> cible un élément premier enfant dans un <a> dans un <li> (tu es sûr que c'est un enfant de <a> que tu veux cibler ?)
(note : sélecteur compatible IE7)

- li:nth-child(2)
--> cible l'élément qui est à la fois un <li> et qui est 2è enfant (de ul). Tu es sûr de vouloir cibler un <li> ?
(note : compatible IE9 minimum)

Si ton objectif est de cibler les liens, les sélecteurs devraient plutôt être :

li:first-child a {}
li:nth-child(2) a {}
li:nth-child(3) a {}
...


Ou, si tu tiens à une compatibilité avec les anciens navigateurs :

li:first-child a {}
li:first-child + li a {}
li:first-child +li + li a {}
...


Note pour finir : les éléments <a> sont naturellement de rendu "inline" donc ne peuvent pas être dimensionnés par défaut.
Modifié par Raphael (23 Dec 2013 - 15:32)
salut,
difficile de dire sans le code HTML. On ne comprend pas trop ce que tu veux cibler.
S'il s'agit de <li>, un code plus simple et avec une large compatibilité reviendrait à:

li {width:200px}
li+li {width:250px}
merci pour vos réponses ,
et merci d'avoir noté mon erreur dans le code

je m'en tiens à paramétrer le premiere élement du menu

philippe