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

**[ZiP]** · 20/07/2010, 16h28

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mon code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**danielhagnoul** · 20/07/2010, 22h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**[ZiP]** · 21/07/2010, 00h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**danielhagnoul** · 21/07/2010, 09h22

Bonjour.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**[ZiP]** · 21/07/2010, 10h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**[ZiP]** · 21/07/2010, 13h38

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager