A voir également:
- Css espacer deux éléments
- Deux comptes whatsapp - Guide
- Photoshop elements gratuit - Télécharger - Retouche d'image
- Deux ecran pc - Guide
- Itinéraire google map entre deux adresses - Guide
- Un écouteur sur deux marche ✓ - Forum iPhone
2 réponses
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
2 juil. 2014 à 23:16
2 juil. 2014 à 23:16
Bonjour,
mais pour etre un tout petit plus propre (espace entre les liens)
La valeur 10px, tu la remplaces par l'espace que tu veux (ex : 30px)
Voila voila
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
et
?
Le résultat ne sera t-il pas systématiquement toujours le même?
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?
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
Modifié par inspiring le 3/07/2014 à 09:22
Modifié par inspiring le 3/07/2014 à 09:22
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 :
puis par la suite une spécificité propre a l'élément (balise html) :
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 :
coté html, le codage est plus léger puisque :
aura les memes comportement que :
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 :)
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 :)
