28172 sujets

CSS et mise en forme, CSS3

Affichage premier plan, propriété z-index

Bonjour,
J'ai un nouveau problème à régler, j'ai fait des recherches, des essais, mais j'en suis toujours au même point...

Alors, voici mon problème :
J'ai un menu déroulant vertical en CSS et xhtml, et le problème est que que les sous menu sont cachés quand la hauteur de la partie centrale 'div principale' ou droite 'div autre' est plus courte. Difficile à expliquer, alors je vous invite à tester le code ci-dessous et vous verrez clairement de quoi je parle.

Comment faire pour qu'ils puissent rester au premier plan?

Comme ces sous-menu sont en position 'relative', je peux utiliser la fonction z-index, que je met à 9 (par défaut c'est fixé à 1, donc il devrait bien passer au dessus de tout le monde...).

Alors, voilà la structure de mon site, et le css s'appliquant à cette structure (Vous pouvez tester de rajouter du texte pour augmenter la hauteur des div principale et div autre) :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
		<title>Bibliothèque du CERFACS</title>
		<meta http-equiv="Content-Type" content="text/php; charset=UTF-8" />
		<meta http-equiv="Content-Language" content="fr" />
		<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
	</head>
	<body>
		<div id="global">
			<div id="entete">
				<h1>Bannière</h1>
			</div>
			<div id="centre_gauche">
				<div id="centre_droite">
					<div id="menu">
						<ul class="niveau1">
						<li><a href="lien_1">lien 1</a></li>
						<li class="sous_menu"><a href="lien_1">lien 2</a>
							<ul class="niveau2">
							<li class="sous_menu"><a href="lien_2_1">lien 2.1</a>
								<ul class="niveau3">
								<li><a href="lien_2_1_1">lien 2.1.1</a></li>
								<li><a href="lien_2_1_2">lien 2.1.2</a></li>
								</ul>
							</li>
							<li><a href="lien_2_2">lien 2.2</a></li>
							</ul>
						</li>
						<li class="sous_menu"><a href="lien_1">lien 3</a>
							<ul class="niveau2">
							<li class="sous_menu"><a href="lien_2_1">lien 3.1</a>
								<ul class="niveau3">
								<li><a href="lien_2_1_1">lien 3.1.1</a></li>
								<li><a href="lien_2_1_2">lien 3.1.2</a></li>
								</ul>
							</li>
							<li><a href="lien_2_2">lien 3.2</a></li>
							</ul>
						</li>
						</ul>
					</div>
					<div id="autre">
						<h3>Autre</h3>
						<p>contenu de la div autre</p>
					</div>
					<div id="principal">
						<h2>Titre</h2>
						<p>contenu principal</p>
					</div>
				</div>
			</div>
			<div id="pied">
				<p>cotenu du pied de page</p>
			</div>
		</div>
	</body>
</html>


Voilà, je vous ai enlever tout ce qu'il y a dans les div sauf pour le menu, histoire de ne pas vous noyer dans le code total...

Et voici donc une partie de mon css (celle qui s'applique à la structure, j'ai virer tout ce qui concerne les couleurs, les polices utiliser, etc...) (Pour tester, nommer le fichier en 'styles.css' dans le même répertoire que le fichier du code ci-dessus que vous nommez comme vous le souhaitez...) :


body {
	padding: 10px 10px;
	margin: 0;
	}

#global {
	width: 100%;
	max-width : 1400px;
	min-width: 800px;
	margin-left: auto;
	margin-right: auto;
	border: solid 1px;
	}

#entete {
	padding: 20px 0;
	border: solid 1px;
	text-align: center;
	}

#centre_gauche {
	background: url(images/centre_gauche.png) repeat-y left top; //colonne factice gauche
	}

#centre_droite {
	background: url(images/centre_droite.png) repeat-y right top;//colonne factice droite
	width: 100%;
	overflow: hidden; //Est-ce possible que cette ligne soit la cause du problème?
	}

#menu {
	float: left;
	width: 200px;
	border: solid 1px;
	}
	
	#menu a {
		display: block;
		padding: 10px;
		border: solid 1px;
		}

	#menu ul {
		margin: 0;
		padding: 20px 10px;
		width: 180px;
		}

	#menu ul li:hover {
		position: relative;
		padding: 0px 0px 0px 5px;
		}

	#menu ul ul {
		position: absolute;
		top: -10px;
		left: 180px;
		display: none;
		padding: 10px;
		margin: 0;
		}

	.sous_menu {
		//rien concernant structure
		}

		#menu ul.niveau1 li.sous_menu:hover ul.niveau2,
		#menu ul.niveau2 li.sous_menu:hover ul.niveau3,
		#menu ul.niveau3 li.sous_menu:hover ul.niveau4 {
			display: block;
			}

#autre {
	float: right;
	width: 200px;
	padding: 12px 20px;
	border: solid 1px;
	}

#principal {
	margin-left: 220px;
	margin-right: 260px;
	padding: 10px 20px;
	border: solid 1px;
	}

#pied {
	margin: 10px 40px 0px 0px;
	border: solid 1px;
	text-align: center;
	}


Voilà, j'ai pas mis les z-index que j'avais posé puisque ça ne marchai pas...

Donc, je rappelle ce qui ce passe : Quand le menu se déroule, il ne peut se voir que dans la limite de hauteur de la partie principale... donc, il faudrait que les sous menu soient prioritaires sur tout le reste.

Merci de votre attention!!
Modifié par mini_gspot (20 May 2009 - 15:26)
Bon, j'ai trouver une solution, c'est peut être pas la meilleure, mais bon, la voici :

Je vais rajouter dans mon css la commande min-height, et la définir de taille minimum dont j'ai besoin pour pouvoir afficher le menu en entier.

Bon, comme le contenu de mon menu est dynamique (utilisation des session avec differents droits, donc plus ou moins d'options dans certains sous-menu), je vais faire un css dynamique, qui en fonction de la session, la valeur de min-height sera adapté.

Même si il n'y à pas eu encore de réponse, merci quand même!
Modifié par mini_gspot (20 May 2009 - 16:32)
Sujet clos
Aller à