Bonjour, j'ai créé une nav contenue dans un lien (page d'accueil du site) elle même contenant un H1 (Le h1 contient une image). 

Je souhaiterais que la nav ou du moins cet ensemble de balises change de couleur au survol avec une transparence en rgba, or en mettant un hover avec une classe ça ne fonctionne pas la couleur ne change pas. J'ai essayé de mettre la classe sur le lien, sur la nav, sur le h1 rien n'y fait. Auriez vous une solution s'il vous plait ? Je vous partage les images du code HTML et CSS

Bonjour,

le contenu de ton lien (<nav>, donc) est en position: fixed, par conséquent ton lien se comporte comme s'il était vide (donc pour le background on repassera :D).

Mais déjà, côté HTML, ya des choses pas très logiques : <nav>, c'est pour la navigation principale. Ici tu y as mis ton titre de site, ce qui n'est pas faux en soi, mais dans ce cas, le lien doit être autour du titre, pas autour de <nav>. En effet, quand tu vas rajouter d'autres pages, tu vas mettre leurs liens dans <nav>, et du coup il y aura une incohérence. Corrige déjà ce point.

Bonjour Lamecarlate, 

Et merci premièrement pour ta réponse =) 

Que veux tu dire par "tu vas mettre leurs liens dans <nav>" concernant l'ajout d'autres pages ?

J'ai corrigé et placé le h1 dans le lien, eux-mêmes contenus dans la nav. 

Je ne savais pas, ça fait collapser en quelque sorte ? Je pensais que le parent prenait les attributs de son enfant direct, ou bien c'est l'inverse ? J'ai eu les deux sons de cloches :

Ah et ça ne fonctionne toujours pas =/

Lamecarlate a écrit:

Bonjour,

le contenu de ton lien (<nav>, donc) est en position: fixed, par conséquent ton lien se comporte comme s'il était vide (donc pour le background on repassera :D).

-
Edité par Huriiil B. 15 septembre 2017 à 14:13:23

> Je pensais que le parent prenait les attributs de son enfant direct

Nope, jamais, pas en CSS. On a de l'héritage possible entre parent et enfant mais pas dans l'autre sens. Mais ici c'est un cas particulier : position: fixed force l'élément à être à une place très définie de la page, et cela le sort du flux. Aux "yeux" des autres éléments, ce dernier n'existe plus. Il n'influence plus rien, et n'est influencé par rien - on pourrait parler de transcendance Et donc mettre un background sur son parent ne va rien changer.

Peux-tu redonner ton code HTML corrigé, histoire de continuer sur de bonnes bases ?

Ah ok super, je pensais que le fait de sortir un élément du flux n'influençait que sur la position. Merci !

Du coup en fonction de ce que tu m'as dit j'ai mis le :hover sur la nav directement supposant qu'elle s'influencerait tout de même elle même, et ben ça fonctionne pas et je me demande si ce n'est pas lié au fait que c'est une image que j'ai mis sur le h1 car ça a fonctionné sur un fichier où j'ai mis une dièse en guise de lien à la place de l'image. (Je viens de faire de même sur ce fichier et je confirme bien que la dièse solutionne le problème mais moi je veux cette image qui donne une belle texture à la nav...)

Edit : J'ai solutionné le problème en mettant le tout dans un header et en mettant le h1 avant la nav

Vraiment merci infiniment Lamercarlate <3

Voici mes modif' : 

-
Edité par Huriiil B. 15 septembre 2017 à 14:50:18

Bon ben si tu as résolu c'est parfait

Pense à marquer ton sujet comme tel, merci !

(et la prochaines fois, poste ton code directement dans tes messages en t'aidant du bouton </> pour le colorer, là c'est assez illisible quand même)

Oui désolé c'est mon premier sujet ici et je suis pas trop opérationnel. Par exemple j'ai pas réussi en te citant à écrire après, ce que j'écris apparaît dans la citation =/

Je marque comme résolu tout de suite

-
Edité par Huriiil B. 15 septembre 2017 à 15:10:17

Ne sois pas désolé, ce n'est pas grave Je le précise souvent lors de la fin de la conversation, pardon si tu l'as senti comme un reproche.

Pour l'histoire de la citation : le wysiwyg est parfois difficile à manipuler, c'est vrai, j'ai souvent tendance à regarder la source (petit bouton "HTML" en bas à gauche) pour corriger ce genre de détails.

Ah non pas du tout je comprend tout à fait et c'est déjà vraiment sympa' de prendre le temps de m'aider alors autant que ce soit simple pour ceux qui prennent la peine de le faire quoi, en plus c'est plus simple que de faire des captures d'écran et de les partager manifestement

Au passage, le lien n'était plus cliquable alors j'ai mis le tout (header, nav, h1) dans le lien et ça fonctionne. Mais est ce qu'au niveau syntaxe, référencement et tutti quanti ça reste correct ?

<!doctype html>
<html>
    <head>
    <title>Bla bla</title>
        <meta charset="utf-8">
        <meta name"viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css" type="text/css">
        <style>
        	
            

        </style>
    </head>
    <body>

   <a href="index.html"><header><h1>Bla bla</h1><nav class="couleur_change">
    </nav></header></a>

 * {box-sizing: border-box;}

            body {
                background-image: url("images/black_paper.png");
                margin: 0;
                padding: 0;

            }

            a {
                text-decoration: none;
            }

            nav {
                position: fixed;
                top: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                height: 57px;
            }

            h1 {
                background-image: url("images/blackmamba.png");
                text-align: center;
                font-size: 2em;
                text-shadow: 6px 6px 3px black;
                color: rgb(20, 102, 130);
                margin: 0;
                height: auto;
                box-shadow: 0px 6px 8px black;
                padding: .3em;
            }

            .couleur_change:hover {
                background-color: rgba(0, 102, 102, .1);
            }

-
Edité par Huriiil B. 15 septembre 2017 à 15:59:21

Nope, mauvaise idée, car encore une fois tu auras d'autres liens dans ton menu, non ?

<header>
  <a><h1>Blabla</h1></a>
  <nav></nav>
</header>

devrait parfaitement fonctionner.

Lamecarlate a écrit:

Nope, mauvaise idée, car encore une fois tu auras d'autres liens dans ton menu, non ?

Oui c'est ce que je voudrais faire à terme.

Là c'est encore le bazar, j'aimerais avoir un header avec à l'intérieur un h1 à gauche et une nav à droite et qu'on puisse survoler le tout. Le survol ne fonctionne plus ou bien se positionne en dessous  je te repartage les codes : 

* {box-sizing: border-box;}

            body {
                background-image: url("images/black_paper.png");
                margin: 0;
                padding: 0;

            }

            a {
                text-decoration: none;
            }

            header {
                background-image: url("images/blackmamba.png");
                position: fixed;
                z-index: 1;
                top: 0;
                left: 0;
                width: 100%;
                height: 70px;
            }


            h1 {
                
                text-align: center;
                font-size: 2em;
                text-shadow: 6px 6px 3px black;
                color: rgb(20, 102, 130);
                margin: 0;
                height: auto;
                box-shadow: 0px 6px 8px black;
                padding: .3em;
            }

            .couleur_change:hover {
                background-color: rgba(0, 102, 102, .1);
            }

<header>
   <a href="index.html" class="couleur_change">
    <h1>Blabla</h1>
   </a>
   <nav></nav>
 </header>

<header><a href="index.html" class="couleur_change">
    <h1>Blabla</h1
    ><nav></nav></a>
    </header>

* {box-sizing: border-box;}

            body {
                background-image: url("images/black_paper.png");
                margin: 0;
                padding: 0;

            }

            a {
                text-decoration: none;
            }

            header {
                
                position: fixed;
                z-index: 1;
                top: 0;
                left: 0;
                width: 100%;
                height: 70px;
            }


            h1 {
                
                text-align: center;
                font-size: 2em;
                text-shadow: 6px 6px 3px black;
                color: rgb(20, 102, 130);
                margin: 0;
                height: auto;
                box-shadow: 0px 6px 8px black;
                padding: .3em;
                width: 30%;
            }

            nav {
                width: 70%;
                box-shadow: 0px 6px 8px black;
            }

            nav, h1 {
                background-image: url("images/blackmamba.png");
                display: inline-block;
                vertical-align: top;
            }

            .couleur_change:hover {
                background-color: rgba(0, 102, 102, .1);
            }

-
Edité par Huriiil B. 15 septembre 2017 à 19:08:20

Bonjour, 

Bon en fait j'ai solutionné le problème tout seul. C'est l'ensemble du code qui était douteux... 

Merci encore Lamecarlate !

Je t'en prie

Tu nous montreras la version fonctionnelle ?