Ah d'accord, je poste donc mon html, puis mon css dans l'état actuel, qui marchent mais ne sont pas conformes.
Pour la petite explication : il y a visuellement une image de 400x300px composée en réalité de 4 blocs (HD, HG, BG et BD) formés chacun d'une image 199x149px + 1px de bordure
_________________________
HTML
<body>
<div id="accueil">
<a href="mailto:gnagnagna@gna.gna">
<!-- Bloc père contenant HautGauche, HautDroite, BasGauche, BasDroite -->
<div id="accueil_hg">
<!-- Image HG-->
</div>
<div id="accueil_hd">
<!-- Image HD -->
</div>
<div id="accueil_bg">
<!-- Image BG -->
</div>
<div id="accueil_bd">
<!-- Image BD -->
</div>
</a>
</div>
</body>
_________________________
CSS
body
{
background-color: rgb(36,0,0);
}
#accueil
{
width: 400px;
height: 300px;
position:absolute;
left: 50%;
top: 50%;
margin-top: -150px; /* moitié de la hauteur de l'image composée de l'apposition des 4 images*/
margin-left: -200px; /* moitié de la largeur de l'image composée de l'apposition des 4 images*/
}
#accueil_hg
{
float: left;
width: 199px;
height: 149px;
background-image: url("accueilHG.png" );
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
padding-right: 1px;
padding-bottom: 1px;
}
#accueil_hd
{
float: right;
width: 199px;
height: 149px;
background-image: url("accueilHD.jpg" );
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
padding-left: 1px;
padding-bottom: 1px;
}
#accueil_bg
{
float: left;
width: 199px;
height: 149px;
background-image: url("accueilBG.jpg" );
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
padding-right: 1px;
padding-top: 1px;
}
#accueil_bd
{
float: right;
width: 199px;
height: 149px;
background-image: url("accueilBD.jpg" );
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
padding-left: 1px;
padding-top: 1px;
}
Message édité par Xocs le 11-07-2006 à 22:59:53