[Résolu] :target , :nth-child, ::after, >, ~, +

Question

Artenis

2 Dec 2013 à 11:08

Bonjour,

j'ai réalisé un menu horizontal coulissant dans une div
Représentation :
sur une ligne on a la barre de navigation avec trois onglet .
juste en dessous on a une div en overflow:hidden contenant trois div correspondant aux trois onglets de la navigation imbriqué dans une div ayant la taille en largeur des trois divs
Fonctionnement :
Lorsque je clique sur un onglet de la navigation la div contenant les trois divs va glisser à droite ou a gauche pour faire apparaitre la div en relation avec l'onglet.
ça, ça marche.
Ce que je cherche à faire: c'est qu'à chaque clique (:target) de mes onglets, ceux-ci change de couleur de background (orange), initialement le background est blanc. Sauf que par defaut le premier onglet (#Agenda_Resume) doit avoir un background orange. C'est là que je n'arrive pas à écrire la bonne syntaxe pour cibler les div concerné.

j'ai essayé ceci :

#Agenda-Lien-Saint .contener_onglet li#AR{background:orange;}
#Agenda-Lien-Saint .contener_onglet li#LR{background:white;}
#Agenda-Lien-Saint .contener_onglet li#SR{background:white;}

#Agenda-Lien-Saint .contener_onglet ul li,
#Agenda-Lien-Saint #Slide_ALS #Lien_Resume:target + .contener_onglet ul li#LR:nth-child(1),
#Agenda-Lien-Saint #Slide_ALS #Saint_Resume:target + .contener_onglet ul li#SR:nth-child(1)
{background:orange;}

Voici le code html Utlisé :

<div id="SecondBloc">
    
    <div id="Agenda-Lien-Saint" class="bloc_sd"> // Barre de navigation
        <ul class="contener_onglet">
            <li class="Onglet_Title add_border" id="AR" style="margin-left:15px;">
            <a href="#Agenda_Resume">Agenda</a>
            </li>
            <li class="Onglet_Title add_border" id="LR">
            <a href="#Lien_Resume">Le Lien</a>
            </li>
            <li class="Onglet_Title " id="SR">
            <a href="#Saint_Resume">Le saint du Jour</a>
            </li>
        </ul>
        
        <div id="Slide_ALS"> // Overflow
            <a id="Agenda_Resume" class="ancre"></a> // ancre permettant de cibler la div correspondante Agenda_Resume
            <a id="Lien_Resume" class="ancre"></a> // ancre permettant de cibler la div correspondante Lien_Resume
            <a id="Saint_Resume" class="ancre"></a> // ancre permettant de cibler la div correspondante Saint_Resume
            <div id="ALS_container">
                <div id="Agenda_Resume" >
                    <div class="MiniArticle_Bloc" >
                        <div class="Date_agenda">
                        <span style="font-size:10px; ">Lundi</span>
                        <span style="font-size:25px; font-weight:bold; ">14</span><br />
                        <span style="font-size:17px; font-weight:bold;">Janvier</span><br />
                        <span style="font-size:12px; ">2014</span>
                        </div>
                        <div class="Titre-Rappel">
                            <div class="Titre_agenda">Formation paroissiale sur l'eucharistie </div>
                            <div class="Rappel_agenda">l'équipe eucharistique vous invite...</div>
                        </div>
                        <div class="AddCalendar-ReadArticle">
                            <div class="AddCalendar" alt="Ajouter à l'agenda"><img src="icone-agenda.png"></div>
                            <div class="ReadArticle" alt="Accèder à l'article"><img src="icone_oeil.gif" style="align-height:40px;"></div>
                        </div>
                    </div>

Espérant que je me suis clairement expliqué, je vous remercie pour vos réponses futures

gc-nomade

2 Dec 2013 à 16:33

Bonjour,
les sélecteurs +, >,~ ne peuvent cibler que des éléments frere derriere , ils ne remontent pas dans le flux, il coule sans remonter le courant.

Ta deuxième série de sélecteur ne cible rien , car .contener_onglet n'est ni frère ni derrière #Lien_Resume.
++

Peter-L

2 Dec 2013 à 17:04

Bonjour,

Alors avant toutes choses il y a une erreur dans ton code html: tu as des id dupliquées ce qui est impossible.
ex:
#Agenda_Resume est l'ancre mais aussi la div cible ce qui n'est pas possible .

Pour le target, il faut effectivement des ancres avant le conteneur global afin de cibler le bon élément.
Donc pour ton cas, il faut garder tes ancres et renommer tes div cibles.

Ensuite pour ce qui est du background de l'onglet, il faut cibler le <li> parent du lien actif. En CSS4 ce sera possible Smiley biggrin

!! mais pour l'heure ça ne l'est pas du coup du devra passer par du javascript en utilisant l’événement onclick

Bon courage Smiley cligne

Artenis

2 Dec 2013 à 17:55

Merci pour la réponse,

j'aimerais tout de même savoir si dans dans le code HTML précédent il est possible d'effectuer l'animation expliquée , c'est à dire au click d'un onglet #AR, #LR, #SR, changer le background et changer le background par défaut du premier onglet lorsqu'on clique sur #LR ou #SR.

A moins qu'il soit indispensable de passer les attribut a href ayant pour class "ancre" juste après l'id #SecondBloc ? afin d'utiliser le secteur "enfant direct >"

Artenis

2 Dec 2013 à 18:09

Peter-L a écrit :
Bonjour,

Alors avant toutes choses il y a une erreur dans ton code html: tu as des id dupliquées ce qui est impossible.
ex:
#Agenda_Resume est l'ancre mais aussi la div cible ce qui n'est pas possible .

Pour le target, il faut effectivement des ancres avant le conteneur global afin de cibler le bon élément.
Donc pour ton cas, il faut garder tes ancres et renommer tes div cibles.

Ensuite pour ce qui est du background de l'onglet, il faut cibler le <li> parent du lien actif. En CSS4 ce sera possible !! mais pour l'heure ça ne l'est pas du coup du devra passer par du javascript en utilisant l’événement onclick

Bon courage

Je ne suis pas sûr d'avoir saisi la remarque même si je sais très bien qu'il ne peut y avoir deux id identiques, mais j'ai réutilisé le code utiliser dans un exemple du site css3create.com
il est bien spécifié qu'il faut une ancre renvoyant vers l'id de la div qui va être animé et une div ayant cet id afin, entre autre, d’empêcher (je crois) le scroll automatique de la page lors du clique sur un onglet.

le lien montre également ce que je veux faire si jamais vous n'aviez pas piger mon explication !

Peter-L

2 Dec 2013 à 18:32

Alors je pense que tu as mal repris le code de ce tuto qui est super bien fait et qui explique en détail ce qu'il se passe. je te met un lien vers le même site mais un autre tuo (astuce pour empêcher le scroll) et ainsi tu comprendras mieux:

Lien vers CSS3Create

Tes div cibles doivent avoir une autre id !!!!

tu dis:
même si je sais très bien qu'il ne peut y avoir deux id identiques, mais j'ai réutilisé le code utiliser dans un exemple du site css3create.com

OK alors si tu le sais pourquoi le faire? tu aurai dû te faire la réflexion suivante:

Bon faut pas 2 id identiques... je le sais... donc deux solutions: 1/ j'ai mal compris l'exemple 2/ l'auteur de cet exemple à fait une erreur, dans ce cas je n'applique pas !

Peter-L

2 Dec 2013 à 18:32

Alors je pense que tu as mal repris le code de ce tuto qui est super bien fait et qui explique en détail ce qu'il se passe. je te met un lien vers le même site mais un autre tuo (astuce pour empêcher le scroll) et ainsi tu comprendras mieux:

Lien vers CSS3Create

Tes div cibles doivent avoir une autre id !!!!

tu dis:
même si je sais très bien qu'il ne peut y avoir deux id identiques, mais j'ai réutilisé le code utiliser dans un exemple du site css3create.com

OK alors si tu le sais pourquoi le faire? tu aurai dû te faire la réflexion suivante:

Bon faut pas 2 id identiques... je le sais... donc deux solutions: 1/ j'ai mal compris l'exemple 2/ l'auteur de cet exemple à fait une erreur, dans ce cas je n'applique pas !

gc-nomade

2 Dec 2013 à 18:33

je me repete, , tu peut pas remonter dans le flux via des selecteurs d'adjence, pour ton background orange.
Une horrible solution serait de doubler tes liens d'un label et de placerer des input radio, que je ne dirais pas où, car c'est totalement irraisonnable et que pour cette partie, ou c'est js ou c'est rien Smiley smile

Cdt,

Artenis

2 Dec 2013 à 18:45

Bon, ok,
j'ai compris, je vais refaire le code et modifier mes id en doublon,

je posterais une réponse lorsque l'animation souhaitée fonctionnera.
merci

Artenis

10 Dec 2013 à 11:38

Donc j'ai trouvé une solution, qui ne correspond pas à ce que je voulais, mais qui marche parfaitement.

Ainsi je n'ai pas réussi à adapter le code de ccs3create.com, car j'ai les onglets utilisés dans les exemples sont mis en position:absolute; , c'est à dire que les onglets(menu) sont passés par dessus le div qui glisse de gauche à droite. Par conséquent l'arborescence du code est inversé et donc forcément les onglets deviennent enfants du bloc qui glisse et non pas l'inverse.
en fin de compte j'ai eu la flemme de tout refaire.

voici la solution en jquery (ce n'est plus du css3):

$('#Agenda-Lien-Saint li').on('click',function (){
                $('#Agenda-Lien-Saint li').removeClass('orange');
                $(this).addClass('orange'); 
                $('#Edito-Lecture-Donation li').removeClass('orange');
                $('#Edito-Lecture-Donation li').first().addClass('orange');
        });
        $('#Edito-Lecture-Donation li').on('click',function (){
                $('#Edito-Lecture-Donation li').removeClass('orange');
                $(this).addClass('orange');  
                $('#Agenda-Lien-Saint li').removeClass('orange');
                $('#Agenda-Lien-Saint li').first().addClass('orange');
        });

Sujet clos

CSS et mise en forme, CSS3

[Résolu] :target , :nth-child, ::after, >, ~, +