Coins arrondis

Bonjour,

J'ai suivi les information de l'article http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html

J'ai effectivement obtenu des coins arrondis sur mes blocks. Mais, j'ai des images dans un block limité en taille avec une barre déroulante. Quand je fais défiler les informations de ce block et suite à l'ajout de
<script type="text/javascript" src="script/roundies.js"> </script> les images restent fixes et ne défilent plus avec le texte.

Pour info, je travaille sur la page suivante : http://www.energies-renouvelables-49.fr/index.html

Merci pour vos conseils.

Bonjour et bienvenue

Je ne vois aucun coin arrondi sur la page en question (testé sur FF et Chrome).

Bonjour,
j'ai essayé de faire fonctionner ce tutoriel sans succès avec IE8

(...)

Suite du message supprimée par un modérateur. Merci d'ouvrir votre propre sujet si votre message n'est pas une réponse au sujet en cours.
Modifié par Florent V. (05 Nov 2009 - 10:06)

Bonjour, j'ai constaté 2 soucis avec Internet Explorer .

1. les coins arrondis mettent du temps à arriver, ce qui fait qu'on voit d'abord les coins carrés...

2. Sous IE8, lorsqu'il y a une image de fond comme dans l'exemple d'Alsacreations, celle-ci n'apparait pas, sauf si l'on utilise le mode "compatibilité"...

Est-ce qu'il y aurait des solutions à ces problèmes ?

Salut,

Msg pour Raphaël : je n'ai pas encore mis en ligne les modifications pour les cions arrondis car je ne suis pas satisfait du résultat. Merci d'avoir essayé !

A +

Salut,

matbow a écrit :
je n'ai pas encore mis en ligne les modifications pour les cions arrondis car je ne suis pas satisfait du résultat. Merci d'avoir essayé !

Inutile de mettre un lien vers une page qui ne contient pas le problème dans ce cas, et ça prête à confusion. Il serait par contre bien plus utile de mettre en ligne la page concernée, sur laquelle il serait possible de constater le problème. Sans pour autant remplacer la page en ligne, mais juste en la dupliquant. Sans ça je pense que ton problème restera sans solution, du moins de la part des membres d'Alsacréations.

Bonjour,

Ok, je prends note et vous envoie un lien vers une page de test. J'ai dupliqué l'accueil du site : http://www.energies-renouvelables-49.fr/test/index.html

J'ai glissé dans le CSS la propriété border radius. Quand on ouvre avec Mozilla firefox, il me semble que tous les coins sont OK. Concernant la propriété roundies pour IE 8, je l'ai uniquement appliquée au bandeau (div entête). J'observe 3 problèmes sur IE8 :

1) Il faut accepter l'activation du script roundies, ce qui force les visiteurs à réaliser une manipulation de plus,

2) Les contours des coins ne sont pas aussi propre qu'avec la propriété border radius,

3) Le logo de l'entreprise disparait ?

Merci d'avance pour vos conseils

Bonjour,

Je viens de voir la nouvelle version du tutoriel sur les coins arrondis. Je vais mettre en place l'extensions HTC. j'avais en effet des soucis avec les bordures en utilisant roundies.js

Pour information, la propriété border radius fonctionne très bien sur Mozilla Firefox. Par contre j'ai plus de difficultés avec Netscape (parfois les coins apparaissent et parfois non) : www.energies-renouvelables-49.fr

peut-être y at-il également une solution pour Netscape ?

A +

Bonjour à tous,

J'ai également choisi de mettre en place le script roundies pour obtenir des coins arrondis sur différents éléments de ma page (div et input) sur la famille des IE (6 à 8).
J'ai rencontré des effets de bords plutôt gênants.
J'ai l'impression que le script n'aime ni les padding, ni les margin, (ni les bordures ?) et qu'il les enlève tout simplement... (elles disparaissent lors du traitement)

La solution serait-elle d'avoir un niveau d'imbrication supplémentaire (hum hum pas glop du tout) avec une div conteneur sans marges (padding, margin) sur laquelle est appliquée le script, et une autre div de contenu sur laquelle on peut mettre bordures et marges ?

Quelqu'un à t'il pu résoudre ces problèmes ?

Une piste envisagée serait de modifier le script pour éviter ce comportement à la source (plutôt que de patcher après coup) mais je ne suis pas expert en javascript je ne sais pas bien ce qu'il fait...

Quelqu'un, une idée ?
Modifié par ivanovic (15 Mar 2010 - 10:12)

Bonjour,

j'ai testé la solution avec l'extension HTC pour IE mais sans grand succès.

Pour les éléments sans div imbriqués, comme mon pied de page, aucun problème sur IE les coins arrondis et les bordures sont vraiment propres. Mais pour le corps du texte qui contient plusieurs div imbriqués (j'ai récupéré un gabarit à hauteur variable sur alsacréation) gros problème. Il a fallu joué sur tous les margin intérieurs pour obtenir un résultat peu satisfaisant :

1) apparition d'un fond noir pendant quelques micro secondes à chaque chargement de page
2) Raccourcissement de la ligne séparant le corps du menu en haut et bas (là où j'avais ajouté un margin)
3) temps de chargement assez long qui fait d'abord apparaitre les coins carrés avant de les arrondir.

Conclusion après l'essai de roundies puis de l'extension htc, je reste sur ma faim en laissant les coins carrés sur IE.

Je tenterais bien de caler les images des coins, il semble que c'est une bonne vieille méthode imparable, mais mon image principal de fond est une photo et mes largeurs / hauteurs de taille de corps varient donc les alentours des coins ne sont jamais exactement les mêmes.

Quelqu'un a-t'il une bonne solution à proposer ?

Merci
Modifié par matbow (16 Mar 2010 - 23:04)

J'ai lu le tutorial sur les roundies, seulement je ne comprends pas où exactement faut-il mettre: <!--[if lte IE 8]> <script type="text/javascript" src="script/roundies.js"> </script><![endif]-->
En effet, quand je le mets entre <head></head> roudies.js n'est pas appelé.
Merci de votre aide

Bonjour,

J'ai réussi à faire fonctionner le script précédemment. Je crois qu'il faut :

1) être sûr d'avoir le bon chemin d'accès et avoir insérer roundies.js dans le répertoire script.
2) avoir ajouté les instructions DD_roundies.addRule
3) Appliqué la class="arrondi" sur les div choisis

Chez moi cela fonctionnait. Mais j'ai un problème graphique en raison des bordures que j'utilise.

A +