Bannière et ascenseurs menus

JoeJoe Member

Bonjour, nouveau sur le forum, débutant en HTML et CSS , j'utilise PLUXML 5.8.2, Ckeditor et plxmycontact.
ma bannière cache mes menus déroulants si ma fenêtre de navigation est inférieure à 2033 px.
de plus j'aimerais garder ma bannière sans déformation à 1280 px de large.
après recherche et beaucoup de lecture de posts concernant la bannière , je ne sais pas comment faire

c'est un projet de site pour mon association
le lien : http://totalkrav54.free.fr/

en attente d'une réponse, je vous remercie
Joe

Réponses

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    avril 2020 modifié

    Bonjour,
    Sur mon smartphone, il s'affiche "2630" en haut et à droite de l'écran. 2 départements qui se rapprochent ?
    Pour la triple barre, il faut échapper le code :

    .responsive-menu label::after {
        content: '\2630';
    }
    

    Pour éviter l'étirement de la bannière, il faut virer les background-size : cover

    .bg {
        background: url(../img/bg.jpg) top center no-repeat;
        /* -webkit-background-size: cover; */
        /* -moz-background-size: cover; */
        /* -o-background-size: cover; */
        /* background-size: cover; */
        height: 250px;
    }
    

    Mon avis perso est que ce n'est pas une bonne idée d'utiliser une image de fond. Sur un smartphone, elle va être tronquée.
    Il vaut mieux insérer une balise <img> dans la page HTML et limiter sa largeur à 100% en CSS.

    <div class="banner"><img src="themes/defaut/img/bg.jpg" alt="Self-Défense 54" width="1280" height="250"></div>
    
    .banner {
        text-align: center;
        padding: 0 1rem;
    }
    .banner img {
        max-width: 100%;
    }
    
  • JoeJoe Member

    bonjour et merci pour votre réponse rapide

    • pour la triple barre je n'arrive pas a échapper le code
    • ma bannière est bien calée maintenant
    • pour la balise :

    <

    div class="banner"><img src= ...... je l'intégre dans header.php ??? et a quel endroit
    pour.banner { , .banner img { je suppose qu'il faut les coller dans theme.css

    cordialement

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    avril 2020 modifié

    Hé Joe,

    Pour échapper il faut mettre un antislash devant le nombre : "barre oblique du 8", 2 touches à droite du "tiret du 6" :grin:

    En principe,c'est dans le fichier header.php
    Tu cherches "<div class="bg"></div>" et tu remplaces par :

    <div class="banner"><img src="themes/defaut/img/bg.jpg" alt="Self-Défense 54" width="1280" height="250"></div>
    

    et theme.css, tu rajoutes

    .banner img { max-width: 100vw; }
    
  • JoeJoe Member

    bonjour bazooka07

    impossible d’échapper content: '2630'; je mets l'antislash, j'enregistre, et si j'ouvre à nouveau theme.css l'antislash a disparu !!!

    est il possible de centrer la bannière ?

    de plus il y a un trait fin en gris juste sur au niveau supérieur de la bannière : cela ne pose pas de problème ?

    merci d'avance

  • JoeJoe Member

    Bonjour,
    pour centrer la bannière j'avais oublié .banner {
    text-align: center;
    padding: 0 1rem;

    pour les menus déroulants ça fonctionne en format mobile mais pas en page ordinateur, et toujours impossible d’échapper content: '2630'
    merci d'avance

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    mai 2020 modifié

    Tu ne nous a pas dit quel éditeur tu utilises.
    Pour le problème d'échappement, essaie de taper 2 fois l'anti-slash "\"

    .responsive-menu label::after {
        content: '\\2630';
    }
    

    Ne t'inquiètes pas si le double anti-slash a disparu quand tu réaffiches la page.
    Vérifie simplement que le caractère s'affiche.
    Il faudra doubler l'anti-slash avant chaque sauvegarde.
    Quel éditeur utilises tu ?

  • JoeJoe Member

    bonjour,
    je bloque toujours avec content: '\2630'; impossible de le sauvegarder

    pour l'éditeur, je modifie directement mes php et mes css dans le thème

    un autre petit problème : j'ai ajouté dans mon onglet événements un sous menu Démonstration qui apparait en format mobile mais pas en format ordinateur ! comme si la taille de mon block était figée

    désolé pour les termes mais je débute

    PLUXML 5.8.2, Ckeditor , artgalerie et plxmycontact

  • JoeJoe Member

    bonjour

    résolu mon pb de triple barre :
    dans mon theme.css j'ai 2 fois cette ligne :
    @media (max-width: 767px) { etc ...
    et plus bas
    @media (max-width: 767px) { etc ...

    j'ai bien modifié en \2630 les deux et j'ai ma triple barre merci Bazooka07

    un autre petit problème : j'ai ajouté dans mon onglet événements un sous menu Démonstration qui apparait en format mobile (quand je réduit la fenêtre) mais pas en format plein écran, comme si la taille de mon block était figée
    de plus sur mobile mes menus déroulants ne s'affichent pas

    d'avance merci

Connectez-vous ou Inscrivez-vous pour répondre.