Discussion :

[thais781]

Bonjour,

J'ai un petit menu fais en sprite.
Ca marche pas mal sauf que je n'arrive pas à faire en sorte que mon menu prenne la largeur complete de la page (soit 25% pour chacun, il y en a 4)
Savez vous comment on integre cette notion d'affichage en %age avec des sprites ?
du style width: 25%;


Code html :

Code html :

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

1
2
3
4
5
6
  <ul class="categorie">
    <li class="souscat"><a href="#">Opera</a></li>
    <li class="souscat"><a href="#">WordPress</a></li>
    <li class="souscat"><a href="#">Firefox</a></li>
    <li class="souscat"><a href="#">PHP</a></li>
  </ul>

Code Css :

Code :

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
ul {
  margin: 0;
  padding: 0;
}
 
.categorie {
  list-style-type : none;
  font-family: "Helvetica", "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
}
 
.categorie li a, .categorie li a:link, .categorie li a:visited {
  height: 50px;
  width: 100px;
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 50px;
  text-align: center;
  background: url(ImgVideMenu.png) no-repeat 0 top;
  color: #6c3306;
  text-decoration:none;
  float: left; 
}
 
.categorie li.souscat a:hover {
  color: #f4ebda;
  background-position: 0 bottom;
}

Merci d'avance

Thais

[ryan]

Yop!

Tu avais la solution avec les 25%. Ajoute ceci à ton css:

Code css :

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

1
2
3
4
5
li
{
  width: 25%;
  float: left;
}

Le float: left est là pour corriger ce qui ressemble à un bug dans FF (une marge fantôme entre les balises li qui aurait provoqué un retour à la ligne pour la 4eme option)