Décorations de noël trop hautes

[Charlyguif]

Détails techniques

Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis la mise en place déco de noël 12/12/2021
Lien du forum : http://www.anciens-cols-bleus.net

Description du problème

Bonjour à toutes et à tous
Petit problème avec mes déco qui sont trop hautes et en ce qui concerne la guirlande, si j'en mets une plus épaisse nous n'avons plus accès aux divers boutons.


D'habitude les déco sont en dessous de la barre.

[Toryudo]

Bonjour,
C'est un problème de profondeur, de z-index, qui n'est pris en compte que si vous positionnez la propriété CSS position. Rajoutez simplement un peu de code CSS sur votre élément #fa_toolbar :

Code:

#fa_toolbar {
    position: relative;
}

Et hop, la barre repassera par-dessus les guirlandes !

[Charlyguif]

Bonjour et merci Toryudo

Lorsque je rajoute




La guirlande et les attaches père noël et sapin disparaissent sous la barre et non au bas.

[Toryudo]

Ah, désolé, je n'avais pas bien compris.
Du coup, si vous voulez baisser les éléments, vous devez modifier leur CSS top.

Par exemple, vous pouvez modifier le CSS que vous avez sur les éléments .christmas-body, #christmas_stars, pour leur mettre un top: 70px;. Même chose pour .northpole-body, #northpole_stars. Puis, si vous voulez changer la guirlande également, vous pouvez lui mettre un top: 52px;. C'est en agissant sur le top que vous pourrez les abaisser autant que vous en aurez envie !

[Charlyguif]

Bonjour Toryudo

En ce qui concerne le

Je dois le placer dans le javascript de la déco concernée ?
Si oui, je l'ai fait et rien n'a bougé.

[Toryudo]

Bonjour !
Non, même si ça concerne un élément ajouté en JavaScript, on va agir dans la feuille de style CSS.
Voici le code complet pour vous faciliter la tâche !

Pour les décorations qui pendent :

Code:

.christmas-body, #christmas_stars, .northpole-body, #northpole_stars {
   top: 70px !important;
}

Pour la guirlande, si vous voulez également la déplacer :

Code:

.lightrope {
   top: 52px !important;
}

Vous pouvez également ajuster ces valeurs de top à votre convenance !
Ça devrait le faire cette fois !

[Charlyguif]

Bonjour et merci Toryudo
Dans la feuille de style CSS je n'ai rien qui corresponde aux décorations.

[Toryudo]

Bonjour !
Pour l'explication, les JavaScript ajoutent dynamiquement du code HTML et du CSS à votre page, mais ce code, vous ne pouvez pas le voir directement dans la feuille CSS. Quand on inspecte votre page en direct, on peut cependant voir le résultat final, comme par exemple :


Si le JavaScript injecte du code dynamiquement dans votre page, nous, de notre côté, on peut forcer la priorité d'un autre CSS qu'on aura écrit dans la feuille CSS. C'est pour cette raison qu'en recopiant les morceaux de code que je vous ai donnés tels que je les ai écrits, ils auront la priorité sur le CSS qui est créé dynamiquement par le JavaScript : on va donc remplacer le top: 5px; que vous pouvez voir sur la capture d'écran par un top: 70px !important; et ainsi abaisser les décorations.

[Charlyguif]

Grand merci Toryudo, grâce à vous tout est maintenant ok.
Bonnes fêtes de fin d'année.