Placement menu sur site responsive
Bonjour,
Aprés pas mal de recherche infructueuse je viens vous demandez un peu d'aide.
Je vous explique mon problème. Pour un site Internet j'ai une DIV centrale qui a comme background un croix. Lors de l'arrivé sur le site celle-ci doit être centrée, pour ça j'ai utilisé
Code:
background-position:50% 50%;
et cela fonctionne trés bien.
Le souci que j'ai c'est que lorsque je clique sur les différents menus le centre de la croix doit se caler sur les bords. Pour un menu le centre doit se caler à droite, un autre menu à gauche pareil pour le haut ou le bas.
Le truc c'est que je voudrais pas fixer la taille de mon MAIN mais plutôt mettre la taille en %. Et lorsque je fais ça, impossible de caler le centre sur les bords sans que cela bouge.
Voici une image qui pourra peut-être vous éclaircir sur le sujet:
http://sdz-upload.s3.amazonaws.com/p...oad/menu30.png
Je précise que mon image de la croix fais 3000x3000px.
Auriez vous une idée pour m'aidez. Peut être je n'utilise pas la bonne solution?
Voici mon code si ça peut vous aider:
Code:
1
2
3
4
5
6
7
8
| <div id="main">
<div class="menuLosange">
<div class="losange" id="menuHaut"></div>
<div class="losange" id="menuBas"></div>
<div class="losange" id="menuDroite"></div>
<div class="losange" id="menuGauche"></div>
</div>
</div> |
Et mon CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| body {
width:100%;
margin:auto;
padding:10px;
}
#mainLeft {
display: inline-block;
width: 20%;
vertical-align: top;
padding-top:20px;
font-family: verdana;
}
#main {
display: inline-block;
width:79%;
background-color:#E6E6E6;
height:900px;
background-image: url('images/background2.png');
background-position:50% 50%;
overflow:hidden;
} |
Par avance merci de vos réponses
