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 :
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).
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 » !
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 » !
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 4/28/10 12:07 PM, Pascale a écrit :
Pascale <chaton.tigre+ écrivait news:mouflette- :
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 ? !
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 ? !
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
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/
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/
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 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 : <http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html>
Très cordialement,
-- Bruno Baguette
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 :
<http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html>
> 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;
> 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;
> 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;
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
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
SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> écrivait
news:4bd82145$0$27586$ba4acef3@reader.news.orange.fr:
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
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 ?
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
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
docanski écrivait 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 (:
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 (:
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
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 : <http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html>
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
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 :
<http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html>
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
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 : <http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html>
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
Bruno Baguette écrivait 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
Bruno Baguette <bruno.baguette@invalid.invalid> écrivait
news:hr99dn$307f$1@cabale.usenet-fr.net:
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.
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 4/28/10 2:25 PM, Pierre-Alain Dorange a écrit :
SAM wrote:
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
C'est à priori plutot -webkit-border-radius: 20px;
à priori, sans doute, mais -khtml fonctionne chez moi. (même avec iCab.4)
<http://www.css3.info/preview/rounded-border/>
et avec -webkit ça roule aussi (iCab Safari)
-khtml / -webkit même combat ? une histoire de compatibilité ascendante ?
-- sm
Le 4/28/10 2:25 PM, Pierre-Alain Dorange a écrit :
SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
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
C'est à priori plutot -webkit-border-radius: 20px;
à priori, sans doute, mais -khtml fonctionne chez moi.
(même avec iCab.4)
<http://www.css3.info/preview/rounded-border/>
et avec -webkit ça roule aussi (iCab Safari)
-khtml / -webkit même combat ?
une histoire de compatibilité ascendante ?
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)
<http://www.css3.info/preview/rounded-border/>
et avec -webkit ça roule aussi (iCab Safari)
-khtml / -webkit même combat ? une histoire de compatibilité ascendante ?
