plugin Corner : bords arrondis dans un div déjà avec bords arrondis ?

Version imprimable

20/07/2010, 16h28
[ZiP]

plugin Corner : bords arrondis dans un div déjà avec bords arrondis ?
Bonjour,

J'utilise la dernière version de jQuery Corner et je n'arrive pas à mettre les bords arrondis à un div contenu dans un autre div à qui j'ai déjà mis les bords arrondis...

Mon code JS :
Code:

1 2 3 4 5 6 7 8 $(document).ready( function() { $('#centre').corner(); $('#identification').corner(); } );
Mon code HTML :
Code:

1 2 3 4 <div id="centre"> <div id="identification"><a href="javascript:VerificationIdentification();">Identification</a></div> </div>
Savez-vous pourquoi et comment corriger ou contourner le problème ?

Merci,
ZiP

Bonsoir.

La dernière version 2.1.1 : http://github.com/malsup/corner
La page de démonstration : http://jquery.malsup.com/corner/

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		#centre {
			position:relative;
			width:400px;
			height:400px;
			margin:12px;
			padding:6px;
			border:2px solid grey;
		}
		#identification {
			position:relative;
			width:300px;
			height:300px;
			margin:12px;
			padding:6px;
			border:2px solid red;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>	
	<script charset="utf-8" src="../lib/jquery-corner-2.1.1.js"></script>	
 	<script>
		$(function(){
			$("#centre").corner();
			$("#identification").corner();			
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="centre">
			<div id="identification">
				<a href="">Identification</a>
			</div>
		</div>
	</div>
</body>  
</html>

Bonsoir,

Votre exemple fonctionne cependant, je suis toujours bloqué car je ne trouve pas la raison du non fonctionnement de mon code.

Le voici ici simplifié au maximum :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
	<head>
		<title>test</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<style type="text/css" media="screen">
			body
			{
				font-family			: Verdana, Arial, Helvetica, sans-serif;
				font-size			: 10px;
			}
 
			#centre
			{
				background-color	: #FFFFFF;
				border				: 1px solid #E2001A;
				height				: 210px;
				left				: 50%;
				margin-left			: -180px;
				margin-top			: -105px;
				position			: absolute;
				top					: 50%;
				width				: 360px;
			}
 
			#logo
			{
				border-right		: 1px solid #E2001A;
				height				: 200px;
				padding				: 5px;
				width				: 141px;
			}
 
			#identification
			{
				font-weight			: bold;
				left				: 195px;
				position			: absolute;
				top					: 127px;
				width				: 121px;
			}
 
			#identification a:link, a:visited
			{
				background-color	: #F5F5F5;
				background-position	: 6px 4px;
				background-repeat	: no-repeat;
				border				: 1px solid #DEDEDE;
				color				: #529214;
				display				: block;
				height				: 25px;
				line-height			: 24px;
				text-decoration		: none;
				text-indent			: 30px;
			}
 
			#identification a:hover
			{
				background-color	: #E6EFC2;
				border				: 1px solid #C6D880;
				color				: #529214;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
		<script type="text/javascript">
			$(document).ready(
				function()
				{
					$('#centre').corner();
					$('#identification').corner();
				}
			);
		</script>
 
		<div id="centre">
			<div id="logo"></div>
			<div id="identification"><a href="#">Identification</a></div>
		</div>
	</body>
</html>

Le div "centre" est arrondi correctement mais pas "identification".

Je souhaiterai arrondir les coins du bouton d'identification.

Merci,
ZiP

21/07/2010, 09h22
danielhagnoul
Bonjour.

Citation:

Envoyé par [ZiP]

Votre exemple fonctionne cependant, je suis toujours bloqué car je ne trouve pas la raison du non fonctionnement de mon code.

Dans ce cas, il convient de chercher la différence entre mon exemple et votre code, on trouve alors très rapidement que vous n'avez pas mis une bordure autour de l'élément.
Code:

1 2 3 4 5 6 7 8 9 #identification { font-weight : bold; left : 195px; position : absolute; top : 127px; width : 121px; border: 1px solid blue; }

Bonjour,

Effectivement, je n'avais pas mis la propriété border, cet oubli est corrigé.

Par contre, je pense que les différentes propriétés que j'utilise pour la mise en forme de mon bouton rentrent en conflit avec le jQuery Corner.

Voici mon code corrigé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
	<head>
		<title>test</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<style type="text/css" media="screen">
			body
			{
				font-family			: Verdana, Arial, Helvetica, sans-serif;
				font-size			: 10px;
			}
 
			#centre
			{
				background-color	: #FFFFFF;
				border				: 1px solid #E2001A;
				height				: 210px;
				left				: 50%;
				margin-left			: -180px;
				margin-top			: -105px;
				position			: absolute;
				top					: 50%;
				width				: 360px;
			}
 
			#logo
			{
				border-right		: 1px solid #E2001A;
				height				: 200px;
				padding				: 5px;
				width				: 141px;
			}
 
			#identification
			{
				border				: 1px solid #DEDEDE;
				font-weight			: bold;
				left				: 195px;
				position			: absolute;
				top					: 127px;
				width				: 121px;
			}
 
			#identification a:link, a:visited
			{
				background-color	: #F5F5F5;
				background-position	: 6px 4px;
				background-repeat	: no-repeat;
				border				: 1px solid #DEDEDE;
				color				: #529214;
				display				: block;
				height				: 25px;
				line-height			: 24px;
				text-decoration		: none;
				text-indent			: 30px;
			}
 
			#identification a:hover
			{
				background-color	: #E6EFC2;
				border				: 1px solid #C6D880;
				color				: #529214;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
		<script type="text/javascript">
			$(document).ready(
				function()
				{
					$('#centre').corner();
					$('#identification').corner();
				}
			);
		</script>
 
		<div id="centre">
			<div id="logo"></div>
			<div id="identification"><a href="#">Identification</a></div>
		</div>
	</body>
</html>

Merci,
ZiP

J'ai résolu mon problème en utilisant la fonction .css de jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
	<head>
		<title>test</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<style type="text/css" media="screen">
			body
			{
				font-family			: Verdana, Arial, Helvetica, sans-serif;
				font-size			: 10px;
			}
 
			#centre
			{
				background-color	: #FFFFFF;
				border				: 1px solid #E2001A;
				height				: 210px;
				left				: 50%;
				margin-left			: -180px;
				margin-top			: -105px;
				position			: absolute;
				top					: 50%;
				width				: 360px;
			}
 
			#logo
			{
				border-right		: 1px solid #E2001A;
				height				: 200px;
				padding				: 5px;
				width				: 141px;
			}
 
			#identification
			{
				background-color	: #F5F5F5;
				border				: 1px solid #DEDEDE;
				color				: #529214;				
				cursor				: pointer;
				font-weight			: bold;
				height				: 25px;
				left				: 195px;
				line-height			: 25px;
				position			: absolute;
				text-align			: center;
				top					: 127px;
				width				: 121px;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
		<script type="text/javascript">
			$(document).ready(
				function()
				{
					$('#centre').corner();
					$('#identification').corner();
 
					$('#identification').hover(
						function()
						{
							$('#identification').css('background-color', '#E6EFC2');
							$('#identification').css('border', '1px solid #C6D880');
						},
						function()
						{
							$('#identification').css('background-color', '#F5F5F5');
							$('#identification').css('border', '1px solid #DEDEDE');
						}
					);
				}
			);
		</script>
 
		<div id="centre">
			<div id="logo"></div>
			<div id="identification">Identification</div>
		</div>
	</body>
</html>

Cordialement,
ZiP