28112 sujets

CSS et mise en forme, CSS3

Menu CSS utilisation de z-index

Bonjour les alsaciens,
J'ai réalisé un site pour l'entreprise pour laquelle je travaille. Bien sûr c'est très "débutant" mais ça nous convient.
Cependant il y a un problème qui me gêne et que je n'arrive pas à résoudre: Si la largeur du site est réduite le menu de navigation passe sur deux ligne, ce qui est normal, mais dès lors il se passe ceci avec les menus déroulants.
upload/60580-pb2.jpg

Voici le code HTML du menu:

<nav>
	<div id="navigation">
		<ul>
			<li <?php if($page=="index"){echo "class='current'";} ?> >
				<div class="parent"><a href="index.php">Bienvenue</a></div>
				<div class="sousmenu">
					<ul>
						<li>
							<a href="historique.php">Pr&eacute;sentation soci&eacute;t&eacute;</a>
						</li>
						<li>
							<a href="embleme.php">Notre embl&egrave;me</a>
						</li>
						<li>
							<a href="terrain.php">Terrain &agrave; vendre ?</a>
						</li>
					</ul>
				</div>
			</li>
			<li <?php if($page=="vendre"){echo "class='current'";} ?> >
				<div class="parent"><a href="avendre.php">A vendre</a></div>
				<div class="sousmenu">
					<ul>
						<li>
							<a href="aconcept.php">Notre concept</a>
						</li>
						<li>
							<a href="proposition.php">Aide au financement
						</li>
					</ul>
				</div>
			</li>
			<li <?php if($page=="louer"){echo "class='current'";} ?> >
				<div class="parent"><a href="alouer.php">A louer</a></div>
				<div class="sousmenu">
					<ul>
						<li>
							<a href="aproteges.php">Appartements prot&eacute;g&eacute;s</a>
						</li>
					</ul>
				</div>
			</li>
			<li <?php if($page=="realisations"){echo "class='current'";} ?> >
				<div class="parent"><a href="realisations.php">Nos r&eacute;alisations</a></div>
			</li>
			<li <?php if($page=="quartier"){echo "class='current'";} ?> >
				<div class="parent"><a href="quartier.php">Plans de quartier</a></div>
			</li>
			<li <?php if($page=="coord"){echo "class='current'";} ?> >
				<div class="parent"><a href="coordonees.php">Nos coordonnées</a></div>
			</li>
		</ul>
	</div>
</nav>


Voici le code CSS des éléments concernés:


/*Menu principal*/
#navigation ul
{
	position:relative;
	list-style:none;
	padding:0;
	margin:0;
	z-index:100;
	text-align:center;
	z-index:100;
}


#navigation ul li
{
	position:relative;
	font-size:1em;
	text-align:center;
	line-height:30px;
	
	display:inline-block;
	margin-left:0.801282%; /* 10/1248 => 0.801282% */
	margin-top:10px;
	margin-bottom:10px;
	margin-right:0;
	
	width:15.731837%; /* 196.333333/1248 => 15.731837% */
	min-width:115px;
	height:30px;
	
	background: url(images/bouton1.png) no-repeat left center,
	url(images/bouton2.png) no-repeat right center,
	url(images/menutexture1.png) center repeat-x;
	z-index:100;
}

#navigation ul li:hover
{
	background:none;
	background:url(images/menutexture2.png) center repeat-x;
}

#navigation ul li.current
{
	background:none;
	background:url(images/menutexture2.png) center repeat-x;
}

#navigation ul li div.parent a
{
	position:relative;
	color:#FFFFFF;
	text-decoration:none;
	display:block;
	z-index:100;
}
#navigation ul li div.sousmenu a
{
	position:relative;
	color:#FFFFFF;
	text-decoration:none;
	display:block;
	z-index:200;
}

#navigation ul li div.parent
{
	position:relative;
	z-index:100;
}

/*Sous-menu*/
#navigation ul li div.sousmenu
{
	position:relative;
	display:none;
	z-index:200;
}

#navigation ul li:hover div.sousmenu
{
	position:relative;
	display:inline;
	z-index:200;
}

div.sousmenu ul li
{
	position:relative;
	font-size:0.9em;
	text-align:center;
	line-height:35px;
	display:inline;
	float:left;
	margin:0;
	width:100%;
	height:35px;
	background:none;
	background:rgba(24, 116, 182, 1);
	z-index:200;
}

#navigation ul li:hover div.sousmenu ul li
{
	position:relative;
	font-size:0.9em;
	text-align:center;
	line-height:35px;
	display:inline;
	float:left;
	margin:0;
	width:100%;
	height:35px;
	background:none;
	background:rgba(24, 116, 182, 1);
	z-index:200;
}


J'espère que c'est compréhensible je clarifierai ou donnerai tout complément d'information si nécessaire. Je vous remercie d'avance si vous connaissez la solution ou si vous pouvez me mettre sur la piste.

Titre1 Smiley biggrin
Salut Titre 1 Smiley fou

je n'ai jamais vu un menu sur deux lignes ..... soit c'est sur une ligne, soit c'est en mode reponsive (exemple ici )
Hello JENCAL

Effectivement c'est pas commun, mais on veut avoir tous les boutons en visuel quitte à le faire passer sur deux lignes.

Pourquoi le sous menu ne s'affiche pas par dessus le bouton de la deuxième ligne? Son propre z-index est supérieur et il n'hérite pas du z-index du bouton (div pas imbriquées)
Ok , c'est un choix.

Le problème vient de 
#navigation ul
{
	position:relative;
	list-style:none;
	padding:0;
	margin:0;
	z-index:100;
	text-align:center;
	z-index:100;
}


tu donne à TOUS les ul zindex 100, deux fois.


exemple qui fonctionne


P.S : concernant le choix "sur deux lignes", je trouve cela contraire à l’ergonomie en général.

J'arrive sur téléphone, je fais comment pour afficher les sous menu ? Je click tactile ? cela s'affiche alors par dessus les autres menus en dessous ? comment je fais pour choisir maintenant un autre menu ?
Modifié par JENCAL (26 Nov 2015 - 16:29)
Modérateur
Bonjour H1... heu je veux dire Titre1,

je rejoins l'avis de Jencal concernant le choix d'un menu sur deux lignes qui ne me semble pas une solution viable à long terme.

Aujourd’hui cela vous satisfait peut-être mais je pense que vous n'avez pas fini de galérer.

En effet la gestion des superpositions par la propriété Z-INDEX est fort périlleuse autant à la mise en place qu'à la maintenance.

N'oubliez pas que ce qui est codé aujourd'hui est voué à muter dans le futur.

Personnellement j'aurais plus facilement tendance à favoriser l'utilisation du Flexbox qui permet d'automatiser la gestion des espacements et de l'encombrement des éléments.

Combinée à l'utilisation de Media Queries et on obtient en 2 temps-3 mouvements un menu fonctionnel, accessible et maintenable (imaginez que demain votre employeur étende son activité...).


Revenons-en à nos moutons

A la lecture du code, je m'aperçois de l'utilisation de la propriété Display en Inline-Block sur les éléments LI :
* attention à la (mauvaise) gestion des espaces entre les éléments LI. Un coup d’œil à l'article Alsa Display: inline-block et les espaces indésirables permettra de résoudre une grande part du problème.

D'autre part, est-il indispensable de préciser des marges en pourcentage à 6 chiffres après la virgule ? En règle générale soit on s'en sort avec des valeurs simples (on voit jusqu'à 4 chiffres maxi après la virgule selon l'unité utilisée et encore cela dans de rares cas) sinon on fait appel à la fonction CALC() qui va permettre un ajustement circonstanciel.
Car tel que mis là, êtes-vous sûr que les marges restent les mêmes quel que soit le moteur graphique du navigateur (comparer Trident, Gecko et Webkit qui n'offrent pas du tout le même rendu) ?
Sujet clos
Aller à