Discussion :

[Invité]

bonjour,
pour les besoins de mon site, je voudrais creer une boite avec une bordure et des coins arrondis. Sur firefox et ie7 aucun problème mais IE6 semble récalcitrant. J'ai donc fait une feuille de style spéciale IE6 appelée avec des commentaires conditionnels.
Pour créer mon cadre aux bords arrondis, j'ai creer une div section3 avec une bordure de 2px. A l'intérieur, j'ai placé une div haut et une div bas chacune contenant deux petites div qui affichent des images des coins arrondis.
Je les cale avec des margin mais le blanc de l'image ne recouvre pas les coins carrés!!

voila le code XHTML:

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
 
<div id="section3">
        <div id="haut">
            <div id="coin_hg"></div><div id="coin_hd"></div>
        </div>
		<div id="formulaire">
			<form name="search" id="recherche" method="post" action="resultatrecherche.php"> 
			<label for="recherche">Acc&egrave;s direct: </label><input type="text" name="recherche" class="champ" />
			<input type="submit" id="rechercher" value="ok" name="ok" />
            </form>
		</div>
        <a href="user.php">espace utilisateur</a>
		<div id="bas">
		<div id="coin_bg"></div><div id="coin_bd"></div>
		</div>
	</div>

et les CSS:

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
 
#section3{
	height:45px;
	background-color:#FFFF00;
	border:2px solid #b6acaa;
	margin-top:5px;
	white-space:nowrap;
}
 
#section3 div#haut{
	height:21px;
	margin-top:-4px;
	white-space:nowrap;
}
 
#section3 div#haut div#coin_hg{
	height:21px;
	width:21px;
	background-image:url(../img/coin_hd.gif);
	float:left;
	margin:-2px 0 0 -5px;
	white-space:nowrap;
}
 
#section3 div#haut div#coin_hd{
	height:21px;
	width:21px;
	background-image:url(../img/coin_hg.gif);
	float:right;
	margin-right:-6px;
	white-space:nowrap;
}
 
#section3 form{
	margin:-10px 0 0 150px;
}
 
#section3 a{
	float:right;
	margin:-15px 70px 0 0;
}
 
#section3 div#bas{
	height:21px;
	margin-top:-5px;
	white-space:nowrap;
}
 
#section3 div#bas div#coin_bg{
	height:21px;
	width:21px;
	background-image:url(../img/coin_bg.gif);
	float:left;
	white-space:nowrap;
	margin:0 0 0 -5px;
}
 
#section3 div#bas div#coin_bd{
	height:21px;
	width:21px;
	background-image:url(../img/coin_bd.gif);
	float:right;
	white-space:nowrap;
	margin:0 -5px 0 0;
}

[BnA]

Salut!

Tu n'aurais pas un exemple à montrer?

Je pense voir ton problème, mais j'ai pas envie de t'embrouiller si je me trompe.

++

[clb56]

Salut,

peut être voir du coté de position:relative; au lieu des marges négatives