Bonjour à tous(tes),
J'ai crée une portlet dans laquelle, il y à des bords arrondis. J'ai utilisé le css suivant pour les navigateur tel que Mozilla, google..
Code : CSS
petit problème cela ne fonctionne pas sous IE donc je souhaiterai les mettre avec du javascript. Sur le net j'ai trouver la fonction roundies, mais je ne parviens pas à le mettre en place...
Pourriez vous m'aider à comprendre comment faire pour que cela fonctionne sous IE svp
Voici le code html de m'a page :
Code : HTML
Je ne comprends pas comment rajouter DD_roundies.addRule.... j'ai bien dis (il me semble) qu'il doit être appliqué sur ma div portlet mais cela ne fonctionne pas...
Pourriez vous m'aidez svp ?
Cordialement.
Modifié par lolo. (02 Feb 2011 - 09:15)
J'ai crée une portlet dans laquelle, il y à des bords arrondis. J'ai utilisé le css suivant pour les navigateur tel que Mozilla, google..
Code : CSS
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-border-top-left-radius: 5px; /* pour Chrome */
-webkit-border-top-right-radius: 5px; /* pour Chrome */petit problème cela ne fonctionne pas sous IE donc je souhaiterai les mettre avec du javascript. Sur le net j'ai trouver la fonction roundies, mais je ne parviens pas à le mettre en place...
Pourriez vous m'aider à comprendre comment faire pour que cela fonctionne sous IE svp
Voici le code html de m'a page :
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if lte IE 8]>
<script type="text/javascript" src="script/roundies.js"></script>
<![enif]-->
<script>
DD_roundies.addRule('#portlet, '10px 10px 0 0');
</script>
<title>Portlet rose</title>
<style type="text/css">
#portlet {
width: 573px;
height:189px;
margin: auto;
color:white;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5 px;
padding-right: 0px;
border: 1px solid #89a;
text-decoration: none;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
border-color: #cc0098;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
}
#wapper {
margin:auto;
width: 562px;
}
#col-gauche {
width: 245px;
height: 179px;
color:black;
float:left;
}
#col-droite {
width: 301px;
height: 169px;
color: #ffb8cf;
float:right;
background-color:#cc0098;
border: 5px solid #89a;
text-decoration: none;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
border-color: #cc0098;
padding-top: 10px;
}
#col-droite a img {
text-decoration:none;
border:none;
}
.avatar {
float:left;
}
.plus {
float:left;
margin-bottom: 15px;
margin-right: 7px;
}
.cadeau {
clear:both;
float:left;
margin-bottom: 15px;
margin-right: 7px;
}
.attention {
clear:both;
float:left;
}
#block1gauche {
width: 225px;
height:50px;
margin-bottom: 19px;
}
#block2gauche {
clear:both;
width: 250px;
height:46px;
margin-bottom: 3px;
}
#block2gauche a {
color:#cc0098;
;
text-decoration:underline;
font-weight:bold;
line-height: 20px;
padding-right: 10px;
}
input {
width:95px;
margin-right: 6px;
color: #cc0098;
font-weight:bold;
text-align:center;
border: 1px solid #c7c7c7;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-border-top-left-radius: 5px; /* pour Chrome */
-webkit-border-top-right-radius: 5px; /* pour Chrome */
}
.ok {
width: 20px;
height:20px;
background-image:url(images/ok.gif);
border:none;
}
.titre {
font-size: 17px;
font-weight:bold;
color:#cc0098;
}
.indentifiez {
font-size: 13px;
font-weight:bold;
line-height: 15px;
}
.intitule {
font-size: 12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
line-height: 14.6px;
color:white;
}
.souhaiter {
line-height: 12px;
padding-bottom: 14px;
}
.zone-texte {
width: 233px;
float:right;
}
h2 {
margin:auto;
float:left;
line-height: 5px;
padding-right: 2px;
color:white;
}
</style>
</head>
<body>
<div id="portlet">
<div id="wapper">
<div id="col-gauche">
<div id="block1gauche"> <img class="avatar"src="images/avatar.gif" width="49" height="48" alt="avatar" /><span class="titre">Déjà membre ?</span><br />
<span class="indentifiez">Identifiez-vous et retrouvez<br />
votre espace Club Carte U</span> </div>
<div id="block2gauche">
<input name="votre pseudo" type="text" size="12" maxlength="25" value="votre pseudo" />
<input name="votre pseudo" type="text" size="12" maxlength="25" value="******" />
<input class="ok" type="button" value="" />
<a href="#"> Mot de passe oublié ?</a><a href="#">Devenir membre du club</a></div>
<img src="images/surlignement.gif" width="246" height="6" alt="surlignement" /> Connaitre votre nombre de points et tous vos avantages, recevoir sur demande la newsletter, découvrir les Produits Points Bonus du mois, réserver vos cadeaux en ligne...</div>
<div id="col-droite"> <a href="#"><img class="plus" src="images/+550.gif" width="50" height="40" alt="+500" /></a>
<div class="zone-texte">
<div class="souhaiter"><span class="intitule">Vous souhaitez gagner 550 points ? </span><br />
<h2>.</h2>
Vite, parrainez un(e) ami(e) et faites<br />
lui découvrir le Club Carte U</div>
</div>
<a href="#"><img class="cadeau" src="images/cadeau.gif" width="47" height="35" alt="cadeau" /></a>
<div class="zone-texte"><span class="intitule">Pas encore membre du club Carte U ?</span> <br />
<div class="souhaiter">
<h2>.</h2>
Vite je m¹inscris, c¹est gratuit et je gagne 150<br />
points bonus </div>
</div>
<a href="#"><img class="attention"src="images/visuel-3.gif" width="49" height="36" alt="attention" /> </a>
<div class="zone-texte"><span class="intitule">Vous n'avez pas votre carte de fidélité ?</span> <br />
<div class="souhaiter">
<h2>.</h2>
Remplissez vite le bulletin à déposer à l¹accueil <br />
de votre magasin U et recevez 150 points<br />
en cadeau de bienvenue</div>
</div>
</div>
</div>
</div>
</body>
</html>
Je ne comprends pas comment rajouter DD_roundies.addRule.... j'ai bien dis (il me semble) qu'il doit être appliqué sur ma div portlet mais cela ne fonctionne pas...
Pourriez vous m'aidez svp ?
Cordialement.
Modifié par lolo. (02 Feb 2011 - 09:15)