28220 sujets

CSS et mise en forme, CSS3

Background d'un menu fluide

Bonjour,

J'aimerai pouvoir réaliser un menu qui puisse s'adapter à la taille d'affichage des caractères définie sur les navigateurs. J'ai donc définit une largeur de menu en em.

Ensuite, je voulais un background uni, pour mon menu, qui fasse toute la hauteur de la fenêtre. J'ai vu qu'on pouvait utiliser une image de fond et la répéter sur la hauteur pour obtenir l'effet voulu. Le problème est qu'avec cette méthode, la largeur du menu ne peut plus s'adapter à la taille d'affichage des caractères ! Smiley ohwell

Ma question est donc la suivante :
Connaissez-vous un moyen de faire un menu fluide avec un background uni sur toute la hauteur de la page ?

Voici encore la configuration de la page :
- Header de 100px de haut
- Barre de naviguation rapide : hauteur définie par la hauteur d'un caractère
- Menu sur la gauche
- La droite sert de contenu

Code HTML :
<!-- En-tête -->
<div id="header">
	<img src="images/logo.png" alt="logo" />
	<h1>Titre</h1>
	<p>Explication</p>
</div>

<!-- Menu d'accès rapide -->
<ul id="menuhaut">
	<li><a href="index.php" title="Retour à l'accueil" accesskey="1">Accueil</a> - </li>
	<li><a href="/prive">Espace privé</a></li>
</ul>

<!-- Menu de navigation général -->
<div id="menu"> 
	<h2>Menu</h2>
	<ul>
		<li><a href="index.php" accesskey="1">Accueil</a></li>
		<li><a href="">Menu 2</a></li>
		<li><a href="">Menu 3</a></li>
		<li><a href="">Menu 4</a></li>
	</ul>
</div>

<!-- Contenu général -->
<div id="global"> 
	<!-- ... -->
</div>


Code CSS :
* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background: #DCDCDC;
	color: black;
	font-size: 80%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/* ---- HEADER ---- */
#header {
	height: 100px;
	background: #2A0A52 url(images/banniere.gif) top left no-repeat;
}
#header img {
	display: none;
}
#header h1, #header p {
	position: absolute;
	left: -5000px;
	top: -5000px;
	text-indent: -5000px;
	margin: 0;
	line-height: 0;
}

/* ---- MENUHAUT ---- */
#menuhaut {
	margin: 0;
	padding: 0.1em 0.5em 0.1em 0;
	list-style-type: none;
	background: #2A0A52 url(images/banniere_h1px.gif) top left repeat-y;
	color: white;
	text-align: right;
}
#menuhaut li {
	display: inline;
}
#menuhaut a {
	color: white;
	text-decoration: none;
}
#menuhaut a:hover {
	text-decoration: underline;
}

/* ---- MENU GENERAL ---- */
#menu {
	float: left;
	width: 13em;
	margin: 0;
	overflow: hidden;
	background-color: #4A1889;
}
#menu h2 {
	position: absolute;
	left: -5000px;
	top: -5000px;
	text-indent: -5000px;
	margin: 0;
	line-height: 0;
}
#menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0 0.2em;
}
#menu li {
	margin: 1.2em 0;
}
#menu li a {
	display: block;
	height: 1.4em;
	line-height: 1.4em;
	font-weight: bold;
	text-indent: 1em;
	text-decoration: none;
	color: #C9CBE1;
}
#menu li a:hover {
	background-color: #C9CBE1;
	color: #4A1889;
}

/* ---- CONTENU GENERAL ---- */
#global {
	margin: 0 0 0 14em;
	background-color: #DCDCDC;
}


Merci de votre aide !
Bonsoir,

Niouk a écrit :
J'ai donc définit une largeur de menu en em.


Il est préférable d'éviter :
- une substitution inattendue de police de caractère chez un utilisateur n'ayant pas celles prévues peut provoquer des déformations gênantes
- l'agrandissement des caractères provoquera un agrandissement forcé du menu, même lorsque cela n'aurait pas été nécessaire. cet agrandissement forcé rendra finalement la page moins "adaptable".

Pour obtenir des largeurs fluides, laisser simplement jouer le dimensionnement calculé par le moteur de rendu. Ou, si nécessaire, utiliser une largeur fixe en pixels, en s'assurant que le texte du menu reste lisible dans les deux premiers facteurs d'agrandissement (120 à 150%), que ce soit en "tenant" dans la largeur fixe, grâce à des retours à la ligne sur les espaces, ou avec un débordement qui ne compromet pas la lisibilité du texte.
Modifié par Laurent Denis (12 Dec 2005 - 18:55)
Si j'ai bien compris, il est préférable de fixer la largeur du menu ?

Ainsi, lorsqu'on change le facteur d'agrandissement,
- soit le texte de menu débordera sans compromettre la lisibilité
- soit le texte de menu va 'rester' dans la largeur définie grâce à des retours à la ligne sur les espaces.

A ce moment, je n'ai plus de problème pour l'affichage de mon background sur toute la hauteur de la page.

Maintenant, si je prend l'option de faire un menu fluide, comment faire pour avoir un background sur toute la hauteur de la page ?
Sujet clos
Aller à