[jQuery] jQuery corner

Fermé

Kino76 Messages postés 85 Date d'inscription mardi 26 juillet 2011 Statut Membre Dernière intervention 15 décembre 2011 - Modifié par Kino76 le 19/09/2011 à 11:19
rodoplop Messages postés 77 Date d'inscription vendredi 16 septembre 2011 Statut Membre Dernière intervention 6 juillet 2012 - 19 sept. 2011 à 17:10

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

<!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

A voir également:

[jQuery] jQuery corner
Code de corner ps3 - Forum Jeux vidéo
Jquery onclick ✓ - Forum Javascript
Jquery refresh div ✓ - Forum Javascript
Corner street avis - Forum Consommation & Internet
Jquery .map ✓ - Forum Javascript

10 réponses

Réponse 1 / 10

Kino76 Messages postés 85 Date d'inscription mardi 26 juillet 2011 Statut Membre Dernière intervention 15 décembre 2011 3
19 sept. 2011 à 12:09

je vais vous donnez le code complet de ma page et de mon css car cela ne marche pas chez moi

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;}

Réponse 2 / 10

rodoplop Messages postés 77 Date d'inscription vendredi 16 septembre 2011 Statut Membre Dernière intervention 6 juillet 2012 12
19 sept. 2011 à 11:38

Pour utiliser cette effet, il faut utiliser la library jquery

<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

Réponse 3 / 10

Kino76 Messages postés 85 Date d'inscription mardi 26 juillet 2011 Statut Membre Dernière intervention 15 décembre 2011 3
19 sept. 2011 à 11:46

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

<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

Réponse 4 / 10

rodoplop Messages postés 77 Date d'inscription vendredi 16 septembre 2011 Statut Membre Dernière intervention 6 juillet 2012 12
19 sept. 2011 à 11:55

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

Réponse 5 / 10

rodoplop Messages postés 77 Date d'inscription vendredi 16 septembre 2011 Statut Membre Dernière intervention 6 juillet 2012 12
19 sept. 2011 à 15:04

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

Réponse 6 / 10

Kino76 Messages postés 85 Date d'inscription mardi 26 juillet 2011 Statut Membre Dernière intervention 15 décembre 2011 3
19 sept. 2011 à 15:20

et bien meme en l'incluant dans la balise <head> je n'est aucun arrondie...

Réponse 7 / 10

Kino76 Messages postés 85 Date d'inscription mardi 26 juillet 2011 Statut Membre Dernière intervention 15 décembre 2011 3
19 sept. 2011 à 15:24

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?

Réponse 8 / 10

rodoplop Messages postés 77 Date d'inscription vendredi 16 septembre 2011 Statut Membre Dernière intervention 6 juillet 2012 12
Modifié par rodoplop le 19/09/2011 à 15:31

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 ?

Réponse 9 / 10

Kino76 Messages postés 85 Date d'inscription mardi 26 juillet 2011 Statut Membre Dernière intervention 15 décembre 2011 3
19 sept. 2011 à 15:37

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

Réponse 10 / 10

rodoplop Messages postés 77 Date d'inscription vendredi 16 septembre 2011 Statut Membre Dernière intervention 6 juillet 2012 12
19 sept. 2011 à 17:10

Le problème semble ne venir que de IE, je n'ai pas le temps de regarder plus en détail pour le moment.

Je repasse par là dès que je peux

sinon juste pour info : IE ne gère pas la propriété hover sur d'autre élement que les lien "a".

Discussions similaires

Le site corner street est il fiable?

jquery: refresh element enfant après ajax

code pes 2009 ps3

dribbles

jQuery & Regex

Discussions similaires

Newsletters