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