11548 sujets

JavaScript, DOM et API Web HTML5

Roundies.js crise d'arrondis !!

Bonjour à tous,
Voilà, j'ai un petit problème avec le paramétrage de roundies.js. Certaines div que je veux voir arrondies, ne fonctionnent pas sur IE. Après maints et vains essais de toute sorte, je vous appelle « au secours ! » Smiley sweatdrop .

Extraits de mes fichiers :
Dans ma CSS :
/* panneaux */
#panneaux{float:left; position:relative; left:120px; border:none; top:0px; background:none; width:520px; height:460px; margin:0; padding:0;}
/* 5 div sans « id » dans le panneau principal */
#panneaux div{-moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px;
border:2px solid #fc0;
display:none;
color:#000;
margin-top:-17px; margin-left:0; margin-right:0; padding:10px;
background:#fff; height:450px;}
#note{height:auto; width:340px; padding:20px; font:normal 12px arial; color:#333; text-align:left;
top:200px;
left:300px;
position:absolute;
border:1px solid #fff;
background:#dfedaf;
z-index:1200;
font:normal 8pt verdana;
-moz-border-radius:30px; -webkit-border-radius:30px; -o-border-radius:30px; border-radius:30px;
}
#note h2{padding:0; font:bold 13px arial; color:#337365; margin:0;}
#out{margin:10px 0 0 0; width:100px;
padding:7px;
background:#699;
font:bold 12px "century gothic",arial,verdana;
color:#fff;
text-align:center;
-moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; border-radius:5px;}
#out a, #out a:hover, out a:visited{
color:#fff;
font:bold 12px "century gothic",arial,verdana;
text-decoration:none;}
- - - - - - -
Dans «  roundies.js », j'ai inscrit :

DD_roundies.addRule('#boite', '10px');
DD_roundies.addRule('#panneaux div', '10px');
<!-- Seule la premiere div prend le style, les 4 autres div dans #panneaux ne prennent pas le format imposé dans la CSS. J'ai essayé toutes les combinaisons possibles, en plantant parfois les autres navigateurs où tout allait à merveille... ! La logique mathématique aurait voulu que toutes les div apparentées à #panneaux soient identiques. Or, elles n'ont ni couleur, ni bordure ni arrondi... -->
DD_roundies.addRule('#onglets li a', '10px');
DD_roundies.addRule('#onglets li a:hover', '10px');
DD_roundies.addRule('#note', '30px');
<!-- #note est un 'MM_showHideLayers', quand il est inscrit ici, il apparait même sans être appellé, dès l'ouverture de la page, mais sans son contenu -->
DD_roundies.addRule('#out', '5px');
- - - - -
Extrait de la page :
<div id="panneaux">
<!--- 4 autres 'panes' avant -->
<div style="display:none; position:absolute; top:-17px;">
<h2>Vidéos et Audio</h2>
<p>En partenariat avec un <a href="partenariat.htm" title="Nos partenaires institutionnels et professionnels">vidéaste professionnel</a>, nous réalisons, grâce à un matériel numérique de pointe, vos films commerciaux, promotionnels ou des reportages.</p>
<p>Outre leurs formats NTSC/PAL/SECAM pour la télévision,<span class="aligngauche"><img src="images/flash.jpg"></span>
ces films peuvent être ensuite convertis aux divers formats multimédia
vidéo du Web - FLV, SWF, AVI, MPEG -, et intégrés facilement dans les
pages de votre site grâce à des lecteurs Flash*.</p>
<p>Agrémenter par un fond sonore un discours, sonoriser une page Web, quoi
de plus courant. Nous effectuons l'enregistrement, la création, le montage
des musiques, sons d'ambiance aux formats MP3, OGG, en règle générale.<br />
<span>*Les lecteurs vidéo ou audio sont, au choix, simples ou multiples
avec playlist XML.</span></p>
<br />
<p><a href="#" onClick="MM_showHideLayers('note','','show')">Exemple d'intégration de
vidéo avec un lecteur simple</a><br />
<br />
<a href="#" onClick= '' ''>Exemple d'intégration audio avec lecteur multiple</a></p>
</div>
</div>

Le problème est-il dans la CSS ou dans Roundies ?
Merci tout plein à toutes et tous ! Smiley smile Smiley cligne
Bonjour,

J'ai bien testé PIE.htc, hélas en vain (j'ai pourtant lu CSS Pie) car le reste de mes div arrondies ne l'est plus. En fait, c'est peut-être le mélange avec certains JQuery (??) qui bloque des trucs.

Mais peut-être quelqu'un aurait une solution toujours avec roundies (il est possible que j'écrive mal mes paramètres: exemple : DD_roundies.addRule('div #panneaux', '10px'); au lieu de DD_roundies.addRule('#panneaux div', '10px'); Smiley ohwell )

Merci, bon dimanche. Smiley smile
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît dans le menu du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour Carokassee27,

je voudrais juste faire une remarque : je connais, pour l'avoir lu, le tutotrial de Raphaël sur les coins arrondis des divs et donc sur le fichier "DD_roundies.JS" pour IE.

Or, la syntaxe fournie par Raphaël est inscrite noir sur blanc :

Mettre l'ajout de paramètres à la fin du fichier JS et sous la forme suivante :

DD_roundies.addRule('div.lenomdeladiv', '10px');


Bref, mot-à-mot, ça ferait :
parenthèse ouverte simple cote DIV point nomdeladiv simple cote virgule simple cote dimension en pixels simple cote parenthèse fermée

C'est sommes toutes très différent de ce que tu marques toi : pas de dièse, pas d'espace dans les noms de fichiers, pas de noms de la div avant la mention de la div elle-même, etc...

Je serais donc tenté de dire :
- Bien inscrire les ajouts de paramètres à la toute fin du fichier "DD_roundies.js".
- Bien vérifier son lien dans l'entête de la page où on l'appelle.
- Et surtout donc, inscrire les ajouts dans la stricte syntaxe du tutorial.

Cordialement
Modifié par Neum (14 Feb 2012 - 22:04)
Sujet clos
Aller à