Border-radius et background-color

Bonjour,

Je n'arrive pas à combiner l'usage de ces deux propriétés : border-radius et background-color. Le fond est en fait un aplat rectangulaire, dont les coins dépassent l'arrondi créé par border-radius. Voici un exemple agrandi :



Pour mes tests, j'utilise -moz-border-radius pour que l'arrondi soit affiché sur Firefox. Est-ce que cela vient de cette pseudo-balise, et le problème sera résolu une fois la CSS3 validée et intégrée aux navigateurs ? Ou bien il faut un code particulier pour l'utiliser correctement, avec le fond qui s'intègre à l'arrondi ?

Merci pour vos réponses

Jarodd

Edit : résolu, il manque le border-radius sur footer
Modifié par Jarodd (16 Aug 2008 - 10:54)

Bonsoir Jarodd,

Il faut simplement l'utiliser conjointement avec border, puisque cette propriété propriétaire agit....sur les bordures :

#conteneur {
background:#808080;
border:2px solid #000;
-moz-border-radius:10px; [#blue]-> A définir[/#]
[#blue]...
Tes autres propriétés[/#]
}

Pourquoi ne pas utiliser une image de fond pour ton conteneur ?
Voir du coté de chez Florent V.

En ce qui concerne CSS3, il va falloir attendre encore un peu

Cdt,
Sylvain
Modifié par 6l20 (15 Aug 2008 - 20:17)

J'ai précisément le même code :

body #page #footer {
	width : 100%;
	clear : both;
	margin : 0%;
	border : #000000 2px solid;
	color : rgb(0, 0, 0);
	background : gray;
}

Et c'est cela qui ne fonctionne pas.

Pour les images, je n'aime pas la méthode : impossible de redimensionner le site.

Pour la date de sortie de CSS3 je vais être très long à faire mon site, donc ça va je ne suis pas pressé
Modifié par Jarodd (15 Aug 2008 - 20:25)

Jarodd a écrit :

J'ai précisément le même code :

body #page #footer {
	width : 100%;
	clear : both;
	margin : 0%;
	border : #000000 2px solid;
	color : rgb(0, 0, 0);
	background : gray;
}

Et c'est cela qui ne fonctionne pas.

Je ne vois pas le -moz-border-radius ?...

a écrit :
Pour les images, je n'aime pas la méthode : impossible de redimensionner le site.

Cela doit pourtant pouvoir se faire sans poser trop de soucis...

a écrit :

Pour la date de sortie de CSS3 je vais être très long à faire mon site, donc ça va je ne suis pas pressé

Tu pourras passer le relais à tes arrières petits enfants

Plus sérieusement, as-tu une page en ligne, ce serait plus simple

Cdt,
Sylvain
Modifié par 6l20 (16 Aug 2008 - 11:24)

a écrit :
Je ne vois pas le -moz-border-radius ?...

Bravo tu as trouvé l'origine du problème Le fond de #page se place bien dans l'arrondi, c'est celui de #footer qui déborde, normal vu que lui n'a pas le border-radius



Mais ce n'est pas très joli, je vais essayer de jouer avec une image de fond et un transparent pour la couleur. Merci pour ton aide