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

[NoSmoking]

Bonjour,
mais à quoi ressemble ton image en question, la flèche sur ton image jointe, « centrer l'image » c'est quoi pour toi ?

D'autre part je m'interroge sur ces lignes pour le moins curieuses, je parle de la construction !

Code html :

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

1
2
3
<div id="retourmenu">
	<img src="images/retourmenu.jpg" alt="" onclick="javascript:menu();" ><span onclick="javascript:menu();">Menu</span>
</div>

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

tu pourrais avantageusement passer par un ajout/changement de classe.

[Invité]

Bonjour,

@NoSmoking
Ah ? C'est la seule chose qui te choque ?

+1 pour ajout/changement de classe.

Et pour l'image (centrage vertical), je dirais text-align:middle; ?

Sauf que... il s'agit d'une flèche "décorative". Elle aurait plutôt sa place en background.
Et au lieu d'un <span>, un bouton <button> serait plus approprié.

Code :

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

<button id="menubutton" onclick="javascript:menu();" >Menu</button>

[philippef]

bonjour,

j'ai un peu tardé à répondre car depuis mon post j'ai cherché une solution et j'en ai trouvée une. Certainement pas la meilleure pour des pro !!!

au lieu d'avoir une image et un texte à l'intérieur d'un div j'ai refait une image qui contient le texte.
j'ai supprimé la balise div et c'est l'image que j'affiche lorsque la résolution de l'écran est égale ou inférieure à 425px. Je lui attribue une marge gauche qui la centre à peu près.

merci encore