Placement menu sur site responsive

**roukgreg** · 04/02/2014, 14h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
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

**emixamQQ** · 06/02/2014, 10h10

Bonjour, je n'ai pas très bien compris ce que tu demandes, lorsque tu cliques sur le menu de gauche tu souhaiterais ton centre a gauche, tu cliques a droite, ton centre a droite etc?

Sinon je te conseil ça qui pourrait peux-être t'aider a mieux comprendre : background-position.
A bientôt !

**roukgreg** · 06/02/2014, 10h39

En faite je souhaiterais que le menu en losange se déplace lorsque je clique sur l'un des menus.

Pour exemple si je clique sur le petit losange de gauche, l'ensemble du menu en losange avec la croix se déplace sur la droiteet son centre s'aligne sur le bord de ma DIV à droite.(poistion de départ comme sur la 1ere image, et position aprés le clique sur le losange de droite représenté sur le 2eme image).

J'ai testé le code présent sur TyitEditor, le truc c'est que ma croix (même avant) ne reste pas bien calé entre mes losange. Si je zoom et réduit ma fenêtre, celle-ci passe dessous mes losanges ou se décale, donc pas bon. Je ne vois pas trop comment faire.

Dur dur comme site.

Merci pour tes réponses