5546 sujets

Sémantique web et HTML

[Résolu] Mes liens ne sont plus cliquable

Bonjour , j'ai récemment le projet de réaliser mon site , mais malheureusement le texte cliquable ne fonctionne plus et je ne sais pas pourquoi ,

Voici L'html :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DECA</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:300">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:700">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<header>
    <img class="fondheader" src="imgs/montagne_header2.jpg" alt="fond montagne"> 
    <img class="logo" src="imgs/logo_header2.png" alt="Logo du site">
      
      <div class="contenue">
      <a class ="lien-nav" href="#">home</a>
      <a class ="lien-nav" href="#">work</a>
      <a class ="lien-nav" href="#">contact</a>
      <a class ="lien-nav" href="#">about me</a>
	  </div> 
</header>

<premierepage>
    <img class="bandeverte" src="imgs/bandeverte.png" alt="bandeau vert">
    <h2 class="what"> What I do.. </h2> 
    <div id="logomedia">
     <img src="imgs/web_pannel1.png" alt="logo pour illustrer le text">
    </div>
    <p class="ido"> In my lost time, I usually do social media design, like YouTube Banner, Twitter Header, some design for the website, and other things..   </p> 
</premierePage>
  
<deuxiemepage>
    <img class="fondvert" src="imgs/bande.jpg" alt="fond">
    <img class="bandeblanche" src="imgs/bandeblanche.png" alt="bandeau blanc">
    <img class="personnage" src="imgs/personnage.png" alt="personnage">
    <h2 class="about"> About me.. </h2>
    <p class="me"> My name is Matteo, i have actually 17years old. I’ve been designing for about 2 years now, I practice on Adobe suite App and I like coding Website too !</p>
</deuxiemepage>
  
<troisiemepage>
    <img class="fondblanc" src="imgs/bande2.jpg" alt="fond">
</troisiemepage>



<bottom>
    <p class="textfin"> &#x24D2; DECA. Website created by HHHHH</p>
    <img class="bandenoir" src="imgs/bas.png" alt=" fond du bas">  
</bottom>

</html>






et le CSS : 


 /*Header*/
 
.fondheader{
	position: absolute;
	
}	


.contenue{
    position: absolute; /* postulat de départ */
    padding-top: 420px;
	left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%,0%);
	padding-right: 0px;
    padding-left: 0px;
}

.logo{
    width: 216px;
    height: 222px;
    position: absolute; /* postulat de départ */
    padding-top: 70px;
	left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%,0%);
}

.lien-nav{
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 30px;
    padding-right: 50px;
    padding-left: 50px;
    font-family: 'Ubuntu', sans-serif;
    transition: 0.5s;    

}

.lien-nav:hover{
    color: #2a2a2a;
    transition: 0.5s;
}

 /*1re Présentation*/
 
 .bandeverte{
    position: absolute; /* postulat de départ */
    padding-top: 725px;
	left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%,0%);

    
 }
 
.what{
    position: absolute; /* postulat de départ */
	left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%,0%); /* décalage de 50% de sa propre taille */
    padding-top: 750px;
    color: #52d1d0;
    font-size: 37px;
    font-family: 'Ubuntu', sans-serif;

}
 
#logomedia{
   position: absolute; /* postulat de départ */
   left: 50%;
   transform: translate(-50%,0%); /* décalage de 50% de sa propre taille */
   padding-top: 820px;
}
   
.ido{
   position: absolute; /* postulat de départ */
   left: 50%;
   transform: translate(-50%,0%); /* décalage de 50% de sa propre taille */
   padding-top: 900px;
   text-align: center;
   color: black;
   text-decoration: none;
   font-size: 17px;
   padding-right: 290px;
   padding-left: 290px;
   font-family: 'Muli', sans-serif;
   line-height: 25px;
}
    
 /*2eme Présentation*/
 
 
 .fondvert{
   position: absolute; /* postulat de départ */
   padding-top: 1242px;
 }
 
 .bandeblanche{
    position: absolute; /* postulat de départ */
    padding-top: 1494px;
	left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%,0%);
 }
 
 .personnage{
   position: absolute; /* postulat de départ */
   padding-top: 1589px;
   left: 50%; /* à 50%/50% du parent référent */
   transform: translate(-50%,0%);
   width: 60px;
   height: 60px;
 }
 
 .about{
    position: absolute; /* postulat de départ */
    padding-top: 1519px;
	left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%,0%);
    color: white;
    font-size: 37px;
    padding-right: 290px;
    padding-left: 290px;
    font-family: 'Ubuntu', sans-serif;
    text-align: center;
 }
 
 .me{
   position: absolute; /* postulat de départ */
   padding-top: 1669px;
   left: 50%; /* à 50%/50% du parent référent */
   transform: translate(-50%,0%);
   padding-top: 1669px;
   text-align: center;
   color: white;
   text-decoration: none;
   font-size: 17px;
   padding-right: 290px;
   padding-left: 290px;
   font-family: 'Muli', sans-serif;
   line-height: 25px;   
 }
 
  /*3eme Présentation*/
 
 .fondblanc{
   position: absolute; /* postulat de départ */
   padding-top: 2011px; 
 }
 
 
   /*Bas de  Présentation*/
   
	
 .bandenoir{
   position: absolute; /* postulat de départ */
   padding-top: 2780px; 
}

.textfin{
    position: absolute; /* postulat de départ */
    padding-top: 2799px;
    color: white;
    font-size: 24px;
    padding-right: 25px;
    padding-left: 25px;
    font-family: 'Muli', sans-serif;
	z-index: 1;
}

Modifié par _Mat_ (07 Dec 2018 - 19:01)
Administrateur
Hello,

Effectivement, tu as une faute dans la syntaxe HTML des liens. Il n'est pas possible d'avoir une espace entre "class" et "=" comme tu l'as écrit : "<a class ="lien-nav"".

D'ailleurs cela se remarque immédiatement grâce à la coloration syntaxique.

Bonne soirée Smiley smile
Ça n'a rien d'étonnant.

Si tu n'as pas modifié cette partie du HTML :

Ta page ne comporte pas de balise ouvrante <body>.
Ta page comporte des balises... qui ne font pas partie du HTML, comme <premierepage>, <deuxiemepage>, <troisiemepage> et <bottom>.

Et, petit détail, ta balise ouvrante <html> ne comporte pas d'attribut lang.

Question: où as-tu appris le HTML ?

Je crois que tu devrais revoir les bases.

On ne peut pas t'aider plus si ta page n'est pas en ligne et/ou si tu ne publie pas en commentaire le code après corrections.

Sinon, tu ne me sembles pas connaitre le Validateur HTML du W3C :

https://validator.w3.org/#validate_by_uri

Tu y as trois moyens (trois onglets) de vérifier ton code HTML : avec un lien vers ta page (onglet 1), par téléchargement de fichier (onglet 2) et par copier/coller de code (onglet 3).

Il existe aussi un validateur CSS qui fonctionne sur le même principe :

https://jigsaw.w3.org/css-validator/#validate_by_uri

Bonne continuation.

Au passage, ce sujet illustre encore la difficulté de repérer les erreurs dans les gros volumes de code postés.
Modifié par thierry (09 Dec 2018 - 18:31)
_Mat_ a écrit :
Merci , et oui je suis debutant
Bonjour Matt! Ça se voit le code est bourré d'erreur c'est beaucoup beaucoup!!!

fondheader -> fond--header
troisiemepage n'existe pas!! quel est ce language, ce n'est pas du Cascading Style Sheet du tout enfin! Smiley hum
lien-nav:hover -> ça c'est correct!
what -> quoi ?? Smiley sweatdrop
bandenoir -> bande--noire !!!

Et pourquoi les padding de plus de trois mille pixels ??!? Le postulat doit hériter des propriétés de ses ancêtres dans le D.O.Model!!! Smiley biggol
ertamus24
a écrit :
fondheader -> fond--header
(...)
lien-nav:hover -> ça c'est correct!
what -> quoi ??
bandenoir -> bande--noire !!!

Là, tu exagères, ce ne sont absolument pas des normes, ça relève de conventions de nommage personnelles ou d'équipe.

fondheader, fond--header, fondHeader, FondHeader, BackgroundHeader, BgHeader, etc. : sur un site perso, tu nommes tes classes et tes ids comme tu veux du moment que c'est explicite, lisible et cohérent.
Modifié par thierry (09 Dec 2018 - 13:53)
Mais enfin, je n'exagère pas du tout, il est vital d'utiliser bootsprat ou BEMbox Model pour un site important comme un site internet vitrine qui présente les travaux !!! Smiley sweatdrop
Une seule règle mal énoncée et ça peut être la catastrophe niveau SEO, SDP et GTM !!! Smiley hum Alors après sinon tout est ouvert mais on arrive à des mauvais résultats mensuels, et c'est exactement ce que Tierry veut faire, et c'est pas en adéquation du coup!! Smiley rolleyes
@ertamus24
Si tu utilises Bootstrap, peut-être, mais _Mat_ n'a jamais dit qu'il utilisait Bootstrap ou BEMbox Model (et vu son niveau, je ne lui recommande pas) ni quel type de site il fait. S'il n'utilise pas de framework/CMS/autre bidule et code son site de ses petites mains, et s'il respecte les normes de nommage CSS (ne pas commencer les noms de classes et d'ids par un chiffre, pas d'espaces dans les noms, etc.), il peut nommer ses classes et ses ids comme il veut pourvu que ce soit explicite, lisible et cohérent.

Et en ce qui me concerne, il n'est pas vital d'utiliser des outils comme Bootstrap ou BEMbox Model pour un site vitrine, type de site que je ne considère pas a priori comme "important" (en volume et importance du code), a fortiori en phase d'apprentissage, parce que, bon, utiliser des outils dont on ne maitrise pas les effets...

Cordialement.
Modifié par thierry (09 Dec 2018 - 23:25)
Merci pour vos réponses , j'ai changé énormément de trucs par rapport au balise ,etc... et mon site fonctionne actuellement ,cependant je suis assez déçu d'avoir reçu des réponses sur lequel j'avait fait beaucoup de fautes , oui c'est exact comme je l'ai dit c'est la première fois que je réalise un site web. mais si c'est juste pour débattre sur sa , sans répondre aux problème c'est inutile, car les class= que j'ai utilisé sont uniquement noté ainsi pour que je me repère plus facilement , et puis sa marche exactement pareil..

De plus aucune des réponses n'a fonctionner , ce n'était aucunement une erreur liée au balises mais au padding-top , que j'aurait du remplacer par un margin

Mais merci au personnes qui on répondu calmement sans prise de tête
Meilleure solution
Sujet clos
Aller à