Discussion :

[matinpeys]

Salut à tous,
Je tente de créer un menu vertical avec des coins arrondis.
Voici le code du menu:

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
 
#left {
         width:185px;
         float: left;
         margin-right: 14px;
         height:auto;
         overflow: hidden;
         line-height:37px;
         }
#left ul li a  {
         background: url(../images/cool.png) no-repeat 0 0  scroll transparent;
         width:179px;
          margin:1px 1px 1px 1px;
         text-align: center;
 
 
}

J'ai créé une image avec des coins arrondis et je l'ai découpé en 4 parties (top-left, top-right, bottom-left et bottom-right) ci-jointes.
Je l'ai utilisé dans mon code CSS pour obtenir un affichage des coins ronds du menu comme suit:

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
 
 
#left .module  {
         background: url(../images/top_left.png) no-repeat scroll  0 0  ;
 
}
#left .module div{
         background: url(../images/top_right.png) no-repeat scroll 100% 0 ;
 
}
#left .module div div{
         background: url(../images/bottom_left.png) no-repeat scroll 0 100%  ;
 
}
#left .module div div div{
         background: url(../images/bottom_right.png) no-repeat scroll 100 %100%  ;
 
}
 
#left .module div div div div{
       background: #444441;
 
}

Le problème est que la taille du menu varie d'une page à une autre (le nombre d'éléments du menu est variable) et donc l'image donne parfois un affichage bizarre... Il y a un vide blanc entre les 2 images du top et les 2 du bottom...

Comment faire pour que l'image soit affichée correctement ?