Ondersteuning » Thema en CSS/opmaak » de onderstreep van animatie onder het menu wordt misvormd en is niet gelijk !

  • Opgelost johannes999

    (@johannes999)


    Hallo,
    Deze is mij html code:

    
    <div class="grid-container  ">	<!-- site-header -->
    					
    						
    		
    <div class="site-title ">		  
    	X Auto Service  </div>
    		 
    	<nav>
    			
    	<ul>
    	<li><a href="#"> Home </a> </li>
    	<li><a href="#"> Onderhoud </a> </li>
    	<li><a href="#"> Banden </a> </li>
    	<li><a href="#"> APK </a> </li>
    	<li><a href="#"> Contact </a> </li>			
    			
    			</ul>	
    			
    			</nav>  		
    			
    	</div>

    Deze is mij CSS code :

    nav ul {	
    		display:flex;		
    		justify-content:center;
    		align-items:center;
    		list-style:none;
    	     margin :0;
    		padding:1rem 0rem;
    		
    	}	
    	
    	nav ul li a {
    		text-decoration:none;
    		font-size:1.5rem;		
    		font-family: 'Ravi Prakash', cursive;
    		color:red;		
    	    padding-left:2.5rem;
    		position:relative;
    		transition:all ease-in-out 250ms;
    		
    	}
    	
    	nav ul li a::after {
    	content:'';
    	bottom:0rem;
    	display:block;
    	height:0.2rem;
    	width:0%;
    	background-color:orange;
        position:absolute;
    	transition:all ease-in-out 250ms;
    	
    	}
    	
    	nav ul li a:hover::after {
    	width:60%;	
    	}
    	nav ul li a:hover {
    		
    	color:orange;
    	}
    

    Het probleem is als ik over het menu beweeg, is de onderstreping misvormd het is niet gelijk . bijv:als u op Onderhoud hovered de onderstreep is verschijnt helemaal van de linke kant terwijl het moet precies onder zijn.
    ik heb alles geprobeerd om de probleem op te lossen maar zonder resultaat.
    wat het kan de probleem zijn ?
    dank u wel

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Thread starter johannes999

    (@johannes999)

    Ik heb de fout gevonden.
    In nav ul li a het moet:

    padding-left:2.5rem;
    padding-right:2.5rem;
    

    dank u wel

    Guido

    (@guido07111975)

    Hoi Johannes,

    Ligt aan het stukje width:60%; > dat is dus 60% van de breedte van het menu-item. Dus als je die op 100% zet zal hij de hele breedte vh menu-item worden.

    Guido

    @jeroenrotty > kun je de HTML/CSS in eerste bericht even “fixen”?

    Thread starter johannes999

    (@johannes999)

    dank u wel,
    het was padding-left moeste padding-right zijn in nav ul li a klas.

    Guido

    (@guido07111975)

    Hoi,

    Dat van de padding was mij niet opgevallen. Blijkbaar had je al iets aangepast op het moment waarop ik bezig was met het schrijven van mijn reactie. Mijn reactie over de breedte klopt nog steeds, maar blijkbaar stoorde je jezelf aan iets anders.

    Guido

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)