Changement de taille de block

block plus grand quand il est survolé

17 octobre 2021 à 17:22:04

Bonjour,

J'ai un problème avec mon code. Lorsque je survole mes menus, ceux-ci changement de taille.

Voici mon code HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
		<title>Test lien</title>
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<a href="#">Lien 1</a>
					<ul>
						<li>
							<a href="#">Sous lien 1</a>
						</li>
						<li>
							<a href="#">Sous lien 2</a>
						</li>
						<li>
							<a href="#">Sous lien 3</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Lien 2</a>
					<ul>
						<li>
							<a href="#">Sous lien 1</a>
						</li>
						<li>
							<a href="#">Sous lien 2</a>
						</li>
						<li>
							<a href="#">Sous lien 3</a>
						</li>
						<li>
							<a href="#">Sous lien 4</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Lien 3</a>
					<ul>
						<li>
							<a href="#">Sous lien 1</a>
						</li>
						<li>
							<a href="#">Sous lien 2</a>
						</li>
						<li>
							<a href="#">Sous lien 3</a>
						</li>
						<li>
							<a href="#">Sous lien 4</a>
						</li>
						<li>
							<a href="#">Sous lien 5</a>
						</li>
						<li>
							<a href="#">Sous lien 6</a>
						</li>
						<li>
							<a href="#">Sous lien 7</a>
						</li>
						<li>
							<a href="#">Sous lien 8</a>
						</li>
						<li>
							<a href="#">Sous lien 9</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Lien 4</a>
					<ul>
						<li>
							<a href="#">Sous lien 1</a>
						</li>
						<li>
							<a href="#">Sous lien 2</a>
						</li>
						<li>
							<a href="#">Sous lien 3</a>
						</li>
						<li>
							<a href="#">Sous lien 4</a>
						</li>
						<li>
							<a href="#">Sous lien 5</a>
						</li>
					</ul>
				</li>
			</ul>
		</nav>
	</body>
</html>

Et mon CSS :

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	color: black;
	text-decoration: none;
	list-style: none;
}

body>nav>ul{
	display: flex;
	justify-content: space-around;
}

body>nav>ul>li{
	flex-grow: 1;
	margin: 1px;
}

body>nav>ul>li>a{
	display: flex;
	height: 50px;
	justify-content: center;
	align-items: center;
	background: grey;
	color: white;
	text-transform: uppercase;
}

body>nav>ul>li>ul{
	display: none;
}

body>nav>ul>li:hover>ul{
	display: block;
}

body>nav>ul>li>ul>li{
	margin: 1px;
	padding-left: 15px;
	background: lightgrey;
}

body>nav>ul>li>ul>li>a{
	display: block;
}

Quelqu'un pourrait-il m'expliquer la cause s'il vous plait ?

zvheer

17 octobre 2021 à 17:28:25

Bonjour je ne vois pas réellement l'utilite des > encore plus sur body car tous les elements sont forcements > body.

ensuite utiliser * de la sorte n'est pas tres recommandée.

Pour ton problème ca ne peut venir que du display block vu que c'est la seule chose que tu fais au hover et comme les elements de type block on des espaces par defaut je crois c'est ce qui te donne l'impression que ca change de taille a etant de type inlineblock a la base

-
Edité par zvheer 17 octobre 2021 à 17:28:49

yasakani no magatama

hatemmomtathel

18 octobre 2021 à 22:15:20

Merci pour ta reponse

Concernant les > qui partent de body, je les utilisant car je n'avais pas encore une idée fixe de ma structure html que que je voulais être sur d'affecter l'elebt que je voulais.

C'est une mauvaise pratique ?

J'aurais pu utiliser des classes mais je ne trouvais pas incohérent le fait d'utiliser les >

Pour le * je m'étais inspiré d'autres codes que j'avais vu sur internet. Beaucoup de gens fixent les marges et le calcul de la taille des boîtes dans un *. Il ne faut pas faire comme ça ?

zvheer

18 octobre 2021 à 23:38:06

beaucoup dont moi font

body

{

margin:0;

padding:0;

}

c'est suffisant

yasakani no magatama

SefadineAliIdriss

19 octobre 2021 à 0:15:55 - Message modéré pour le motif suivant : Message complètement hors sujet

AbcAbc6

19 octobre 2021 à 2:55:23

hatemmomtathel a écrit:

Concernant les > qui partent de body, je les utilisant car je n'avais pas encore une idée fixe de ma structure html que que je voulais être sur d'affecter l'elebt que je voulais.

Bonjour, cela ajoute inutilement du poids à la déclaration. C'est plus modulable d'utiliser des class

hatemmomtathel a écrit:

Pour le * je m'étais inspiré d'autres codes que j'avais vu sur internet. Beaucoup de gens fixent les marges et le calcul de la taille des boîtes dans un *. Il ne faut pas faire comme ça ?

Non, il ne faut pas faire comme cela. OK pour le box-sizing mais pas pour le reste. Pourquoi supprimer les marges aux élément qui n'en ont pas; Idem pour list-style qui est uniquement une propriété de liste.

Préférer un reset au cas par cas, comme l'indique zvheer, ou utiliser une feuille de style de base de type normalize.

Pour un menu déroulant regarder le code donné par http://www.frogweb.fr/