Discussion :

[Invité]

Bonjour,

Ci-dessous une partie du code html de la page contenant l'élément que je souhaite modifier.
Il s'agit d'un menu que j'ai fais avec beaucoup d'aide de ce forum

Actuellement l'image et le texte sont centrés sur une ligne dans le li.
J'aimerais que l'image soit à gauche dans le li et que le texte soit centré dans l'espace restant (surtout pour voir ce que ça donnerait).
Est-ce possible de le faire facilement ou faut-il modifier plus en profondeur le code html ?

Code html :

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

1
2
3
4
5
6
7
8
9
  <ul style="display: none;" id="menu">
    <li>
      <input type="radio" id="menu_3" name="check" class="r_check">
      <label for="menu_3" class="on_check">Forum</label>
      <ul>
        <li><a href="http://www.developpez.net/forums/f463/webmasters-developpement-web/mise-page-css"><img src="./lien_files/developpez.png"><div>CSS</div></a></li>
      </ul>
    </li>
...

Ci-desous un extrait du css. Je mettrais la totalité si besoin.

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
li {
  display: block;
  width: 12em;
  text-align: center;
  margin: 0em 0.5em 0.5em 0em;
  border-radius: 0.5em;
  background-color: #AAAAAA;
}
li:hover {
  background-color: #6688FF;
}
li a {
  display: block;
  padding: 0.4em 0.5em 0.4em 0.5em; /* espace autour du lien */
  color: #000000;
  text-decoration: none;
  cursor: default;
}
img {
  display: inline;
  vertical-align: middle;
  height: 2em;
  border: 0;
}
 
div {
  padding: 0em 0em 0em 0.5em; /* espace autour du div */
  display: inline;
  vertical-align: middle;
}

Merci

[Timoune007]

Bonjour,
J'aimerai bien t'aider mais j'ai du mal à comprendre ce que tu souhaite faire (même après avoir recopié ton code et regardé sur mon navigateur !)...

[Slayes]

Bonjour,

Tu pourrais faire quelque chose du genre :
Remplacer :

Code :

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

 <li><a href="http://www.developpez.net/forums/f463/webmasters-developpement-web/mise-page-css"><img src="./lien_files/developpez.png"><div>CSS</div></a></li>

Par :

Code :

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

<li class="picto1"><a href="http://www.developpez.net/forums/f463/webmasters-developpement-web/mise-page-css"><div>CSS</div></a></li>

Et ajouter dans le CSS :

Code :

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

1
2
3
ul ul {padding-left: 0;}
ul ul li {background-repeat: no-repeat;}
.picto1 {background-image: url("./lien_files/developpez.png"); }

[NoSmoking]

Bonjour,

<div>CSS</div>

mais que vient faire cette DIV en plein milieu ?

[Slayes]

Je n'ai modifié que ce qu'il fallait pour obtenir le résultat attendu.
Évidement maintenant le div ne sert à rien, il faut modifier le reste du CSS, pour que ce soit plus propre :-)

[NoSmoking]

une piste

Code html :

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

1
2
3
4
<ul>
  <li><a href=""><img src="http://www.developpez.net/forums/images/ranks/embleme-trophee1.png">Les trophées</a></li>
  <li><a href=""><img src="http://www.developpez.net/forums/images/ranks/embleme-redacteur.png">Les livres</a></li>
</ul>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
li{
  width:20em;
  background:#eef;
  text-align:center;
  padding:0;
  list-style:none;
}
li img{
  float:left;
  clear:both;
  border:none;
}

[Invité]

Bonjour,

Si les images en questions sont des icônes de menu, elles n'ont pas leur place en tant qu'"image" dans le code HTML.
On peut par contre les mettre dans le CSS :

Code html :

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

1
2
3
4
<ul>
  <li class="trophees"><a href="">Les trophées</a></li>
  <li class="livres"><a href="">Les livres</a></li>
</ul>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ul { list-style:none; width:20em; }
 
li a { position:relative; display:block;
  text-align:center; padding:2px 2px 2px 31px; min-height:31px;
}
li a:before {
  position:absolute; content:'';
  top:2px; left:2px; width:27px; height:27px;
}
li.trophees a:before { background:url(http://www.developpez.net/forums/images/ranks/embleme-trophee1.png) no-repeat; }
li.livres a:before { background:url(http://www.developpez.net/forums/images/ranks/embleme-redacteur.png) no-repeat; }
 
/* un peu de déco.. */
li { background:#eef; }
li:hover { background:#efe; }
li a { text-decoration:none; }

On peut aussi facilement les animer : http://codepen.io/jreaux62/pen/zvqgxR