Discussion :

[darkbob]

Salut, J'ai mis des coins ronds dans mon div a l'aide de css.
Le problème est que je j'peux pas mettre l'exterieur de ces coins transparents puisque l'image se trouve dans les coin de mes div.

Donc, si par exemple mon fond est blanc et je met l'image de mon coin blanc et transparent,on le verra plus puisque le transparent va prendre la couleur du blanc.Ca va donc faire un carré :/.

J'peux pas non plus mettre l'exterieur des coins la couleur de mon background puisque c'est un dégradé et que le height change.
Y'a-t-il quelqu'un qui serait comment faire pour que mes coins transparent prenne la couleur du backgorund et non pas du div ? merci.

[alexp]

tu peux utliser une propriété css3 pour éviter d'utiliser les images.

Code :

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

   border-radius:10px;

le 10 etant la valeur du rayon.
Il faut savoir que internet explorer, opera et konqueror ne gere pas le css3. Seul firefox et epiphany à ma connaissance le prenne en compte

[Oluha]

sur cette page tu trouveras des coins arrondis sans image et compatible sur tous les navigateurs : http://www.cssplay.co.uk/boxes/krazy.html

[clb56]

Salut,

avec des images c'est un poil compliqué mais faisable.

Voici un exemple sur un fragment html assez banal, une liste constituant un menu :

Code HTML :

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

1
2
3
4
5
6
7
8
9
 
<h1>
Menu
</h1>
<ul>
<li><a href="adresse_1">Lien 1</a></li>
<li><a href="adresse_2">Lien 2</a></li>
<li ><a href="adresse_3">Lien 3</a></li>
</ul>

Pour avoir un support suffisant pour la mise en oeuvre des css on a besoins de deux choses
1. Placer le tout (titre et liste) dans un même conteneur. Un <div> donc puisque c'est à cela que sert cette balise (contenir plusieurs éléments de type block)
2. Caractériser le dernier élément html présent (ici le dernier item <li> de la liste)

Soit :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="conteneur_menu">
 
<h1>
Menu
</h1>
<ul>
<li><a href="adresse_1">Lien 1</a></li>
<li><a href="adresse_2">Lien 2</a></li>
<li class='last_element'><a href="adresse_3">Lien 3</a></li>
</ul>
 
</div>

Voici la css que je propose j'espère que les commentaires inclus sont assez clairs.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
 
#conteneur_menu {
float:left;/*Pour limiter la largeur du block à son contenu*/
background:url(menu_left_top2.png) no-repeat left top;/* Coin haut/gauche image 20*135 pixels */
}
 
#conteneur_menu h1 {
margin-top:0;/* remplacement des marges externes par des marges internes */
padding-top:20px;/* idem */
margin-bottom:0;/* idem */
padding-bottom:10px;/* idem */
padding-right:20px;
margin-left:20px;
background:url(menu_right_top2.png) no-repeat right top;/* Coin haut/droit image 580*150 pixels */
}
 
#conteneur_menu ul {
list-style-type:none;/* supression des puces */
padding-left:0;/* supression de l'espace des puces pour Firefox*/
margin-left:0;/* supression de l'espace des puces pour Opera et IE*/
margin-top:0;/* supression marge externe */
margin-bottom:0;/* supression marge externe */
background:url(menu_left_bottom2.png) no-repeat left bottom;/* Coin bas/gauche image 20*150 pixels */
}
 
#conteneur_menu li {
background:#49909c;/* couleur de la partie interne des coins */
padding:4px 30px;
}
 
#conteneur_menu .last_element {
padding:0;
padding-top:4px;
padding-bottom:30px;
padding-right:30px;
margin-left:20px;
padding-left:10px;
background:url(menu_right_bottom2.png) no-repeat right bottom;/* Coin bas/droite image 580*150 pixels */
}
 
#conteneur_menu a {
color:#fff;
}

L'ensemble des images utilisées représente un poids d'environ 2 Ko

Pour voir le résultat j'ai mis une page en ligne :
http://www.clb56.fr/test_css/test_coins_transparents/