jQuery Corner plugin

**benthebest** · 17/11/2009, 15h27

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 :

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

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

**julioooo** · 17/11/2009, 15h38

Bonjour,
Il suffit d'utiliser

Code :

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

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

**benthebest** · 17/11/2009, 15h48

Merci de ta réponse

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

Code :

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

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 :

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

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...)

**julioooo** · 17/11/2009, 16h34

Je suis d'accord avec toi ca bug sous IE.
Ca se reproduit également sur la page de demo ...

**benthebest** · 17/11/2009, 16h43

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

)

**julioooo** · 17/11/2009, 17h07

J'ai réussi !

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

**benthebest** · 23/11/2009, 03h00

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.

**julioooo** · 23/11/2009, 11h51

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 :

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

jQuery Corner plugin

jQuery

Discussions similaires

Partager

Partager