[jQuery] jQuery corner
Kino76
Messages postés
86
Date d'inscription
Statut
Membre
Dernière intervention
-
rodoplop Messages postés 77 Date d'inscription Statut Membre Dernière intervention -
rodoplop Messages postés 77 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai un petit soucie avec le script corner de jquery il ne fonctionne pas et je n'arrive pas a comprendre pourquoi...
voici mon code d'une page test
Merci d'avance pour vos réponses
j'ai un petit soucie avec le script corner de jquery il ne fonctionne pas et je n'arrive pas a comprendre pourquoi...
voici mon code d'une page test
<!doctype>
<html>
<head>
<script type="text/javascript" src="jquery.corner.js"></script>
<script>
$('#demo').corner();
</script>
<style>
#demo { background-color : red;}
</style>
</head>
<body>
<div id="demo">
<p> ici un bloc arrondi</p>
</div>
</body>
</html>
Merci d'avance pour vos réponses
10 réponses
je vais vous donnez le code complet de ma page et de mon css car cela ne marche pas chez moi
page principal
et mon css
page principal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<link rel="stylesheet" media="screen" type="text/css" title="CSS menu" href="CSS/menu.css" />
<head>
<title>Site Officiel du BAC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script>
$('#topnav').corner();
$('#topnav span').corner();
</script>
</head>
<body>
<div id="bac">
<div id="header">
<div id="banniere">
</div>
<div id="menu">
<ul id="topnav">
<li class="accueil"> <a href="index.php"> Accueil </a> </li>
<li>
<a href="index.php"> Le Club </a>
<span>
<a href="index.php?mod=histoire"> L'histoire </a>
<a href="index.php?mod=chiffre"> Le club en chiffre </a>
</span>
</li>
<li> <a href="index.php?mod=news"> les News </a> </li>
<li>
<a href="index.php"> Photos et Vidéos </a>
<span>
<a href="index.php?mod=photo">Photos</a>
<a href="index.php?mod=video"> Vidéos</a>
</span>
</li>
<li> <a href="index.php?mod=livre"> Livre D'or </a> </li>
<li> <a href="index.php?mod=sponsor"> Page des Sponsors</a> </li>
<li> <a href="index.php?mod=inscription"> Inscrivez-vous </a> </li>
</ul>
</div>
</body>
</html>
et mon css
#bac{margin-left : auto; margin-right : auto; width : 1000px; min-height : 820px;border : 1px solid black;}
#header { float : left; width : 1000px; height : 200px;}
#header #banniere{float : left ; width : 1000px; height : 150px;}
#header #menu{float : left ; width : 1000px; height : 50px;}
ul#topnav {margin: 0; padding: 0;float: left;width: 1000px;background-color : black;list-style: none;position: relative;font-size: 1.4em; -moz-border-radius-topright: 12px;-khtml-border-radius-topright: 12px;-webkit-border-top-right-radius: 12px;-moz-border-radius-topleft: 12px;-khtml-border-radius-topleft: 12px;-webkit-border-top-left-radius: 12px;}
ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #555;}
ul#topnav li a {padding: 10px 15px;display: block;color: #f0f0f0;text-decoration: none;}
ul#topnav li a:hover{color : black;}
ul#topnav li:hover { background-color: red; height: 50px;}
ul#topnav li span {float: left;padding: 15px 0;position: absolute;left: 0; top:50px;display: none; width: 1000px;background-color: red;color: #fff;-moz-border-radius-bottomright: 12px;-khtml-border-radius-bottomright: 12px;-webkit-border-bottom-right-radius: 12px;-moz-border-radius-bottomleft: 12px;-khtml-border-radius-bottomleft: 12px;-webkit-border-bottom-left-radius: 12px;}
ul#topnav li:hover span { display: block;}
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: none; color : black;}
ul#topnav .accueil{-moz-border-radius-topleft: 12px;-khtml-border-radius-topleft: 12px;-webkit-border-top-left-radius: 12px;}
ul#topnav .forum{text-align : center;width : 141px; -moz-border-radius-topright: 12px;-khtml-border-radius-topright: 12px;-webkit-border-top-right-radius: 12px;}
Pour utiliser cette effet, il faut utiliser la library jquery
Attention, toujours inclure la lib jquery avant jquery.corner.js
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script>
$('#demo').corner();
</script>
<style>
#demo { background-color : red;}
</style>
</head>
<body>
<div id="demo">
<p> ici un bloc arrondi</p>
</div>
</body>
</html>
Attention, toujours inclure la lib jquery avant jquery.corner.js
Merci beaucoup sa marche :)
Mais quand je veux incorporer plusieurs div plus rien ne marche et je ne comprend pas je vous donne mon code et vous explique
je voudrais crée un arondi sur topnav et sur les span a l'intérieur en ecrivant
cela ne marche pas et je ne comprend pas pourquoi...
merci
Mais quand je veux incorporer plusieurs div plus rien ne marche et je ne comprend pas je vous donne mon code et vous explique
<div id="principal"> <div id="header"> <div id="menu"> <ul id="topnav"> <li class="accueil"> <a href="index.php"> Accueil </a> </li> <li> <a href="index.php"> Le Club </a> <span> <a href="index.php?mod=histoire"> L'histoire </a> <a href="index.php?mod=chiffre"> Le club en chiffre </a> </span> </li> </ul> </div>
je voudrais crée un arondi sur topnav et sur les span a l'intérieur en ecrivant
$('#topnav').corner();
$('#topnav span').corner();
cela ne marche pas et je ne comprend pas pourquoi...
merci
Chez moi, votre code légérement modifier fonctionne
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script>
$('#topnav').corner();
$('#topnav span').corner();
</script>
<style>
#topnav { background-color : red;width:300px;height:50px;}
#topnav span{ background-color : green;margin-left:10px;}
</style>
</head>
<body>
<div id="principal">
<div id="header">
<div id="menu">
<ul id="topnav">
<li class="accueil"> <a href="index.php"> Accueil </a> </li>
<li>
<a href="index.php"> Le Club </a>
<span>
<a href="index.php?mod=histoire"> L'histoire </a>
</span>
<span>
<a href="index.php?mod=chiffre"> Le club en chiffre </a>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ta feuille de style doit être inclu dans la balise <head></head> et non juste au dessus
Je suppose que tes styles ne sont pas du tout appliqués non ?
en la mettant au bon endroit, cela fonctionne chez moi. J'ai bien mes arrondis.
Par contre dans ton CSS, tout tes définition de border-radius ne servent à rien car elles sont géré par ton js jquery.corner.js
Je suppose que tes styles ne sont pas du tout appliqués non ?
en la mettant au bon endroit, cela fonctionne chez moi. J'ai bien mes arrondis.
Par contre dans ton CSS, tout tes définition de border-radius ne servent à rien car elles sont géré par ton js jquery.corner.js
Cela a fonctionner d'un coup je suis incapable de dire pourquoi
parcontre il m'affiche un fond noir sous les arrondi comment puis je le retirer?
parcontre il m'affiche un fond noir sous les arrondi comment puis je le retirer?
Si ça n'a pas été pris en compte de suite, cela est peut être dû à un problème de cache.
Par contre je ne voit pas ce que tu veux dire par 'il m'affiche un fonc noir sous les arrondi'
aurais tu une capture d'écran à montrer pour mieux comprendre ?
Par contre je ne voit pas ce que tu veux dire par 'il m'affiche un fonc noir sous les arrondi'
aurais tu une capture d'écran à montrer pour mieux comprendre ?
http://hpics.li/4ee0c20
voila le lien de l'image
sur les arrondi a gauche on voit que deriere l'arrondi il y a un fond noir
voila le lien de l'image
sur les arrondi a gauche on voit que deriere l'arrondi il y a un fond noir