Espacer 2 éléments
Jean
-
Jean -
Jean -
Bonsoir,
j'ai une liste HTML qui se présente comme ceci:
Je voudrais espacer d'un certain nombre de pixel chacun de mes titres (Contenu #) de leurs 2 images situés à leur droite.
Comment procéder dans mon code CSS ?
Merci
j'ai une liste HTML qui se présente comme ceci:
<ul> <li class="subitem">Contenu 1<a href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li> <li class="subitem">Contenu 2<a href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li> <li class="subitem">Contenu 3<a href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li> </ul>
Je voudrais espacer d'un certain nombre de pixel chacun de mes titres (Contenu #) de leurs 2 images situés à leur droite.
Comment procéder dans mon code CSS ?
Merci
2 réponses
-
Bonjour,
ul li.subitem img { margin-left:10px; }
mais pour etre un tout petit plus propre (espace entre les liens)
<ul> <li class="subitem">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li> <li class="subitem">Contenu 2<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li> <li class="subitem">Contenu 3<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li> </ul>
ul li.subitem .imglink { margin-left:10px; }
La valeur 10px, tu la remplaces par l'espace que tu veux (ex : 30px)
Voila voila
-
Merci beaucoup ça fonctionne.
Une question cependant:
Quelle est la différence entre
ul li.subitem .imglink { }
et
ul .subitem .imglink { }
?
Le résultat ne sera t-il pas systématiquement toujours le même?-
dans l'immediat si, c'est identique. C'est juste une habitude de codage permettant d'assigner une classe a un élément spécifique.
Je m'explique :
Une classe peut posséder des spécificités globales :
.subitem .imglink { padding:6px; border:1px solid #000 background:#17b3cb }
puis par la suite une spécificité propre a l'élément (balise html) :
span.subitem .imglink { margin:10px 20px; display:block } div.subitem. imglink { margin:0px 5px }
avec une meme classe, un élément div aura sa propriété margin différente de span. Ce qui m'évite de créer une multitude de classe tel :
.margin-span { margin:10px 20px } .margin-div { margin:0px 5px }
coté html, le codage est plus léger puisque :
<div class="subitem">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></div> /*ou*/ <span class="subitem">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></div>
aura les memes comportement que :
<div class="subitem margin-div">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></span> /*ou*/ <span class="subitem margin-span">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></span>
Dans le cas d'une liste ce n'est pas tellement adaptée mais c'est une habitude d'écriture :)
Cette pratique est très utile mais ne s'utilise pas dans tout les cas
...J'ai un doute sur la clarté de mon explication :) -
-
