Bouton sur bannière - problème de position
Plop31 Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je rencontre un problème avec la bannière de mon site. Je n'arrive pas à mettre un bouton à un endroit fixe. Il se décale à chaque fois vers la droite quand je change de résolution d'écran.
Voici le code que j'utilise actuellement :
<header>
<div style="background-image: url('https://i.postimg.cc/sf5WfPSS/background-header.jpg'); background-position: center; background-size: cover; height: auto; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; position: relative;">
<img src="https://i.postimg.cc/sfmLLWXP/banni-re-blog-pb.jpg" alt="Bannière du blog" style="max-width: 80%; height: auto; overflow: hidden; display: block;">
<a href="lien-podcast" class="button-hover">
Ecoute ton podcast
</a>
</div>
</header>
<style>
.button-hover {
position: absolute;
top: 90%;
left: 83%;
transform: translate(-50%, -50%);
background-color: #ff721f;
color: #fff;
padding: 2px 4px;
font-size: 0.65rem;
border-radius: 2px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button-hover:hover {
background-color: #fff;
color: #ff721f;
border: 2px solid #ff721f;
}
</style>
Je voulais également savoir comment est-ce que je vais pouvoir ne pas avoir de problème sur les affichages mobiles aussi.
Pour information, je travaille avec Wordpress.
Merci d'avance aux personnes qui contribueront à résoudre mon problème !
Bonne fin de journée.
- Bouton sur bannière - problème de position
- Ma position - Guide
- Suivi position google - Guide
- Diagnostic bouton photo - Accueil - Outils
- Bouton reinitialisation pc - Guide
- Comment faire une capture d'écran sur un samsung sans bouton ? - Guide
1 réponse
Bonjour,
Ton problème de bouton qui se décale vient de l’utilisation de la propriété `position: absolute` avec des valeurs fixes pour `top` et `left`, ce qui rend l’élément sensible aux changements de résolution et de taille d’écran.
Voici quelques améliorations pour fixer le bouton et le rendre plus responsive, notamment pour les écrans mobiles :
1. Unités relatives
Plutôt que des pourcentages pour `top` et `left`, essaie d’utiliser des unités relatives comme `vw` (viewport width) et `vh` (viewport height) ou des `rem` pour que l’élément s’ajuste mieux à différentes résolutions.
2. Media Queries pour la ResponsivitéPour gérer les affichages mobiles, tu peux utiliser des **media queries** afin d’ajuster la position et la taille du bouton en fonction de la largeur de l’écran. Je te donne un exemple de code amélioré :
<header>
<div style="background-image: url('https://i.postimg.cc/sf5WfPSS/background-header.jpg'); background-position: center; background-size: cover; height: auto; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; position: relative;">
<img src="https://i.postimg.cc/sfmLLWXP/banni-re-blog-pb.jpg" alt="Bannière du blog" style="max-width: 80%; height: auto; overflow: hidden; display: block;">
<a href="lien-podcast" class="button-hover">
Ecoute ton podcast
</a>
</div>
</header>
<style>
/* Style du bouton */
.button-hover {
position: absolute;
top: 80vh; /* Position relative à la hauteur de la vue */
left: 50%; /* Centre le bouton horizontalement */
transform: translate(-50%, -50%);
background-color: #ff721f;
color: #fff;
padding: 8px 16px;
font-size: 1rem; /* Taille de police plus grande pour le desktop */
border-radius: 4px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button-hover:hover {
background-color: #fff;
color: #ff721f;
border: 2px solid #ff721f;
}
/* Responsivité pour écrans mobiles */
@media (max-width: 768px) {
.button-hover {
top: 70vh; /* Ajuste la position pour les écrans plus petits */
font-size: 0.8rem; /* Réduit la taille de la police pour mobile */
padding: 6px 12px;
}
}
</style>
Avec ce code, ton bouton devrait rester en place et être responsive.
Bonne chance
Bonsoir Stefan,
Un grand merci pour ta réponse, ta pédagogie et d'avoir pris le temps de bien tout m'expliquer.
J'ai compris tes explications et ai tenté d'appliquer le code. Lorsque je le prévisualise dans le bloc HTML Wordpress le bouton apparaît bien mais lorsque j'enregistre et publie les modifications sur le site le bouton n'apparaît pas. J'ai bien regardé ton code plusieurs fois et je ne comprends pas ce qui pêche pour qu'il ne fonctionne pas sur le site.
Aurais-tu une idée de pourquoi ?
Merci de ton aide en tout cas.