Discussion :

[pc75]

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 :

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

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.

[supersnail]

Bonjour,

utilise z-index

Code :

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

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>

[pc75]

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.

[supersnail]

Bonjour,

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

[Hemophilius]

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 :

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

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 :

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

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

[pc75]

Re,

Merci à vous.