Faire un div arrondi en CSS

Version imprimable

Bonjour,

Je souhaite faire des bords arrondis a mon div:

J'ai copié/collé le code de ce site (pour ne pas me casser la tete) mais il ne fonctionne pas sur mon div. Quelqu'un aurait la solution?

http://www.html.it/articoli/nifty/index.html

Code:

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
 
 
#corps 
{ 
color: red; 
font-size: 14 px; 
font-family: "Comic Sans MS"; 
border: none; 
width: 800px; 
height: 400px; 
margin-top: 200px; 
margin-left: 225px; 
position: absolute; 
padding-top: 10px; 
padding-left: 10px; 
overflow: auto; 
background-color: #FF9900; 
} 
 
.rtop, .rbottom{display:block} 
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden} 
.r1{margin: 0 5px} 
.r2{margin: 0 3px} 
.r3{margin: 0 2px} 
.r4{margin: 0 1px; height: 2px}

Code:

1
2
3
4
5
6
7
8
9
10
11
 
 
<div id="corps"> 
<b class="rtop"> 
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> 
</b> 
<!--content goes here --> 
<b class="rbottom"> 
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> 
</b> 
</div>

Qu'est-ce qui ne va pas?? Y'a t-il des erreurs? parce que cela ne marche pas...

Merci de vos reponses

Salut,
tu as simplement oublié de spécifier les couleurs :
Code:

1 2 3 4 5 6 7 8 9 10 .rtop, .rbottom { display: block; background-color: #FFF; } .rtop *, .rbottom * { display: block; height: 1px; overflow: hidden; background-color: #F90; }
La prochaine fois, pense à écrire ton code dans la balise CODE. ;)

Bonjour,

Et puis

Citation:

It fails on element with fixed height, or with padding.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#corps { 
  color: red; 
  font-size: 14px; /*         sans espace */
  font-family: "Comic Sans MS"; 
  border: none; 
  width: 800px; 
  /*height: 400px; */
  margin-top: 200px; 
  margin-left: 225px; 
  position: absolute; 
  /*padding-top: 10px; 
  padding-left: 10px; */
  overflow: auto; 
  background-color: #FF9900; 
  }

01/03/2009, 13h38
gomodo
moi j'utilise les effets scriptaculous j'ai donc ceci en en-tête :
Code:

1 2 3 <script src='/js/scriptaculous/lib/prototype.js' type='text/javascript'></script> <script src='/js/scriptaculous/src/scriptaculous.js' type='text/javascript'></script>
Mais comme toi je voulais avoir des calques arrondi.. ..j'ai trouvé un "addon" pour scriptaculous http://nurey.com/corners.html. J'ajoute donc ceci :
Code:

1 2 <script src='/js/nurey_on_scriptaculous/corners.js' type='text/javascript'></script>
puis dans mon code (ce n'est pas une erreur, l'appel javascript est bien juste après le div) :
Code:

1 2 3 4 5 6 7 <div id="div_a_arrondir"> blabla </div> <script type='text/javascript'> new Effect.Corner('div_a_arrondir', '12px') </script>
Ce code m'évite de me casser la tête juste pour arrondir les bords (on perd déjà assez de temps avec le CSS). Note : La prochaine mouture CSS devrait inclure les bord arrondis (j'ai peur quand même..).

Attention, le code précédent triche (dailleurs comme les autres) pour simuler les bords arrondis :
le coin arrondi n'est pas réellement transparent. En réalité il est coloré avec la couleur du Background parent. Par exemple si l'on place le coin sensé être transparent sur un élément, il sera masqué avec la couleur background.

Conséquence : éviter les gros arrondis.

En espérant t'avoir aidé.. (cliquer "résolu" dans ce cas).
01/03/2009, 13h48
Macmillenium

Bonjour,

Citation:

Envoyé par gomodo

Ce code m'évite de me casser la tête juste pour arrondir les bords (on perd déjà assez de temps avec le CSS). Note : La prochaine mouture CSS devrait inclure les bord arrondis (j'ai peur quand même..).

C'est sûr, sauf que tu inclus toute une librairie pour faire juste des simples coins arrondis ...

Pourquoi ne pas faire des simples images ?
Je te propose :
http://www.developpez.net/forums/d60...i-css-sous-ie/
http://www.developpez.net/forums/d54...oins-arrondis/
01/03/2009, 14h04
desert

Citation:

Envoyé par Macmillenium

C'est sûr, sauf que tu inclus toute une librairie pour faire juste des simples coins arrondis ...
Pourquoi ne pas faire des simples images ?

+1
C'est un peu comme utiliser une voiture pour écraser une fourmi. :mrgreen:
De plus, si le JS est désactivé... C'est un peu comme utiliser une voiture qui n'existe pas pour écraser une fourmi. :aie:

EDIT: A prendre au second degré bien entendu ! ;)
01/03/2009, 14h20
gomodo

premier lien interessant, merci.

Disons que dans mon cas, souvent on commence a chercher des effets graphique soigné (des bord arrondis par exemple..), mais on ne sait pas avec quoi ça va se terminer (effet de masquage, fondus, etc). je préfère tout de suite utiliser des solutions de type boite à outils qui permettent toute sorte effets avec un minimum de code sur la page.

(le javascript désactivé... j'aimerais connaitre le nombre de navigateur qui le désactive)