Bordures arrondies

Le
Pascale
Un problème qui paraîtra trivial pour beaucoup, j'imagine, mais je suis
très très perplexe.

Je voudrais arrondir les coins d'une boîte, tout simplement, au lieu
d'avoir un cadre rectangulaire.
Me référant à http://www.w3.org/TR/css3-background/#the-border-radius

je tente d'utiliser tout simplement la fonction border-radius.
J'ai donc un bout de CSS qui dit :

DIV.ann
{
font-weight: bold;
color: green; padding: 10px;
border: solid 5px green;
border-radius: 20px;
max-width: 700px;
margin: auto;
}

Le problème c'est que :
- Seul Opera semble comprendre ce border-radius, IE8 et FF ne le voient
pas, donc l'intérêt paraît assez réduit.
- W3C me couine dessus ! « La propriété border-radius n'existe pas en CSS
niveau 2.1. mais existe en : 20px 20px » (si je mets border-radius: 20px
20px, ça ne marche pas non plus).

Visiblement, j'ai raté quelque chose

--
Pascale
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Pascale
Le #22037211
Pascale :

Visiblement, j'ai raté quelque chose...



Ou alors je suis en avance au niveau des CSS (pour une fois !) (-:

En attendant mieux, j'ai rajouté un -moz-border-radius pour qu'au moins
l'arrondi soit visiblement avec les navigateurs Gecko... et j'ai viré
l'icône « CSS valide » !

--
Pascale
SAM
Le #22037201
Le 4/28/10 12:07 PM, Pascale a écrit :
Pascale :

Visiblement, j'ai raté quelque chose...





Marche pô avec Opera 9.6

Ou alors je suis en avance au niveau des CSS (pour une fois !) (-:

En attendant mieux, j'ai rajouté un -moz-border-radius pour qu'au moins
l'arrondi soit visiblement avec les navigateurs Gecko... et j'ai viré
l'icône « CSS valide » !




et tu peux rajouter :

-khtml-border-radius: 20px;

pour Safari et autres webkit

J'aurais pourtant juré que Safari.4 connaissait border-radius ? !

--
sm
docanski
Le #22037191
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Pascale ecrit ce qui suit en ce 28.04.2010 11:38 :

Je voudrais arrondir les coins d'une boîte, tout simplement, au lieu
d'avoir un cadre rectangulaire.
je tente d'utiliser tout simplement la fonction border-radius.
Le problème c'est que :
- Seul Opera semble comprendre ce border-radius, IE8 et FF ne le voient
pas, donc l'intérêt paraît assez réduit.



IE ne le voit effectivement pas et c'est normal : ce "navigateur" n'a
jamais été à la hauteur. Pour la majorité des navigateurs utilisant le
moteur gecko (attention : pas tous !), il suffit de faire un
-moz-border-radius avec la même valeur pour obtenir l'effet désiré.

- W3C me couine dessus ! « La propriété border-radius n'existe pas en CSS
niveau 2.1. mais existe en : 20px 20px » (si je mets border-radius: 20px
20px, ça ne marche pas non plus).
Visiblement, j'ai raté quelque chose...



Si je ne me trompe, border-radius est prévu pour CSS3 ... qui est
annoncé depuis 3 ou 4 ans au moins. De toute façon, ne te préoccupe pas
des machins édités à Redmond, utilise tes border-radius comme si de rien
n'était mais en ajoutant le moz- qui ne sert actuellement qu'à forcer
l'utilisation de cette propriété sur les navigateurs de la famille
Mozilla tels FF et Seamonkey sous Mac et Ouindo$e, Epiphany, Galeon et
Iceweazel sous Linux.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Bruno Baguette
Le #22037181
Le 28/04/10 11:38, Pascale a écrit :
Un problème qui paraîtra trivial pour beaucoup, j'imagine, mais je suis
très très perplexe.

Je voudrais arrondir les coins d'une boîte, tout simplement, au lieu
d'avoir un cadre rectangulaire.



Bonjour !

A ce sujet, la lecture de cet article devrait vous intéresser :

Très cordialement,

--
Bruno Baguette
pdorange
Le #22037171
SAM
> Ou alors je suis en avance au niveau des CSS (pour une fois !) (-:



CSS 3 (non validé)

> En attendant mieux, j'ai rajouté un -moz-border-radius pour qu'au moins
> l'arrondi soit visiblement avec les navigateurs Gecko... et j'ai viré
> l'icône « CSS valide » !
>

et tu peux rajouter :

-khtml-border-radius: 20px;
pour Safari et autres webkit



C'est à priori plutot -webkit-border-radius: 20px;

<http://www.css3.info/modules/compatibility-table-backgrounds-and-border
s-module/>

Ca marche avec Safari...

--
Pierre-Alain Dorange
Ce message est sous licence Creative Commons "by-nc-sa-2.0"
Pascale
Le #22037161
SAM news:4bd82145$0$27586$:

Marche pô avec Opera 9.6



Mais avec Opera 10.51, si (:

-khtml-border-radius: 20px;

pour Safari et autres webkit



Oui, j'ai fait ça entretemps. J'ai rajouté

J'ai donc :
border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;

J'aurais pourtant juré que Safari.4 connaissait border-radius ? !



Je ne sais pas, je reconnais que je ne l'ai testé qu'une fois que j'ai eu
rajouté tout ça, donc difficile de dire si border-radius lui parle ou pas.
De toutes façons, je ne peux pas me permettre de ne tenir compte que des
toutes dernières versions.

J'ai essayé de trouver une solution pour IE, mais vu que je suis douée
comme une buse, ça a beau avoir l'air simple, j'ai quand même des
problèmes.
Je tente d'appliquer la solution d'Alsacréations :
http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-
images.html

qui utilise behavior: url(border-radius.htc);

J'ai donc maintenant :
border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
behavior: url(scripts/border-radius.htc);

J'ai téléchargé le fichier en question ici :
http://curved-corner.googlecode.com/files/border-radius.htc

Ça marche... si on veut... Les coins sont arrondis, mais ma div se retrouve
avec un horrible fond noir !
Dans l'exemple donné par Alsacréations, il n'y a bien sûr pas d'horrible
fond noir, et pourtant je ne vois pas de différence entre leur border-
radius.htc et le mien (je n'ai rien bricolé).

Pour mon info, c'est quoi, cette extension htc ? Des scripts spéciaux pour
IE ?

--
Pascale
Pascale
Le #22037151
docanski news:hr98i1$v2j$:

IE ne le voit effectivement pas et c'est normal : ce "navigateur" n'a
jamais été à la hauteur. Pour la majorité des navigateurs utilisant le
moteur gecko (attention : pas tous !), il suffit de faire un
-moz-border-radius avec la même valeur pour obtenir l'effet désiré.



Ben oui, IE, c'est... IE... mais on ne peut pas faire l'impasse dessus,
trop de gens l'utilisent, y compris des versions antédiluviennes.

Si je ne me trompe, border-radius est prévu pour CSS3 ... qui est
annoncé depuis 3 ou 4 ans au moins. De toute façon, ne te préoccupe
pas des machins édités à Redmond, utilise tes border-radius comme si
de rien n'était mais en ajoutant le moz- qui ne sert actuellement qu'à
forcer l'utilisation de cette propriété sur les navigateurs de la
famille Mozilla tels FF et Seamonkey sous Mac et Ouindo$e, Epiphany,
Galeon et Iceweazel sous Linux.



Ben oui, mais si ça pouvait marcher AUSSI pour IE (au moins IE8),
j'aimerais mieux. Tout ça, c'est de la mise en forme, et on peut toujours
dire qu'on s'en fiche si un cadre est arrondi ou carré, mais bon, quand
même (:

--
Pascale
Sergio
Le #22037141
Bruno Baguette a écrit :
Le 28/04/10 11:38, Pascale a écrit :
Un problème qui paraîtra trivial pour beaucoup, j'imagine, mais je
suis très très perplexe.

Je voudrais arrondir les coins d'une boîte, tout simplement, au lieu
d'avoir un cadre rectangulaire.



Bonjour !

A ce sujet, la lecture de cet article devrait vous intéresser :



J'aime bien l'introduction :
"Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même."

Pourquoi les têtes d'œufs du W3C n'ont pensé à border-radius que pour les CSS3 ? Pour qu'on puisse reconnaître le "vrai" webmaster
qui sait bien trafiquer les CSS ?

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Pascale
Le #22037131
Bruno Baguette news:hr99dn$307f$:

A ce sujet, la lecture de cet article devrait vous intéresser :
<http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-ima
ges.html>



Oui, d'ailleurs je suis tombée dessus en faisant mes petites recherches (-:
Me reste à comprendre pourquoi ce fichu border-radius.htc me donne un fond
noir.
Normalement, cette div n'a pas de fond particulier.

--
Pascale
SAM
Le #22037121
Le 4/28/10 2:25 PM, Pierre-Alain Dorange a écrit :
SAM
Ou alors je suis en avance au niveau des CSS (pour une fois !) (-:





CSS 3 (non validé)

En attendant mieux, j'ai rajouté un -moz-border-radius pour qu'au moins
l'arrondi soit visiblement avec les navigateurs Gecko... et j'ai viré
l'icône « CSS valide » !



et tu peux rajouter :

-khtml-border-radius: 20px;
pour Safari et autres webkit



C'est à priori plutot -webkit-border-radius: 20px;



à priori, sans doute, mais -khtml fonctionne chez moi.
(même avec iCab.4)




et avec -webkit ça roule aussi (iCab Safari)

-khtml / -webkit même combat ?
une histoire de compatibilité ascendante ?

--
sm
Publicité
Poster une réponse
Anonyme