Effet de soulignement sur un lien

Pat66 · Mars 4, 2023, 4:17

Bonjour

Je desire realiser un effet de soulignement sous les liens de mon menu au hover.
le probleme est que l effet ne couvre pas uniquement le mot contenu dans le lien mais la cellule

ci dessous mon code css:

nav a{
        color: black;
        text-decoration: none;
        margin: 6px;
        width: calc(100%/5);
        padding: 3px  4px  3px  5px ;
        line-height:1;
        
        display: inline-block;
        }
        
        nav{
            margin-top: 9px;
            margin-right: 18px;
            
            position: relative;
            width: 40%;
            height: 75%;
           display: flex;
           justify-content: center;
           margin: auto 10px;
        }
 
a{
    position:relative;
}
 
a::after{
content:"";
position: absolute;
width: 0;
right: 0;
height: 1px;
background-color: black;
transition: width .5s ease-in-out;
bottom:-2px;
 
 
}
 
a:hover::after{
    width: 100%;
}

mon code html:

<body>
    <header>
        <div class="title">
            <p>feldman</p>
        </div>
        <nav>
          <a   class="lien" href="intro.html">Intro</a>
          <a href="about.html">About</a>
          <a href="fieldman.html">Services</a>
          <a href="project.html">Project</a>
          <a href="contact.html">Contact</a>
           
        </nav>
        
           </header>   


           <main class="container">
  <div class="middle">
        <div class="title0">
          
<div class="titre">
<div>
  <p class="first" > Design with the</p>
</div>
<div class="second">future in mind.</div>
</div>
            
        
            
          

        </div>
    
    <div class="trois">
<h1>03'</h1>

    </div>

  </div>
  

    <div class="central">

  <div class="picture">
    <img src="img/salon-min.jpg" alt="salon">
  </div>

  <section>
   
    <h2 class="line">about feldman</h2>
 
    <p class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.  Accusantium expedita unde voluptatum alias mollitia eveniet molestiae perspiciatis eaque harum! Quo tempore iusto ab illo quisquam facilis nam nobis, porro eos. Lorem ipsum dolor sit amet consectetur adipisicing elit.  Accusantium expedita unde voluptatum alias mollitia eveniet molestiae perspiciatis eaque harum! Quo tempore iusto ab illo quisquam facilis nam nobis, porro eos. </p>
  </section>


    </div>

sur

Pourrais-je avoir des explications je galere depuis des semaines ?

nicola · Mars 5, 2023, 8:27

Il ne faut pas écrire a::hover plutôt que a:hover ?

dindoun · Mars 5, 2023, 12:37

salut
pourrais-tu donner un code html complet, sans manque de /div ou autres

Pat66 · Mars 5, 2023, 1:14

code complet ? c est mon code

Pat66 · Mars 5, 2023, 1:15

Bonjour

merci pour ton message mais ca change rien.

pam547 · Mars 8, 2023, 10:28

Salut,

Pour ce qui de la description dans le css.

Pour ce qui est de la syntaxe, aucune idée. Elle a l’air comme il faut.

Didi1 · Mars 8, 2023, 3:15

Je répond un peut tard mais est ce que tu peut faire une bonne indentation pour rendre le code lisible.

Si un développeur ou un prof doit te relire tu risque de te faire taper sur les doigts.

Une petite idée qui m’a traversé l’esprit est d’utilisé la bordure de la box :

a:hover{
  border-width: 0px 0px 5px 0px;
  border-color: black;
}

Simple est efficace pour la transition bon courage

Pat66 · Mars 8, 2023, 3:46

Merci pour ton message j’ai resolu mon probleme

peux-tu etre plus explicite « Si un développeur ou un prof doit te relire tu risque de te faire taper sur les doigts. »

Didi1 · Mars 8, 2023, 4:07

Quand j’étais étudiant en informatique mes prof enlevaient des points si un programme était mal indenté (tabulation avant une ligne de code).

Certain langage sont hyper sensible a l’indentation comme en Python qui change sont comportement en fonction de celle-ci. par exemple:

def toto():
    for i in range(5):
        print("hello world")

Donne un résultat de:

hello world
hello world
hello world
hello world
hello world

Et :

def toto():
    for i in range(5):
    print("hello world")

Donne

hello world

Une bonne pratique est de toute façon est de mettre correctement les tabulations.

Pour finir tu peut aussi posté ta solution pour les personnes que ça intéresse et mettre le poste en résolue.

Pat66 · Mars 8, 2023, 4:23

 a::after{
            content: "";
            position: absolute;
            width: 0;
            right: 0;
            height: 1px;
            display: block;
            background-color: black;
            bottom: -2px;
            transition: width 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
        }
        
        a:hover:after{
         width: 100%;   
        }
 a{
        color: black;
        text-decoration: none;
        margin: 6px;
        position: relative;
        padding: 3px  4px  3px  5px ;
        line-height:1;
        outline: none;
        
        }
        
        nav{
            margin-top: 9px;
            margin-right: 18px;
           
            width: 40%;
            height: 35px;
           display: flex;
           justify-content: center;
           justify-content: space-between;
           margin: auto 10px;
        }
  svg{
            width: 28px;
            position: absolute;
            transform: translate(-46%,-36%);
            }
        
            path{
                stroke: black;
                fill: transparent;
                stroke-miterlimit: 10;
                stroke-dasharray: 164;
                stroke-width: 1;
                transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
            }   
        
            a:hover svg path{
        
                stroke-dashoffset: -164;
            }

Didi1 · Mars 8, 2023, 4:29

nav{
	margin-top: 9px;
	margin-right: 18px;

	width: 40%;
	height: 35px;
	display: flex;
	justify-content: center;
	justify-content: space-between;
	margin: auto 10px;
}

a{
	color: black;
	text-decoration: none;
	margin: 6px;
	position: relative;
	padding: 3px  4px  3px  5px ;
	line-height:1;
	outline: none;
}


a::after{
	content: "";
	position: absolute;
	width: 0;
	right: 0;
	height: 1px;
	display: block;
	background-color: black;
	bottom: -2px;
	transition: width 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
        
a:hover:after{
	width: 100%;   
}

a:hover svg path{
    stroke-dashoffset: -164;
} 

svg{
	width: 28px;
	position: absolute;
	transform: translate(-46%,-36%);
}
        
path{
	stroke: black;
	fill: transparent;
	stroke-miterlimit: 10;
	stroke-dasharray: 164;
	stroke-width: 1;
	transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

Comme ça, avec des commentaires en plus et tu as 20/20 à l’exercice ou tu te fait pas recal par le chef de projet qui n’accepte pas ta pull-request sur le serveur git de l’entreprise

Pat66 · Mars 8, 2023, 4:31

aaa

Pat66 · Mars 8, 2023, 4:47

pourquoi avoir retire ton message ?

Didi1 · Mars 8, 2023, 4:54

Je l’ai écris sur le précédent message car il se suivait

nicola · Mars 10, 2023, 5:23

Je pense plutôt que ce script plante parce que Python attend une ouverture de bloc après le for, et il n’y en a pas :

>>> def toto():
...   for i in range(5):
...   print("toto")
  File "<stdin>", line 3
    print("toto")
    ^
IndentationError: expected an indented block after 'for' statement on line 2

Didi1 · Mars 10, 2023, 5:45

je donnais juste un exemple, je n’ai pas testé le code mais si tu veut on peut réécrire le code suivant:

def toto():
    for i in range(5):
        print("toto")
    print("hello world")

Ce code en raison de son indentation fonctionnera différemment de

def toto():
    for i in range(5):
        print("toto")
        print("hello world")

Enfin bref en C on peut écrire :

void toto (void){
          for (int i=0; i=5;i++;){
 printf("toto");
                      printf("hello world");
                          }}

Ça fonctionne mais c’est moche. bref l’indentation c’est une convention qui permet d’amélioré la lisibilité