5569 sujets

Sémantique web et HTML

H1 a bloquer

Bonjour à tous,

C'est soit la fatigue ou le surmenage mais je n'arrive pas à centrer ce titre pour qu'il ne se déplace pas en dehors du mur de carrelage. Je veux qu'il garde ses proportions ca c'est pas compliqué ou ça se complique c'est quand je change de résolution il ne reste pas à sa place comme les trois images que j'ai pu paramétrer. upload/1707499844-85631-screenshot2024-02-09at17-22-3.png

Merci pour votre aide.

Bruno.
Bonjour,

étrange, un premier DOCTYPE et lang=fr qui se termine avec un <body> ouvert mais pas fermé et un title=Document.
Puis un second DOCTYPE et lang=en et un title=Images Positioning. Enfin, deux fermetures html et body tout à la fin.
J'enlèverais aussi la div qui entoure h1, inutile. Ce h1 peut aussi se mettre en flex. Et je ne comprends pas ce mix de % rem et vw (mais ce n'est pas là le problème du positionnement).
C'est un peu mélangé et surtout ça peut être fait plus simple. Mais avec un code sous forme d'image, impossible (ou trop fatigant) de recopier pour tester des solutions. Il doit bien y avoir un code sous forme de texte ?
Sans doute que le navigateur s'y retrouve, mais nettoyer pour y voir plus clair.
Bongota a écrit :
Bonjour,

étrange, un premier DOCTYPE et lang=fr qui se termine avec un &lt;body&gt; ouvert mais pas fermé et un title=Document.
Puis un second DOCTYPE et lang=en et un title=Images Positioning. Enfin, deux fermetures html et body tout à la fin.
J'enlèverais aussi la div qui entoure h1, inutile. Ce h1 peut aussi se mettre en flex. Et je ne comprends pas ce mix de % rem et vw (mais ce n'est pas là le problème du positionnement).
C'est un peu mélangé et surtout ça peut être fait plus simple. Mais avec un code sous forme d'image, impossible (ou trop fatigant) de recopier pour tester des solutions. Il doit bien y avoir un code sous forme de texte ?
Sans doute que le navigateur s'y retrouve, mais nettoyer pour y voir plus clair.


Bonsoir Bongota,

Et oui je dois être très fatigué je n'avais même pas vu ce problème de doublons des body. Pour le vw c'est pour le responsive et ca marche bien. Je vais suivre tes conseils.
Merci à toi à tous ceux qui aident.

Bruno/
Par contre j'ai nettoyer le code et pour bloquer le titre h1 il faut le bloquer avec top: 0; des que je veux le descendre un peu il se ballade de partout quand je zoom.
Étrange, mais sans code à tester, difficile de donner un diagnostique.
Peut-être il faut donner à h1 un peu d'espace, un petit with:6em; par exemple. Pourquoi une position absolute sur ce h1, il y a une raison ?
Bonjour,
voilà ce que j'ai rapidement mis en place. Ce n'est pas parfait, il faut peut-être encore ajuster, mais tout est au milieu et le h1 ne bouge plus quand on change la résolution. Il y avait des valeurs inutiles dans ton flex sur les images, j'ai enlevé. C'est une base, il faut encore ajuster, mais ça fonctionne. Je n'ai mis ici que la partie css qui concerne le problème, le reste est inchangé, mais tu n'as toujours pas rectifié le html dans le CodePen. Et si ça te plait, tu peux remettre le header en grid.

.header {display: flex;justify-content: space-around;}

.background {display: flex; width: 100%; height: 25vw;}
.pointp {display: flex; position: fixed; top: 0.8rem; left: 1rem; border-radius: 0.5rem;}
.trucchi {display: flex; position: fixed; top: 0.8rem; border-radius: 0.5rem;}
.cifreo {display: flex; position: fixed; top: 0.8rem; right: 1rem; border-radius: 0.5rem;}

h1 {display:flex;margin:auto;justify-content:center;
Bonjour

Ton code est bon mais le EMC n'est pas sur l'image il est en dehors. Ca je sais faire mais le positionner sur l'image du carrelage. C'est autre chose. Tout en étant responsive et il ne l'est plus puisque tu as supprimer les vw.

Merci quand même.

Bruno.
Salut,

est-ce que tu veux que ton titre h1 soit sur le background ou juste en-dessous ? Et tu veux que ce titre descende avec l'image aussi ? Parce que mettre un titre sur une image, c'est autre chose.
Pour ce qui est du responsive, j'ai supprimé les vw sur le with du h1, si mes souvenirs sont bons. Pour avoir le responsive sur le texte il faut mettre sur la fonte "font-size:3vw;" par exemple. Là, je peux te garantir que le texte du h1 devient reponsive. J'ai lancé des essais sur le module adaptatif de Firefox.
Il faudrait aussi mettre des @media pour les mobiles, pour que le changement soit plus précis et qu'il n'y ait pas de rupture.
Quand tu m'auras répondu au sujet de la question du haut, j'ai un CodePen qui semble aller dans ton sens.
Voici un pen. J'ai mis la hauteur du background en auto. Pour avoir le titre h1 sur l'image, je l'ai mis en relative, avec une valeur en vw pour la fonte et une valeur négative pour la hauteur (à régler suivant tes vœux). N'ayant pas tes images, j'ai mis un chien pour le background, trouvé sur le net.
https://codepen.io/Codeurta/pen/zYbmZgY
Modifié par Bongota (11 Feb 2024 - 09:38)
Bonjour,
je comprends que tu as peut-être des occupation, mais j'ai passé un certain temps sur ton problème et sur mon dernier CodePen il me semble que je l'ai résolu.
Tu voulais ton h1 centré sur la page en mode mobile, je l'ai fait.
Tu as dit qu'il n'était plus responsive parce que j'avais enlevé les vw. J'ai résolu en mettant les vw sur les polices et non sur le width du h1.
J'ai fait un background avec un image prise sur le net et j'ai changé les couleurs des titres afin que tout soit visible.
J'ai rectifié ton html.
Je ne met aucune fierté d'avoir réalisé ce tout petit travail, mais ce serait un peu normal d'avoir au moins un retour ou un remerciement. Est-ce que ça convient ou pas ?
Parce que je n'ai pas la science infuse, je peux remettre sur l'ouvrage. Smiley cligne
Bonne journée.
Prévenir un modérateur
Répondre au sujet
Aller à