Bannière et ascenseurs menus

Joe · avril 2020

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

bazooka07 · avril 2020

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%;
}

Joe · avril 2020

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

bazooka07 · avril 2020

Hé Joe,

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

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; }

Joe · avril 2020

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

Joe · avril 2020

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

bazooka07 · mai 2020

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 ?

Joe · mai 2020

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

Joe · mai 2020

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

Bannière et ascenseurs menus

Réponses