28221 sujets

CSS et mise en forme, CSS3

salut

je voudrais positionner du texte par dessus une image

http://pages.videotron.com/borland/rtu/4zone.png

dans le bas de l'image, on veut les mots nord, sud, ouest et est... je voudrais que ces mots soit positionné tout près des zone qu'il représente sur le dessins


<div class="conteneur">
    <div id="main">
                <div class="imgcenter"><img src="rtu.png" alt="img rtu" /></div>
                <div class="nord">Nord</div>
                <div class="sud">Sud</div>
                <div class="ouest">Ouest</div>
                <div class="est">Est</div>
       </div>
</div>


mon css


.conteneur{
    background: #EFEFEF;
}

#main{
    background: #27408B;
    border: 1px solid #36c;
    width: 96%;
    margin-left:auto;
    margin-right:auto;
    font-size: 16pt;
}

#main .imgcenter{
    margin-top: 2%;
    margin-left: 15%;
}

#main .nord{
    margin-top: 1%;
    margin-left: 45%;
}

#main .sud{        
    margin-top: 2%;
    margin-left: 45%;
}

#main .ouest{
    margin-top: 2%;
    margin-left: 5%;
}

#main .est{
    margin-top:1%;
    margin-right: 2%;
}



c'est comme si le css ne serait pas pris en compte (voir image)
Je te conseillerais plutot de faire comme ceci :

<div id="imgrtu">
 <div id="nord">Nord</div>
 <div id="sud">Sud</div>
 <div id="est">Est</div>
 <div id="ouest">Ouest</div>
</div>


et ensuite positionner tout ca comme ca :

imgrtu { 
 background:url('ton_image.jpg');
 width:600px;
 height:600px;
}

nord {
 position:relative;
 bottom:10px;
 left:280px
}

etc ...
ça fonctionner mais c'est certain que c'est pas top

pour que ouest et est soit à la même hauteur, je dois faire


ouest{
 position:relative;
 top:118px;
 left:125px;
}

#est{
 position:relative;
 top:135px;
 left:580px;
}


si je mettrais des % au lieu de px avec ou sans position relative, les valeurs n'étaient pas pris en compte...

exemple nord et sud était ok au niveau de l'affichage mais ouest et est n'étaient pas correct, il sortait de l'image même avec un pourcentage de quelques pourcent...

il semble donc avoir un problème entre les zone des class, id