Border-radius.htc - Version imprimable +- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr) +-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html) +--- Forum : Graphisme (https://forum.cmsmadesimple.fr/forum-9.html) +--- Sujet : Border-radius.htc (/thread-460.html) |
Border-radius.htc - Cesariongelvez - 08/06/2010 Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~Bonjour Je développe le site suivant : www.salon-atlantica.com. Dans ce site j'ai utilisé une adaptation CSS3 pour arrondir des bords: sur ma CSS: -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; behavior: url(border-radius.htc); Sur FF et tous les explorateurs ok. Mais sur IE il y a un problème, rien ne s'affiche. Pour IE la ligne correspondante est le "behavior", mais IE ne le reconait pas. Avez vous des idées? Merci. Border-radius.htc - Jean le Chauve - 08/06/2010 http://fetchak.com/ie-css3/ (Issues and Workarounds) Sinon, essaie en changeant le chemin : behavior: url(../border-radius.htc); ou behavior: url(/border-radius.htc); ou en mettant le chemin absolu et en dernier recours, placer la css dans la head : {literal} <!--[if gte IE 6]> <style type="text/css"> .mesvaleurs, #mavaleur1, #mavaleur2 { behavior: url(scripts/ie-css3.htc); } </style> <![endif]--> {/literal} Border-radius.htc - Jean le Chauve - 08/06/2010 Et un lien pour connaître toutes les propriétés css acceptées pour les différentes versions d'IE : http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx Border-radius.htc - Jean le Chauve - 08/06/2010 Tu nous donnerais le lien de la page ayant div id="conteneurExpo" et div id="conteneurExpo2", ce serait déjà plus simple de t'aider. Modifier le caractère non-utf-8 qui empêche la vérification de la validité de la structure xhtml : <li class="noimages"><a id="fpss-container_next" href="javascript:void(0);" onclick="showNext();clearSlide();" title="Suivant">»</a></li> <li class="noimages"><a id="fpss-container_playButton" href="javascript:void(0);" onclick="playButtonClicked();return false;" title="Dmarrer/mettre en pause le slide">Pause</a></li> Et tu devrais penser à réduire le poids de ta page : Poids de la page - http://www.salon-atlantica.com/ Documents (1 fichier) 29 Ko http://www.salon-atlantica.com/ 29 Ko Images (7 fichiers) 474 Ko http://www.cesargelvez.com/fdhpa/atlantica//fpss/slideshows/myslydeshow/images/salon.jpg 162 Ko http://www.salon-atlantica.com/uploads/images/Logos_partenaires/fdhpa-17-2web.jpg 97 Ko http://www.cesargelvez.com/fdhpa/atlantica//fpss/slideshows/myslydeshow/images/salon2.jpg 62 Ko http://www.cesargelvez.com/fdhpa/atlantica//fpss/slideshows/myslydeshow/images/salon3.jpg 62 Ko http://www.salon-atlantica.com/uploads/images/banner/ca3.jpg 58 Ko http://www.cesargelvez.com/fdhpa/atlantica//fpss/slideshows/myslydeshow/images/hebergements.jpg 28 Ko http://www.salon-atlantica.com/uploads/images/favico.ico 5 Ko Objects (0 fichiers) Scripts (3 fichiers) 42 Ko (56 Ko sans compression) http://www.cesargelvez.com/fdhpa/atlantica//fpss/engines/jquery-comp.js 29 Ko http://www.google-analytics.com/ga.js 10 Ko (25 Ko sans compression) http://www.cesargelvez.com/fdhpa/atlantica//fpss/engines/jquery-fpss-comp.js 3 Ko Feuilles de styles (7 fichiers) 30 Ko http://www.salon-atlantica.com/stylesheet.php?cssid=39&mediatype=screen 12 Ko http://www.salon-atlantica.com/stylesheet.php?cssid=34&mediatype=screen 6 Ko http://www.cesargelvez.com/fdhpa/atlantica//fpss/templates/Uncut/template_css.php?w=450&h=308&sw=200 4 Ko http://www.salon-atlantica.com/stylesheet.php?cssid=31&mediatype=screen 3 Ko http://www.salon-atlantica.com/stylesheet.php?cssid=35&mediatype=screen 2 Ko http://www.salon-atlantica.com/stylesheet.php?cssid=46&mediatype=screen 2 Ko http://www.salon-atlantica.com/stylesheet.php?cssid=30&mediatype=print 1 Ko Total 576 Ko (590 Ko sans compression) Border-radius.htc - Cesariongelvez - 09/06/2010 Jean. Merci énormément de prendre le temps de répondre. Tu as répondu sans vouloir à une autre question que j'avais (celle du slider qui empêchait la validation) J'ai testé sur la base de la css les modifications d'accès que t'as eu la gentillesse de me proposer, sans succès malheureusement. Voici les pages où le problème est référencé. http://www.salon-atlantica.com/Exposants/Equipements/electromenager Ce qui me parait bizarre c'est que j'ai utilisé la même méthode pour un site que j'ai développé et dans ce site je n'ai eu aucun problème... Merci. Border-radius.htc - Jean le Chauve - 09/06/2010 De nouveau, corrige le xhtml, tu as défini deux fois l'id conteneurExpo. C'est sans doute de là que provient ce problème. Et modifie META en minuscule (ligne 20). Et tes revendeurs électro ne vont pas être heureux d'être spammé grâce à toi. Crypte les adresses mails. Border-radius.htc - Cesariongelvez - 09/06/2010 Merci JLC. J'ai validé ma page. Pour le Id ConteneurExpo en fait il s'agit de deux divs differents: div#conteneurExpo { background-color:#b71a52; height:auto; color:white; padding: 0.5em; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; behavior: url(/border-radius.htc); } div#conteneurExpo2 { background-color:#db7498; height:auto; color:white; padding: 0.5em; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; behavior: url(/border-radius.htc); } Comme tu vois il y a conteneurExpo et conteneurExpo2. Je me suis posé la question si le fait de définir deux ID avec des noms presque exacte serait un problème. J'ai soulevé aussi le problème de l'affichage des adresses mail. Cependant le rédacteur n'est pas formé sur HTML. J'ai trouvé cette solution la: http://aspirine.org/emailcode.php Si j'adapte cette solution sur mon site, je devrais donc, dans l'éditeur de texte html ajouter {literal}{/literal}? exemple : [code exemple] <div id="conteneurExpo"> <p><img style="float: left; margin: 5px; border: 0px;" title="sfpl" src="uploads/images/exposants/Equipements/bando_site.gif" alt="sfpl" width="100" height="41" />SFPL</p> <p>Tél : 02 38 13 02 46</p> <p>Mail :{literal} <script type="text/javascript" language="javascript"> <!-- var c7="";for(var pl=0;pl<352;pl++)c7+=String.fromCharCode(("4~0=.VZ??X$-0E4~0=+RZMX+RYOPQX+RHHF.VHZp20\',%K$0-+`&~0`-\"#EE?av<ZCM@Awl\\\\ZlJlIHJPN@JQ@Mw\\OCyDNhlCM@Aw7aH<yDGOJltahM@KG<>@biliBf\\3\\hNP=NOMbkcceaHJIH<yDG7PjjnjHJIAJPMIyDNN@PM|||7Pjjl@>J|HahM@KG<>@bi|iBf\\%\\hNP=NOMbkccea7a\\ZJIHJ{PN@J{POw\\OCyDN{hC{M@Aw7a7a\\x}J{IO<>O@UZHJyDvi<xahM@KG<>@bi{iBf\\\'\\hNP=NOMbkcc?K!&~0`-\"#^2E+RFJEOVFHM6P$FBETGSHRPFHM6OMFX#4~*E.VF".charCodeAt(pl)-(-69+98)+77-14)%(172-77)+0x20);document.write(eval(c7)) //--> </script> {/literal}</p> <p style="text-align: right;">CP : 85208 Fontenay le Comte</p> <p style="text-align: right;"><a href="http://www.sfpl.fr">www.sfpl.fr</a></p> </div> Merci! Border-radius.htc - Jean le Chauve - 09/06/2010 Non, tu as deux fois deux mêmes id dans le GABARIT : <div id="conteneurExpo"> <p><img style="float: left; margin: 5px; border: 0px;" title="sfpl" src="uploads/images/exposants/Equipements/bando_site.gif" alt="sfpl" width="100" height="41" />SFPL</p> <p>Tél : 02 38 13 02 46</p> <p>Mail : sfpl-info@wanadoo.fr</p> <p style="text-align: right;">CP : 85208 Fontenay le Comte</p> <p style="text-align: right;"><a href="http://www.sfpl.fr">www.sfpl.fr</a></p> </div> <p> </p> <p> </p> <div id="conteneurExpo"><img style="float: left; margin: 5px; border: 0px;" title="sovematic" src="uploads/images/exposants/Environnement Aménagement/logo_sovematic_bleu.jpg" alt="sovematic" width="100" height="68" /> <p> </p> <p>SOVEMATIC</p> <p>Tel : 05 57 54 44 44</p> <p>Mail : <a href="mailtoovematic@hotmail.fr">sovematic@hotmail.fr</a></p> <p style="text-align: right;">CP : 33100 Bordeaux</p> <p style="text-align: right;"><a href="http://www.sovematic.com">www.sovematic.com</a></p> <p style="text-align: right;"> </p> </div> <br /> <div id="conteneurExpo2"> <p>LAVOMATIQUE France</p> <p>Tel : 02 31 74 66 69</p> <p style="text-align: right;">CP : 14000 Caen</p> </div> <br /> <div id="conteneurExpo2"> <p>EUROTEX</p> Et tu as une grosse erreur ici : <div id="conteneurExpo"><img style="float: left; margin: 5px; border: 0px;" title="sovematic" src="uploads/images/exposants/Environnement Aménagement/logo_sovematic_bleu.jpg" alt="sovematic" width="100" height="68" /> Environnement Aménagement : il ne faut JAMAIS utiliser des caractères accentués ou des espaces dans les noms de dossiers et de fichiers. Border-radius.htc - Jean le Chauve - 09/06/2010 Et pour les mails, c'est bien plus simple, smarty est ton copain : {mailto address="me@example.com" encode="javascript"} http://www.smarty.net/manual/fr/language.function.mailto.php Border-radius.htc - Cesariongelvez - 19/07/2010 JLC Je dois reprendre ce post bien que un peu vieux, le problème subsiste. J'ai remplacé les ID pour des class mais sur IE les pages continuent à beuger. Voici le lien de la page http://www.salon-atlantica.com/Exposants/Environnement/abris-de-jardin Border-radius.htc - Jean le Chauve - 19/07/2010 Essaie la dernière version du .htc : http://curved-corner.googlecode.com/files/border-radius.htc Je l'ai testée sur mon pc sous IE6 et ça fonctionne. Border-radius.htc - Cesariongelvez - 20/07/2010 J'ai changé la dernière version et tjrs le même problème. J'ai tenté aussi de mettre le chemin absolut vers le site de google... rien. Aussi j'ai tenté de changer les permissions du fichier. rien. Le plus fou ce que je me sers du "border-radius.htc" dans un autre site et je n'ai eu aucun problème... Par contre je reflechis à une option, etant donné que ton niveau est très haut tu pourrais me dire si je me trompe ou pas. J'ai vu quelque part dans le forum qu'il est possible d'inserer des balises smarty au niveau du css. Serait il possible donc: De faire avec le"border-radius.htc" une balise utilisateur en mettant ([litteral][/litteral] Et après faire appel de cette balise au niveau de la css? Qu'en penses tu? NB je colle le code du "border-radius.htc" pour info. NB2. Le comportement je je retrouve au niveau du site est que la page se charge, elle affiche les infos, mais au moment de charger le br.htc les éléments où cela est affecté disparaissent. [litteral] --Do not remove this if you are using-- Original Author: Remiz Rahnas Original Author URL: http://www.htmlremix.com Published date: 2008/09/24 Changes by Nick Fetchak: - IE8 standards mode compatibility - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage Published date : 2009/11/18 <public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" /> <script type="text/javascript"> // findPos() borrowed from http://www.quirksmode.org/js/findpos.html function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); } return({ 'x': curleft, 'y': curtop }); } function oncontentready(classID) { if (this.className.match(classID)) { return(false); } if (!document.namespaces.v) { document.namespaces.add("v", "urnchemas-microsoft-com:vml"); } this.className = this.className.concat(' ', classID); var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] || this.currentStyle['-webkit-border-radius'] || this.currentStyle['border-radius'] || this.currentStyle['-khtml-border-radius']) / Math.min(this.offsetWidth, this.offsetHeight), 1); var fillColor = this.currentStyle.backgroundColor; var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); var strokeColor = this.currentStyle.borderColor; var strokeWeight = parseInt(this.currentStyle.borderWidth); var stroked = 'true'; if (isNaN(strokeWeight)) { strokeWeight = 0; strokeColor = fillColor; stroked = 'false'; } this.style.background = 'transparent'; this.style.borderColor = 'transparent'; // Find which element provides position:relative for the target element (default to BODY) var el = this; var limit = 100, i = 0; while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) { el = el.parentElement; i++; if (i >= limit) { return(false); } } var el_zindex = parseInt(el.currentStyle.zIndex); if (isNaN(el_zindex)) { el_zindex = 0; } //alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position); var rect_size = { 'width': this.offsetWidth - strokeWeight, 'height': this.offsetHeight - strokeWeight }; var el_pos = findPos(el); var this_pos = findPos(this); this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y; this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x; var rect = document.createElement('v:roundrect'); rect.arcsize = arcSize +'px'; rect.strokecolor = strokeColor; rect.strokeWeight = strokeWeight +'px'; rect.stroked = stroked; rect.style.display = 'block'; rect.style.position = 'absolute'; rect.style.top = this_pos.y +'px'; rect.style.left = this_pos.x +'px'; rect.style.width = rect_size.width +'px'; rect.style.height = rect_size.height +'px'; rect.style.antialias = true; rect.style.zIndex = el_zindex - 1; var fill = document.createElement('v:fill'); fill.color = fillColor; fill.src = fillSrc; fill.type = 'tile'; rect.appendChild(fill); el.appendChild(rect); var css = el.document.createStyleSheet(); css.addRule("v\\:roundrect", "behavior: url(#default#VML)"); css.addRule("v\\:fill", "behavior: url(#default#VML)"); isIE6 = /msie|MSIE 6/.test(navigator.userAgent); // IE6 doesn't support transparent borders, use padding to offset original element if (isIE6 && (strokeWeight > 0)) { this.style.borderStyle = 'none'; this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight; this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight; } if (typeof(window.rounded_elements) == 'undefined') { window.rounded_elements = new Array(); if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; } window.onresize = window_resize; } this.element.vml = rect; window.rounded_elements.push(this.element); } function window_resize() { if (typeof(window.rounded_elements) == 'undefined') { return(false); } for (var i in window.rounded_elements) { var el = window.rounded_elements[i]; var strokeWeight = parseInt(el.currentStyle.borderWidth); if (isNaN(strokeWeight)) { strokeWeight = 0; } var parent_pos = findPos(el.vml.parentNode); var pos = findPos(el); pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y; pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x; el.vml.style.top = pos.y +'px'; el.vml.style.left = pos.x +'px'; } if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); } } </script> [/literal] Border-radius.htc - Jean le Chauve - 20/07/2010 On ne va pas se casser la tête pour trouver ton erreur, il existe bien d'autres moyens d'arrondir les bords : http://www.cssplay.co.uk/boxes/snazzy.html Code : <div id="xsnazzy"> Code : #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;} Et ici, tu as plein d'autres possibilités de faire de jolies bordures, pur css : http://www.cssplay.co.uk/boxes/krazy.html |