Partage
  • Partager sur Facebook
  • Partager sur Twitter

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 ?




    • Partager sur Facebook
    • Partager sur Twitter
      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

      • Partager sur Facebook
      • Partager sur Twitter
        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 ? 

        • Partager sur Facebook
        • Partager sur Twitter
          18 octobre 2021 à 23:38:06

          beaucoup dont moi font

          body

          {

          margin:0;

          padding:0;

          }

          c'est suffisant 

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


              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/

              • Partager sur Facebook
              • Partager sur Twitter

              Changement de taille de block

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown