Forums Développement Multimédia

Aller au contenu

Rectangles arrondis : du nouveau mais rien de parfait ?

CODE HTML CSS

20 réponses à ce sujet

#1 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 12 August 2010 - 00:04 AM

Bonjour,

J'ai essayé de faire une recherche qui me permette de faire un rectangle à coins arrondis sans devoir passer par l'ancien tableau à 9 cellules avec (4 images).

Ce que je cherche : Une solution plus rapide qui permette de conserver la transparence du fond de mes arrondis. Que je puisse facilement en faire qu'un ou plusieurs arrondis à mon rectangle.
Enfin, que cette technique soit bien entendu par les principaux navigateurs

Ce que j'ai déjà trouvé :
- une solution automatique mais qui multiplie les div et qui fonctionne encore avec des images png : http://www.roundedcornr.com/
- chez alsacreation, le code "border-radius" idéal en théorie mais il ne fonctionne pas sur... Explorer 8 !!!
- Le script Roundies.js, assez laborieux à mettre en place et destiné à... Explorer 8 !!!
... et il y a les extensions .htc pour Internet Explorer mais si les arrondis réguliers fonctionnent, impossible de varier (ou de supprimer) des arrondis d'un même rectangle (bug uniquement dans Explorer 8 !!!)

Encore une galère html ??? :neutral:

#2 matt-murdock

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6851 messages

Posté 12 August 2010 - 11:10 AM

pas mieux..

a+

#3 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 12 August 2010 - 12:40 PM

Il y a aussi cette solution : http://css3pie.com/
Donc CSS3, mais avec un support IE en incluant un fichier .htc

#4 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 13 August 2010 - 21:33 PM

neolao, cette solution ne permet pas d'avoir des coins arrondis différents sur chaque angle d'un rectangle mais elle est vraiment très bien, je pense que je l'utiliserai très prochainement. Merci

#5 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 13 August 2010 - 21:37 PM

En fait si tu peux, tu dois le border-radius peut être décomposé en plusieurs valeurs

#6 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 13 August 2010 - 22:08 PM

Si par exemple j'ai :

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: : 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc)


Si je modifie border-radius, ex :
border-radius: : 5px 20px 0 5px;

Ca ne change rien...

#7 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 13 August 2010 - 22:33 PM

sur quel navigateur ?

#8 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 13 August 2010 - 22:34 PM

Sur Safari pour commencer...

#9 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 13 August 2010 - 22:38 PM

et là ça marche ? http://css-infos.net...hot/l741f8.html

Edit: J'en ai fait un autre avec le PIE.htc http://css-infos.net...hot/l741i3.html

Modifié par neolao, 13 August 2010 - 22:40 PM.


#10 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 13 August 2010 - 22:51 PM

Sur Safari, ça marche, merci ! mais sur Explorer 8 : aucun arrondi...

Sinon, j'ai réalisé que j'avais en plus mis deux fois ":" dans ma ligne border radius... sans commentaire

Du coup, je me demande si la version CS5 de Dreamweaver intègre tous ces nouveaux paramètres css, la CS4 ne gère ni dégradé ni ombré...

#11 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 13 August 2010 - 22:53 PM

En fait, je n'ai pas IE, je me suis fié à ce qui était marqué sur leur site.
Ils ont fait un fichier PIE.htc exprès pour IE6-8.

Est-ce que tu vois un arrondi sur leur site ? c'est peut-être moi qui l'a mal intégré.

Modifié par neolao, 13 August 2010 - 22:54 PM.


#12 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 13 August 2010 - 22:57 PM

Je vais tester et je reviens

#13 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 13 August 2010 - 23:01 PM

Ok, il faut que le PIE.htc soit sur le même domaine j'pense.
Là j'ai testé avec browserlab.adobe.com, ça passe : http://css-infos.net...hot/l742gm.html

#14 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 13 August 2010 - 23:12 PM

Ton exemple marche parfaitement mais le mien non

J'ai testé en plaçant le fichier PIE.htc dans le même dossier que ma page html mais pas de résultat...

#15 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 13 August 2010 - 23:20 PM

Bon, si ma page marche et pas la tienne, c'est qu'il y a juste un ptit soucis de syntax ou de chemin.
J'pense que tu vas trouver d'où ça vient. Sinon montre moi ta page.

#16 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 13 August 2010 - 23:24 PM

Voici les deux fichiers qui me servent de test sur IE8, merci de jeter un coup d'œil pour en finir :neutral:

#17 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 13 August 2010 - 23:25 PM

quels fichiers ? :neutral:

#18 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 13 August 2010 - 23:25 PM

Voici les deux fichiers qui me servent de test sur IE8, merci de jeter un coup d'œil pour en finir :neutral:

Fichier(s) joint(s)

  • Fichier joint  Test.zip   12.06 Ko   40 téléchargement(s)


#19 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 13 August 2010 - 23:30 PM

c'est
url(PIE.htc)
au lieu de
url(/PIE.htc)
je pense

#20 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 13 August 2010 - 23:34 PM

Tu penses bien ! c'était effectivement ce petit bug, ça fonctionne donc parfaitement. Reste à savoir ce que ça donne sur IE6 et 7...
Dans tous les cas, merci encore pour cette fin (de code) heureuse ! :neutral:

#21 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 13 August 2010 - 23:36 PM

d'après le site, ils ont fait le PIE.htc pour IE 6 à 8
mais vaut mieux tester :neutral:



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP