Discussion :

[radjiv97441]

Bonjour, en adoptant le menu lien du menu , j'aimerais centrer et aligner à droite une image sur certaine feuille du menu.

je rajoute ceci par rapport au css fournit, l'image est à droite mais non centrer verticalement.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#menu li a img {
	float:right;
	vertical-align:middle;
}

voila le coté

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="#">Item 11&nbsp;<img src="./images/construction1nb.png"></a></li>

Merci pour vous propositions.

[Invité]

Bonjour,

dis-nous d'abord si c'est une "image descriptive", ou une "icône illustrative" (flèche, par exemple).
Car ce ne sera pas géré de la même façon.

• 1- "image descriptive" : apporte une information au contenu -> balise <img src="..." alt="..." />
• 2- "icône illustrative" : sans information descriptive (peut être enlevée sans nuire au contenu) -> on utilisera plutôt une image en background CSS

J'opte pour le cas 2- :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li class="construction1nb"><a href="#">Item 11</a></li>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
li.construction1nb a:after {
 position:absolute;
 content:'';
 right: 5px; top:3px; width:24px; height:24px; /* à adapter */
 background:url('./images/construction1nb.png') center center no-repeat;
}

[JefReb]

Il est peut être aussi possible de mettre cette image sans passer par les pseudo éléments et par le positionnement absolute.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
ul > li {
	background-image: url(./images/construction1nb.png);
	background-repeat: no-repeat;
	background-position: 0 0.4em;    /* à adapter */
	padding-left: 1.5em;                 /* à adapter */
	margin: 0.2em 0;                      /* à adapter */
}

[radjiv97441]

Bonjour, j'ai mis le fragment de code https://jsfiddle.net/vf3bdmbm/1/ afin de visualiser.
Je cherche à mettre l'icone uniquement là où il y a la classe "class='mdesactive'", l'icone sur l'exemple se place à gauche et non complètement à droite.
Des idées ? merci d'avance

[NoSmoking]

Bonjour,

background-position: 0 0.4em; /* à adapter */

donc il faut adapter, par exemple background-position: center right !

[JefReb]

@NoSmocking

donc il faut adapter, par exemple background-position: center right !

Oui mais le principal est de donner une information, pas forcéemnt toujours la solution qui est en fonction du contexte.