27312 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai ce problème avec le menu déroulant de mon site-web :
upload/1598822512-80959-imagform.png

Il est non seulement décalé vers la droite et surtout il est caché par la vidéo que j'ai mise en page d'accueil.

Voici la partie du code HTML contenant le menu et la vidéo :
<nav>
		<ul>
			<li><a href="index.html">Accueil</a>
			<li><a href="html/Articles.html">Nos Articles</a>
				<ul>
					<li><a href="">Boxe</a>
					<li><a href="">Muay Thai</a>
					<li><a href="">MMA</a>
					<li><a href="">Grappling / JJB</a>
					<li><a href="">Arts Martiaux</a>
				</ul>
			<li><a href="html/Tutoriels.html">Tutos</a>
			<li><a href="html/Images.html">Images</a>
			<li><a href="html/Contact.html">Contact</a>
			<li><a href="html/MesFavoris.html">Nos partenaires</a>
		</ul>
	</nav>
	<main>
		<video src="videos/presentation.mp4" width="1200" height="500" autoplay loop controls/>
	</main>


La partie du CSS agissant sur le HTML :
/*menu*/
 
nav{
	color:#FFFFFF;
}
 
nav ul{
	list-style-type:none;
}
 
nav ul li{
	float:left;
	width:200px;
	height:40px;
	background-color:rgba(0,0,0,0.8);
	text-align:center;
	padding-vertical:10px;
}
 
nav ul li ul li{
	display:none;
}
 
nav ul li:hover ul li{
	display:block;
}
 
nav a {
	padding:10px;
	background-color:black;
	display: block;
	text-decoration: none;
	color: white;
}
 
nav a:hover {
	background-color:red;
	border-bottom:2px solid gold;
}
 
 
/*corps*/
 
main {
	margin-top:105px;
	margin-left: 60px;
}


J'ai essayé d'utiliser les z-index en mettant par exemple le main contenant la vidéo à z-index:1 et le menu déroulant à z-index:2 mais rien n'y fait.

Merci pour votre aide.
Modérateur
Bonjour,

"z-index" était la bonne idée, mais il faut aussi ajouter "position:relative;" à "main" et "nav" :


nav, main {position:relative;}
nav {z-index:2;}
main {z-index:1;}

Sur l'exemple que tu as donné, c'est suffisant pour que ça tombe en marche.

Amicalement,
Parfait, je viens de trouver tout seul et c'est exactement ce que tu proposes !

Merci ! Smiley biggrin

Par contre pour le décalage vers la droite toujours le même problème, des idées ?
Modifié par sj4555 (30 Aug 2020 - 23:49)
Modérateur
bonjour,
sj4555 a écrit :
Par contre pour le décalage vers la droite toujours le même problème, des idées ?

A priori, une question de padding (les ul, voir les li peuvent avoir des paddings et margins par défaut, mais faut faire gaffe parce que tous les navigateurs ne font pas tous la même chose).

J'ai rajouté la ligne ci-dessous, et ça marche sur Chrome avec ton exemple :
nav ul li ul {padding:0;}

Amicalement,
Meilleure solution
Merci ! Smiley biggrin

ça marche parfaitement ! Smiley biggrin

Par contre pourquoi le padding influe sur la position de la liste? Le padding n'est t'il pas sensé influer sur la position des éléments au sein de celle-ci et ce n'est pas justement le margin qui influe sur la position du block en lui-même?

Visiblement ça marche donc quelque chose m'échappe, pourrais-tu éclairer ma lanterne ? Smiley confus
Modifié par sj4555 (31 Aug 2020 - 09:47)
Modérateur
Bonjour, comme tu styles les éléments au sein de la liste, ceux-ci sont effectivement décalés sur la droite à cause du padding-left du <ul>

voici une représentation des marges et padding «par défaut» d'un <ul>:
upload/1598865727-32231-capturedaeacran2020-08-31aa11.png
Modérateur
sj4555 a écrit :
Par contre pourquoi le padding influe sur la position de la liste? Le padding n'est t'il pas sensé influer sur la position des éléments au sein de celle-ci et ce n'est pas justement le margin qui influe sur la position du block en lui-même?


Ton <ul> étant transparent (en fait il a même une hauteur nulle), on avait l'impression que toute la liste(le <ul> donc) était décalée, mais en fait c'était seulement les <li> qu'il contenait qui étaient décalés (puisque le <ul> avait un padding par défaut).

Note aussi que ton <ul> a une hauteur nulle car les éléments qu'il contient sont en float. Ceci est dû à une autre erreur probable concernant l'instruction où il y a ce float.

Tu as mis :
nav ul li
{
	float:left;
	...
}

Or il faudrait n'appliquer ce code qu'aux <ul> principaux et mettre me semble-t-il (il faut ajouter des ">" pour indiquer qu'on ne doit s'occuper que des éléments directement enfants de <nav>) :
nav>ul>li
{
	float:left;
	...
}

Car si tu ne fais pas ça, ton "nav ul li{float:left;...}" s'applique non seulement à tes <ul> principaux (ce qui est voulu), mais aussi <ul> qu'ils contiennent (et là, je ne pense pas que c'était voulu).

Bref, ça marchait un peu par hasard ! Smiley biggrin

Amicalement,