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 ?

[jhn design]

il y a une autre possibilité que les png pour les arrondis, le border radius du CSS3.
voila la page qui peut te générer ton code : http://www.css3maker.com/border-radius.html avec en prime la visualisation.
A moins que tu ne puisse pas utiliser le css3.

[matinpeys]

Merci pour ta réponse, mais à priori, ce n'est pas valable pour tous les navigateurs...déjà, ça ne s'affiche pas correctement sur le mien...

[matinpeys]

Je viens de tomber sur ça:
http://css3pie.com/about/
Est ce que quelqu'un a déjà essayé ça??? et comment intégrer les fichiers sur mon site???

[Macmillenium]

et comment intégrer les fichiers sur mon site???

Il suffit de lire la doc
http://css3pie.com/documentation/getting-started/

[matinpeys]

oui, je sais pour la documentation, je l'ai déjà vue et appliquée, mais pas de résultats, pas de coins ronds, c'est pour ça que j'ai posé la question...

[12monkeys]

Bonjour

Pour répondre à ta première question il faudrait également le code HTML, voire encore mieux une page en ligne.