Coins arrondis pour une zone de texte

Bonjour,

Voila un extrait de mon code qui me permet d'afficher "Mon titre" (en jaune sur fond bleu) par dessus une image.
Mon problème, (qui dure depuis hier) est que je n'arrive pas à afficher ma zone de titre avec des coins arrondis.

Code:

---

1 2 3 4 5 6

<div style="margin-left:18; width:1200px; height:166px; border:1px solid #000; padding:0; background-image:url(Image1.jpg); position:relative"> <div style="width:290px; margin-left:450; margin-top:15; text-align:center; vertical-align:middle; font-size:25px; font-family:arial; font-weight:bold; background-color:#4169e1; color:#ffff99; font-style:normal; text-decoration:none"> Mon titre </div> </div>

---

Quelqu'un aurait LE TRUC qui pourrait m'aider ?

Merci à tous.

Bonjour,

utilise z-index ;)

Code:

---

1 2 3 4 5 6

<div style="margin-left:18; width:1200px; height:166px; border:1px solid #000; padding:0; background-image:url(Image1.jpg); position:relative;z-index:1"> <div style="width:290px; margin-left:450; margin-top:15; text-align:center; vertical-align:middle; font-size:25px; font-family:arial; font-weight:bold; background-color:#4169e1; color:#ffff99; font-style:normal; text-decoration:none;z-index:50"> Mon titre </div> </div>

---

Re,

Merci de t'intéresser à mon souci, mais mon problème n'est pas là. "Mon titre" s'affiche correctement par dessus l'image. Mon souhait est que ce titre ait les coins arrondis.

Bonjour,

T'aurais pas oublié de mettre border-radius dans ton style? :koi:

En effet, tu dois ajouter du code CSS supplémentaire pour avoir des bords ronds. Tous les navigateurs les acceptent sauf IE (bien que le prochain IE l'acceptera).

Il faut ajouter, si tu veux des bords ronds à tous les coins (et pour maximiser la compatibilité selon le navigateur de l'utilisateur) :

Code:

---

1 2 3

border-radius: [rayon]px; -moz-border-radius: [rayon]px; -webkit-border-radius: [rayon]px;

---

Si tu ne veux que le bord supérieur droit, tu utiliseras :

Code:

---

1 2 3

border-top-right-radius: [rayon]px; -moz-border-top-right-radius: [rayon]px; -webkit-border-top-right-radius: [rayon]px;

---

Et tu adaptes selon le bord que tu veux rond ;)

Re,

Merci à vous.