28172 sujets

CSS et mise en forme, CSS3

[résolu] Roundies.js

Salut à tous,

J'essai de mettre en oeuvre le tuto sur les coins arrondis pour les div...
Pas de problème avec le css3 mais la mise en oeuvre du javascript (roundies.js),pour palier les "faiblesses" de ie6 et ie7, est une autre paire de manches et cela de fonctionne pas Smiley ohwell .

En premier lieu j'appelle "roundies.js
<script type="text/javascript" src="js/roundies.js"></script>


Ensuite je mets la condition :
<!--[if lte IE 8]> <script type="text/javascript" src="js/roundies.js"> </script><![endif]-->


Et voici le code css :

div.arrondi {
	    width: 760px;
        padding: 10px;
        background: #9999FF;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
		DD_roundies.addRule('div.arrondi', '10px'); 
		
      }
div.arrondi_gauche {
	    width: 240px;
		height:auto;
		margin-left: 15px;
		margin-top:-15px;
        padding: 10px;
        background: #9999FF;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
		DD_roundies.addRule('div.arrondi_gauche', '10px');
      }


Et pour terminer un exemple de mes div

<div class="arrondi_gauche">     
    <p>la couleur de l'arrière-plan de cet élément div est affichée sur la largeur du contenu uniquement. Si vous préférez une ligne de séparation, placez une bordure sur le côté gauche de l'élément div #mainContent si vous savez qu'il possèdera toujours plus de contenu que l'élément div #sidebar1. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    </div><!-- fin de div arrondi -->
  </div><!-- fin de #sidebar1 -->
  <div id="mainContent">
    <div class="arrondi">
      <p>Vous pouvez refuser de voir la vérité en face : <img src="images/lion.jpg" width="70" height="70" alt="lion" /><br /><br /></p>
      <p>Choisir  de ne rien faire : <img src="images/panda.jpg" width="70" height="70" alt="panda" /><br /><br /></p>
      <p>Ou avoir confiance en l'avenir : <img src="images/belette.jpg" width="70" height="70" alt="belette" /><br /><br /></p>
      <p>Prendre votre envol !! : <img src="images/heron.jpg" width="70" height="70" alt="heron" /><br /><br /></p>
      <p>Et surfer sur la vague du changement : <img src="images/surf.jpg" width="70" height="70" alt="surf"/></p>
      </div><!-- fin de div arrondi -->


J'espère avoir été clair.

D'avance merci

@+

Naje83
Modifié par naje83 (23 Apr 2010 - 18:07)
Super ton lien Smiley smile

Je me suis permis de mettre ce sujet dans css parce que le tuto est dans la même section Smiley cligne

@+

Naje83
Salut!
Les codes "DD_roundies.addRule('div.arrondi', '10px');" etc. devraient plutôt se trouvé dans la page html dans une balise script plutôt que dans le CSS.

Relit bien le tuto Smiley cligne
Sujet clos
Aller à