Discussion :

[philippef]

Bonjour,

sur ma page index j'ai une balise div id="retourmenu" qui contient une image et un texte qui sont non visibles.
Si je rends visible la balise div, l'image et le texte sont centrés.
Je veux adapter mon site à un écran de 320px. Pour faire ça je rends non visible le div id="menu", je mets le div id="contenu" à width=100% et je rends visible la div id="retourmenu"
cette action permet d'afficher le menu sur toute la largeur de l'écran.

je n'arrive pas centrer l'image de la balise div id="retourmenu"

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<div id="retourmenu">
		<img src="images/retourmenu.jpg" alt="" onclick="javascript:menu();" ><span onclick="javascript:menu();">Menu</span>
	</div>
....
	<div id="mainpage">
		<div id="menu"><br />
			<nav>
			<ul>
				<li><a href="index.php?page=accueil">Accueil</a></li>
			</ul>
			</nav>
		</div>

le code css de la balise div

Code :

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

#retourmenu { width:100%;height:1.3em;font-size:1.2em;font-family:verdana;text-align:center;display:none; }

le code css pour media screen

Code :

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

1
2
3
4
5
6
7
@media screen and (max-width: 320px) {
	body { font-size:75%;	} /* 75%*/
	#global { width : 100%;  }
	#retourmenu { display:inline; }
	#menu { width:0%; } 
	#contenu { width:100%; }
}

la fonction javascript

Code js :

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

1
2
3
4
5
6
7
8
9
10
function menu(){
	document.getElementById('menu').style.width = "100%";
	document.getElementById('menu').style.textAlign = "center";
	document.getElementById('menu').style.fontSize = "1.3em";
	document.getElementById('menu').style.backgroundImage = "url(images/parchemin2.jpg)";
	document.getElementById('menu').style.backgroundColor = "#007FFF";
	document.getElementById('menu').style.display = "inline";
	document.getElementById('contenu').style.width = "0%";
	document.getElementById('contenu').style.display = "none";
}

tout le code n'est certainement pas optimisé mais ça marche sauf l'image qui n'est pas centrée.

merci d'avance