28172 sujets

CSS et mise en forme, CSS3

BLOQUER LE TITRE SOUS LOGO

Bonjour,

Ma configuration WP actuelle

Version de PHP/MySQL : 7.0.30
Thème utilisé : bloggist_child
Extensions en place :
Nom de l’hébergeur : Moi même
Adresse du site : http://www.remiforest.fr
Problème(s) rencontré(s) :



Bonjour !



Actuellement quand je scroll dans mes pages, mon contenu défile vers le haut ( logique hein ) et va SUR le logo et le menu ( c’est voulu ).

J’aurais aimé pouvoir faire en sorte que, lorsque je scrolle, mon titre de la page se bloque sous le logo, et que le contenu sous le titre, défile » à l’intérieur » du titre. Qu’il puisse disparaître à l’intérieur de la barre du titre sans qu’il dépasse…



Mvoyez ? Car si je me contente de bloquer uniquement le titre sous le blog au scroll, le contenu sous le titre va la dépasser, mais il va se voir puisque mon logo est transparent.



Et il fraudait qu’il puisse revenir a sa position initiale si je scroll de l’autre sens.



Alors j’ai essayé la méthode :



position : sticky

top : hauteur voulue



Mais ça ne marche pas alors j’ai du mal sélectionné la div en question mais j’ai tout essayé ça na pas marché.

Je pense qu’il faut le faire en Javascript et c’est pour cela que je demande votre aide car avec les tuto sur le net je suis un peu perdu.

Pour tester le mieux c’est de le faire avec la page contact, car pour l’instant je n’ai pas fait le contenu.

Merci beaucoup de votre patience et soutient !



Des bisous !
Modérateur
Bonjour,

Vu la quantité industrielle de scripts qu'il y a dans la page, je ne vois pas comment faire fonctionner tout ça à moins d'avoir un coup de bol.

Je pense qu'il faudrait que tu te fasses une page de test html avec juste l'essentiel :
- le fond animée
- le header
- la section où se trouve "Accueil"

Ensuite tu ne laisses que les scripts absolument nécessaires à la mise en page.

Et ensuite, on pourra regarder quel css peut faire l'effet que tu souhaites.

Amicalement,
Bonjour, merci de te réponse.

Du coup j’ai mis du texte sur accueil et rien d’autre je sais pas si c’est bon ?
Modérateur
Bonjour,

Bon, y a du boulot.

Question 1 :

Que fait ce <ul> dans la partie <head> de la page ?

Amicalement,
Alors c’est un thème que j’ai repris donc il doit y avoir énormément d’erreurs, je suis novice encore donc j’apprends sur le tas.
Modérateur
Bonjour,

Je te garantis que si un petit scarabée se pointait dans mon bureau avec une page de test de ce genre, il ressortirait vite fait. Smiley cligne

Ce <ul> ne doit pas se trouver là. Il faut la déplacer, éventuellement juste après <body>, mais je ne peux pas garantir que ce soit le bon endroit.

Et tu risques d'avoir des scripts qui ne fonctionneront plus. Regarde ce que ça donne dans ta page complète si tu places ce <ul> juste après <body>. Si c'est ok, alors, tu la déplaces aussi dans ta page de test.

Pendant ce temps, je regarde ce qui ne va pas dans cette page de test.

Amicalement,
Modifié par parsimonhi (15 Jan 2019 - 09:14)
Modérateur
Bonjour,

Remarque :
Le texte d'exemple est truffé de div de div de div ....

Il faudrait y mettre de l'ordre. Si tu mets le lorem ipsum plusieurs fois, mets le successivement. Il faudrait avoir quelque chose du genre :

<div class="elementor-widget-container">
    <div class="elementor-text-editor elementor-clearfix">
        <div>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </div>
    </div>
</div>


Si ta page de test est bordélique, les gens qui te lisent vont perdre beaucoup de temps à l'analyser, et ils ne répondront pas à ta question.

Amicalement,
Tu peux dans un premier temps éliminer la transparence de ton titre et lui appliquer un fond, comme ça le contenu passera dessous.

Ensuite, via JS, tu as la possibilité d'ajouter ou de supprimer une classe à ton titre, pour donc le fixer quand il atteint sa position sous le logo.

exemple (x étant la hauteur entre le haut de ta page et le bas de ton logo) :
 
var pos = $('.mon_titre').offset().top - x;      
function stick_titre() {        
    if(window.pageYOffset > pos) {
        $('.mon_titre').addClass('sticky');
    }
    else {
        $('.mon_titre').removeClass('sticky');  
    }
} 
window.addEventListener("load", stick_titre, false); 
window.addEventListener("resize", stick_titre, false); 
window.addEventListener("scroll", stick_titre, false);


Ca devrait fonctionner... Bon courage Smiley cligne
Bonjour ! Merci pour vos retours !

J'ai supprimé le UL par une DIV dans le header pour le menu.

J'avais copié ce code pour faire un menu en version mobile.

Pour la page d’accueil, avec le Lorem ipsum, je l'ai fait avec elementor, j'ai mis du texte et j'ai copier coller plusieurs fois ( assez pour pouvoir descendre ).

C'est sur que le code est dégeu, je débute et de toute façon je ne veux pas être développeur, mais si je pouvais réussir a faire ça propre quand même ^^

Pour le logo, je suis obligé de mettre un fond ? Car je voulais le laisser transparent.

Merci en tout cas de votre aide ! En plus c'est ma fête aujourd'hui ^^
Modérateur
Bonjour,
Gregoryen a écrit :

Pour le logo, je suis obligé de mettre un fond ? Car je voulais le laisser transparent.


Si tu veux un fond transparent, tu mets un fond transparent.

Amicalement,
Modifié par parsimonhi (15 Jan 2019 - 14:40)
Modérateur
Bonjour,

Gregoryen a écrit :
J'ai supprimé le UL par une DIV dans le header pour le menu.


Il faut ni div, ni ul, ni li, etc. dans la partie head de la page.

Entre <head> et </head>, tu peux mettre des balises base, meta, link, title, style, script, noscript.

Ceci dit, ça ne va pas empêcher les navigateurs d'afficher quelque chose : ils en ont vu bien d'autres !

Gregoryen a écrit :
Alors j'ai essayé mais cela n'a pas fonctionné


Sinon, le fait que le script de Pedrothelion marche ou pas dépend de la manière dont tu l'as adapté (car il faut l'adapter à ta situation : c'est pas juste du copier-coller).

As-tu ajouté dans les css le comportement que doit avoir la classe sticky ?
As-tu donné une valeur à x ?
As-tu remplacé $ par jQuery ou encapsulé le code dans une fonction anonyme ?
As-tu fait les probables autres adaptations nécessaires (aucune idée jusqu'où il va falloir aller vu tout ce qu'il y a dans ta page) ?

Il est probable que ce soit assez délicat à adapter de toute façon. Rien que le fait de redimensionner la fenêtre devrait apporter son lot de surprises.

Amicalement,
J'avais mis des <li> pour pouvoir espacer de 10px les bouton du menu en version mobile.

X équivaut a la hauteur du logo donc 105 px pour que ça aille en dessous.

J'avais mis le script dans un fichier " scroll.js " dans le dossier JS du thème.

Ensuite dans PAGE j'ai mis " <script type="text/javascript" src="js/scroll.js"></script> "

Je n'ai pas remplacé le $, après je suis novice donc je ne connait pas.
pour la valeur de x :
var pos = $('.mon_titre').offset().top - 105;


et non pas : 
var pos = $('.mon_titre').offset().top - 105px;


jQuery est-il bien appelé dans ta page?
Bien appeler le script après l'appel de jQuery
Modérateur
Bonjour,
Pedrothelion a écrit :
jQuery est-il bien appelé dans ta page?

Il l'est, mais avec le prefix jQuery au lieu de $.

De toute façon, ça va pas suffire.

Amicalement,
Pour Jquery j'ai mis cette balise dans le HEAD de la page Head.php

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Sujet clos
Aller à