Arrange toi pour que je n'ai pas à dire deux fois les mêmes choses, s'il te plait, sinon après tu vas dire que je m'énerve.
Et c'est vrai que ça me fout en pétard de me répéter !
Bon, cette fois ci, on va rester zen, hein ?
Hier, je t'ai dit, pour ta page d'accueil :
Ton section est trop large, sous certaines résolutions, il fout le camp tout en bas sous le nav. Place sa largeur à 1% de moins, soit 67%.
Aujourd'hui, rien n'est fait et le problème existe toujours quand je teste ton site.
Pour les éléments qui bougent dans tous les sens comme de beaux diables dès qu'on modifie un truc, on va les clouer en trichant un peu.
On va placer un élément à droite de l'écran, sur la même ligne que l'image, qui fera un pixel de large et exactement la hauteur de l'image. De cette façon, le nav ne pourra plus jouer à l'abruti en se plaçant à côté de l'image vu qu'il y aura déjà du monde.
Bien sûr, ce sera un élément invisible.
Crée une classe qu'on appellera
blank :
.blank {
float: right;
border: none;
padding-right: 1px;
padding-bottom: 200px;
}
En responsive, cette classe sera comme suit :
.blank {
padding-bottom: 8.1em;
}
Tu remarqueras que sur ordi ou portable, cette classe blank fait exactement la hauteur de l'image d'entête et c'est très important !Si tu modifies la hauteur de cette image, il faudra impérativement adapter le
padding-bottom de la classe
blank pour qu'il soit strictement de la même hauteur aussi !
Ensuite, diminue la largeur de l'image d'entête. Tant qu'elle fait 100%, notre élément ne pourra pas s'intercaler à côté. Donne lui 99.9% par exemple. Il doit y avoir au moins 1 pixel de disponible à droite !
Tant que tu modifies la largeur, tu n'as pas à modifier
blank. Seule la hauteur intéresse
blank !
Et pour finir, on va placer notre élément invisible à droite de l'image d'entête :
<header>
<a href="https://beninfongbe.com/" target="_self"><img src="roseau.jpg" ><span class="blank"></span></a>
</header>
Voilà, tu peux maintenant régler la largeur de cette image sans que les autres éléments ne cavalent de partout. Fais déjà ceci, on verra pour la suite (les droits de l'homme) ensuite. Un problème à la fois.
N'oublie pas ! Le
padding-bottom de la classe
blank doit toujours faire la hauteur de ton image !
En normal et en responsive !