Rectangle à bords arrondis

**ml1234** · 05/06/2009, 09h24

Bonjour,
Comment faire une liste entourée d'un rectangle à bords arrondis ?
ex : events&training dans http://www.niksoftware.com/index/fr/entry.php

je suppose que le titre gris au-dessus se fabrique en fireworks ?

même question pour la bannière dfine mais ça on pourrait le faire avec photoshop en créant une ombre et en gardant un petit contour blanc tout-autour de l'image donc pas sûr que cela soit le même outil dreamweaver

merci

**Bisûnûrs** · 05/06/2009, 09h40

Si tu regardes le code, ce ne sont que des images avec une structure à base de tableaux.

Pour la bannière DFine, ce n'est rien de plus qu'une grande image, rien n'est fait en HTML.

**ml1234** · 07/06/2009, 11h52

tu as raison bisounours,
j'ai cliqué droit tout autour du rectangle arrondi et sauvé chaque image.
Pour les bords latéraux gauche et droit c'est moins évident de comprendre d'où ils démarrent, je vais investiguer davantage.

Cela signifie-t-il que tous les rectangles à bords arrondis que je vois sur les sites (fond jaune, contour,...) sont générés par morceau ainsi ou utilisent une div qui contient une image jaune toute faite à bords arrondis sur laquelle on superpose les ul,li ?

merci
Marc

**Bisûnûrs** · 07/06/2009, 15h22

Ca dépend, "tous" les sites ne font pas pareil, il y a une dizaine de méthodes différentes pour créer des boite à coins arrondis.
Sur le site que tu mets en lien, c'est une technique de morcelage et quadrillage où il y a que des petites images, dont une pour chaque coin.

**den3625ème** · 26/06/2009, 13h08

Envoyé par ml1234

Bonjour,
Comment faire une liste entourée d'un rectangle à bords arrondis ?
ex : events&training dans http://www.niksoftware.com/index/fr/entry.php

je suppose que le titre gris au-dessus se fabrique en fireworks ?

même question pour la bannière dfine mais ça on pourrait le faire avec photoshop en créant une ombre et en gardant un petit contour blanc tout-autour de l'image donc pas sûr que cela soit le même outil dreamweaver

merci

oups....... oublier la reponse
Coin arrondis en CSS (si c'est ça la question ?)

border: 2px solid #AFB4D6;-moz-border-radius-topleft:40px;webkit-border-top-left-radius:40px;(c'est un exemple)

Fonction qui ne marche pas avec IE (bien sur!)

Décidément pas réveillé aujourd'hui. Au dessus tu arrondis juste le coin haut a gauche. Bon d'un autre coté c'est un peu transparent si tu traduit.
Les 4 coins.

-moz-border-radius:20px
fonctionne pas plus avec IE (bien sur!)