Appliquer un arrondi a une <div>

bien le salut a vous
donc voila je viens de lire le tuto pour les arrondi des bloc ( <div> ) et je trouve des difficultés a l'appliquer en pratique sur mes bloque?????

[#]premiere etape on doit telecharger un fichier et le copier sur le dossier public.html c ca ?

Pour mettre en application Roundies, commencez par le télécharger et copiez le fichier roundies.js (8ko) sur votre hébergement.

[#]secundo une petite explication concernant le comentaire conditionnel je ne comprend pas ou je dois le mettre " es-ce dans l'entete de la page xhtml contenant le bloc au quel on doit appliquer l'arrondi?

Puis, à l'aide d'un commentaire conditionnel judicieusement placé dans l'entête de votre page, liez roundies.js à votre document HTML.

Le code HTML suivant ne va s'appliquer qu'à Internet Explorer (versions égales ou plus anciennes que IE8) et il va récupérer et appliquer roundies.js que nous avons placé dans un répertoire nommé "script" :

<!--[if lte IE 8]> <script type="text/javascript" src="script/roundies.js"> </script><![endif]-->A

[#]troisiément je ne comprend pas ou dois je mettre l'instruction DD_roundies.addRule ( je veux dire sur quel fichier)?

a présent, il faut indiquer quels seront les éléments qui bénéficieront des coins arrondis. Pour cela, vous devez ajouter une instruction DD_roundies.addRule, soit à la fin du fichier roundies.js, soit dans le code de votre page (de préférence avant la fin de l'élément body, après l'appel à roundies.js).

Voici les règles que nous avons mis en place pour notre page d'exemple :

DD_roundies.addRule('div.arrondi', '10px'); DD_roundies.addRule('h1', '10px'); DD_roundies.addRule('a', '8px');La première règle indique que nos éléments HTML <div> de classe arrondi bénéficieront d'un arrondi de 10px; la seconde s'applique éléments de titre (<h1>) et la dernière ligne génère un arrondi autour des liens hypertextes (<a>). Il est également possible de cumuler les éléments sélectionnés au sein de la même règle.

Côté HTML, les éléments sont structurés ainsi (exemple pour le bloc <div>) :

<div class="arrondi">
<p>ici un bloc arrondi</p>
</div>

amicalement adel.
Modifié par adel01 (01 May 2010 - 08:52)

Salut,

Pour les arrondis, tu as plusieurs solutions. La plus simple concerne bien sûr celle que l'on utilise avec la propriété border-radius, mais elle n'est interprétée correctement que par Firefox à l'heure actuelle.
Pour IE8, je n'ai pas utilisé le script Roundies, sans doute parce que comme toi, j'ai eu du mal à comprendre.
J'ai donc utilisé la technique suivante, notamment pour mes titres de niveau h1 sur mon site :

#header h1 {
font-family: Times New Roman, Verdana, Tahoma, Arial Narrow;
font-size: 24pt;
color: #fff;
background-color: #82a5c0;
text-align: center;
padding: 0;
width: 70%;
margin: 2% auto;
top: 1em;
-moz-border-radius: 20px; /*pour mozilla*/
-webkit-border-radius: 20px; /*pour les moteurs webkit (genre google chrome si je ne m'abuse)*/
-khtml-border-radius: 20px; /*pour safari*/
border-radius: 20px;
behavior: url(/script/border-radius.htc); /*là c'est un lien vers un fichier que tu auras téléchargé gratuitement et qui va agir sur l'interprétation du navigateur IE, sachant que IE6 n'en tient pas compte, il ne sait pas faire, et que je ne sais pas comment il se comporte sur IE7, car je n'ai pas pu le tester*/
}

Tu as une explication assez claire sur le site, voici l'article sur lequel je me suis basée pour faire les miens.
Tuto Alsa pour les roundies avec le fichier .htc

Navrée de ne pas t'apporter de soluce pour le javascript auquel tu pensais, mais je ne l'avais pas bien saisi non plus.

Mag a écrit :
mais elle n'est interprétée correctement que par Firefox à l'heure actuelle.

... et Safari, et Chrome.

Mag a écrit :

-webkit-border-radius: 20px; /*pour les moteurs webkit (genre google chrome si je ne m'abuse)*/
-khtml-border-radius: 20px; /*pour safari*/

La deuxième ligne n'est pas utile. C'est Safari qui a été le premier à utiliser le moteur webkit, qui a été ensuite repris par Chrome.
Modifié par phpdoesnotcare (01 May 2010 - 19:28)

Pour Safari et Chrome, ce n'est que partiellement interprété
Là où sur Firefox je vais avoir des onglets ou des angles biscornus, je n'aurais qu'un ovale régulier sur Safari et Chrome. Idem pour Opéra d'ailleurs.
Merci pour les précisions phpdoesnotcare, ça va me servir pour le coup.
Modifié par Mag (01 May 2010 - 19:44)

Mag a écrit :
Pour Safari et Chrome, ce n'est que partiellement interprété
Là où sur Firefox je vais avoir des onglets ou des angles biscornus, je n'aurais qu'un ovale régulier sur Safari et Chrome.

J'arrive bien à avoir des "angles biscornus" sous Safari aussi (et donc sous Chrome, sans aucun doute). Ils ont dû faire une mise à jour alors.

Mag a écrit :
Idem pour Opéra d'ailleurs.

Opéra supporte les angles arrondis ?

mais moi j'utilise IE8.

Hello,

adel01 a écrit :

[#]premiere etape on doit telecharger un fichier et le copier sur le dossier public.html c ca ?

Pour mettre en application Roundies, commencez par le télécharger et copiez le fichier roundies.js (8ko) sur votre hébergement.

Tu parles de "public.html". C'est une fichier html, tu ne peux pas y ajouter le fichier roundies.js. Il faut ajouter roundies.js dans le même répertoire que ton fichier html (ou ailleurs si tu maîtrises les chemins)

adel01 a écrit :

[#]secundo une petite explication concernant le comentaire conditionnel je ne comprend pas ou je dois le mettre " es-ce dans l'entete de la page xhtml contenant le bloc au quel on doit appliquer l'arrondi?

Puis, à l'aide d'un commentaire conditionnel judicieusement placé dans l'entête de votre page, liez roundies.js à votre document HTML.

En effet, les commentaires conditionnels HTML sont à ajouter dans l'entête de la page HTML (donc entre les balises <head> et </head>)

adel01 a écrit :

[#]troisiément je ne comprend pas ou dois je mettre l'instruction DD_roundies.addRule ( je veux dire sur quel fichier)?

a présent, il faut indiquer quels seront les éléments qui bénéficieront des coins arrondis. Pour cela, vous devez ajouter une instruction DD_roundies.addRule, soit à la fin du fichier roundies.js, soit dans le code de votre page (de préférence avant la fin de l'élément body, après l'appel à roundies.js).

Je pense que je peux difficilement préciser plus que ce qui est dit : "soit à la fin du fichier roundies.js, soit dans le code de votre page (HTML)". Qu'est ce que tu ne comprends pas là dedans ?

Au fait, as-tu décortiqué les codes sources des exemples donnés ?

"soit dans le code de votre page " il parle de la page xhtml dans laquelle se trouve le bloque a arrondir ?
reste que pour la solution d'IE8 j'ai pas recu de reponse ........

adel01 a écrit :
reste que pour la solution d'IE8 j'ai pas recu de reponse ........

En fait, je crois que c'est nous qui ne comprenons pas exactement pas "la solution d'IE8".
Que veux-tu dire exactement ? Que les arrondis ne fonctionnent pas sur IE8 ?
Dans ce cas c'est tout à fait normal puisque tu n'arrives pas à appliquer roundies et que roundies est justement fait pour créer des arrondis sur IE (toutes versions).

Je crois qu'on en arrive à un point où on va rester coincés des deux côtés si on n'arrive pas à voir en ligne ce que tu as réussi à faire pour le moment.

adel01 a écrit :
"soit dans le code de votre page " il parle de la page xhtml dans laquelle se trouve le bloque a arrondir ?

Oui, je parle bien de la page HTML où se trouve le ou les blocs à arrondir.
Modifié par Raphael (03 May 2010 - 07:42)

A ce sujet je suis pas certain que -khtml-border-radius soit encore nécessaire depuis la ou les dernières versions de Konqueror. A vérifier.

Je déplace ce topic dans le bon salon.
Modifié par Hermann (03 May 2010 - 08:53)

phpdoesnotcare a écrit :
J'arrive bien à avoir des "angles biscornus" sous Safari aussi (et donc sous Chrome, sans aucun doute). Ils ont dû faire une mise à jour alors.

Opéra supporte les angles arrondis ?

Sous Chrome, les angles sont arrondis tout "bêtement", sous Opera, j'ai aussi des angles arrondis de base, et sous Safari, j'ai une espèce d'aplat à droite, comme si le menu était caché par mon div "main" et un arrondi à gauche de chaque onglet.
Il n'y a vraiment que sous Firefox que j'ai ce que je désire, à savoir arrondi en haut à gauche et en bas à droite, et à angle droit dans les deux autres coins de chaque onglet de menu
Ou alors c'est moi qui n'ai pas fait suffisamment de mises à jour