jQuery Corner plugin

Version imprimable

17/11/2009, 15h27
benthebest

jQuery Corner plugin
Bonjour,

j'utilise ce plugin pour arrondir les angles de certaines div sous IE.

Le problème est que je n'arrive pas à créer un bord de 1 px malgré le
Code:

1 2 style="border: 1px solid red;"
sur mon div.

En gros j'aimerai faire un div aux bords arrondis de fond blanc et de contour rouge de 1 px.

Avez-vous une idée sur la façon de procéder?

Merci
17/11/2009, 15h38
julioooo
Bonjour,
Il suffit d'utiliser
Code:

1 2 $("#maDiv").corner("keep");

Merci de ta réponse

Ça n'a pas l'aire de marcher... Voici mon code html :
Code:

1 2 3 4 5 6 <div style="margin-left:100px; margin-top:100px;"> <div id="id_toto" style="width:500px; height:500px; border:1px solid red;"> <div style="margin-top:15px;text-align:center;">toto</div> </div> </div>
et mon code js:
Code:

1 2 3 4 5 $(function() { $("#id_toto").corner("keep").corner("round 25px") });
ça marche sous FF mais pas sur IE (les bords sont invisible...)

17/11/2009, 16h34
julioooo

Je suis d'accord avec toi ca bug sous IE.
Ca se reproduit également sur la page de demo ...
17/11/2009, 16h43
benthebest

Ben ma foi, non justement ça à l'aire de fonctionner avec IE (voir page de demo , section Adornment / le 1er exemple Round, moi je veux refaire ceci sauf, fond blanc et bordure rouge mais je n'y arrive pas...:? )

J'ai réussi ! :?

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
 
<!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" >
	<head>
		<title>Menu</title>
		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script type="text/javascript" src="corner.js"></script>
		<style>
			.outer { float: left; margin: 15px; background: #c82; padding: 8px; width: 22em } 		
			.inner{ background: #fff}
		</style>
	</head>
	<body>
			<div class="outer">
				<div  class="inner" id="id_toto">
					<p>bla</p>
					<p>bla</p>
					<p>bla</p>
					<p>bla</p>
					<p>bla</p>
				</div>
			</div>
		<script>
			$("#id_toto").corner("round 14px").parent().css('padding', '15px').corner("round 14px")
		</script>
	</body>
</html>

Il faut faire attention à la div parente et à ses propriétés css.

23/11/2009, 03h00
benthebest

Merci pour ta réponse, désolé de te répondre un peu tardivement mais je n'avais pas vu que tu m'avais répondu (pas de notification...:))

Ecoute effectivement ça marche, mais je n'arrive pas à obtenir une bordure de 1 px seulement...

As-tu une idée sur la façon d'y parvenir?

Encore merci.

Salut !
Pour la bordure de 1px, ca passe moyen sous IE ... les coins supérieurs sont carrés...
Par contre à 2px c'est déjà mieux, après je pense qu'il faille jouer avec les valeurs pour avoir ce que tu veux !

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
 
<!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" >
	<head>
		<title>Menu</title>
		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script type="text/javascript" src="corner.js"></script>
		<style>
			.outer { background: #000; width:300px} 		
			.inner{ background: #fff; padding:20px;}
		</style>
	</head>
	<body>
			<div class="outer">
				<div  class="inner" id="id_toto">
					<p>bla</p>
					<p>bla</p>
					<p>bla</p>
					<p>bla</p>
					<p>bla</p>
				</div>
			</div>
		<script>
			$("#id_toto").corner("round 10px").parent().css("padding","2px").corner("round 10px");
		</script>
	</body>
</html>