[CSS] Mon bloc header décalé vers la droite et le bas...

Bonjour,

J’étais en train de coder un site quelconque avec un design particulier (header en haut de la page avec un bon vieux menu vertical avec l’aide des inline-block, margin et autres propriétés) quand tout à coup je me rends compte de quelque chose qui ne va pas dans l’apparence de ma page.

Mon header est quelquepeu décalé sur la droite et le bas par rapport à l’origine de la page, ce qui est dérangeant et pas très esthétique, car il est justement censé envelopper tout le haut de la page sans exception ; voilà une illustration qui décrit un peu la chose.

Ne me demandez même pas d’essayer de changer la valeur de certaines propriétés pouvant être reliés à la balise header ou même voir si je n’ai pas laissé une propriété abandonnée quelquepart dans mon .css, j’ai déjà vérifié cela et il s’avère que ce n’est pas le problème…

Je serais reconnaissant volontiers aux personnes voulant bien m’aider. Merci d’avance.

Tu dois reset le CSS, c’est-à-dire remplacer le CSS par défaut des navigateurs par le tien. Notamment, en faisant :

body {
   margin:0;
}

Merci de ton aide, mais il me semble que j’avais déjà essayé cela, ça n’a pas fonctionné.. je vais réessayer pour voir.

Essaye :

html,
body {
  margin:0;
  padding:0;
}

Il nous faudrait le code HTML, utilises-tu une balise P ? Utilise l’inspecteur d’éléments pour trouver la source du problème.

Salut,

En plus de ce qui a été dit précédemment, as-tu essayé d’observer la page avec les outils de développement de ton navigateur ?
Peut-être que ça te permettrait de trouver l’origine du souci.

Alors bonne nouvelle, ça a recollé le header vers le côté gauche de la page, néanmoins l’espace vers le bas est toujours présent ; non malheureusement ce n’est pas ça, il existe un petit bloc PHP destiné à la création de sessions et d’includes mais qui ne génèrent en rien du code HTML (rien d’invisible en tout cas, sinon je l’aurais notifié).

L’inspecteur d’éléments j’y ai pensé oui, mais je trouve pas grand chose, juste… du vide.

Utilises-tu une balise P ?

Bien évidemment que non. Sinon, je l’aurais vue…

Hum, pas d’autres propositions ?

Aïe, c’est embêtant…

Sans le code html on ne peut rien faire. Reproduit ton projet sur jsfiddle.net

Oui désolé, pour le coup j’avoue que je ne suis pas d’une grande aide… Qu’est-ce que jsfiddle.net est supposé m’apporter de plus par rapport à mon navigateur ? Je croyais que c’était juste quelque chose pour tester les fichiers Javascript et éviter les erreurs…

Ça nous permettra de voir et de tester ton code une fois que t’auras partagé le lien ici.

En plus de définir un margin:0 sur le body et html, applique le aussi a header et h1.

Je viens de tâter ma page avec l’inspecteur d’élemnts, lorsque je survole le bout de vide avec la souris, le bloc de sélection englobe tout le contenu de ma page blocs y compris comme si il s’agissait du bloc html… j’ai pourtant bien inscrit

margin:0;
padding: 0;
}

dans mon fichier CSS pour m’assurer que ce ne soit pas un problème de marges. Une idée ? Le code HTML n’apportera pas vraiment grand chose, comme je l’ai dit rien ne génère du HTML, vous pouvez juste vous imaginer le code d’une page lambda en fait…

Salut,

Comme l’ont dit mes VDD, sans le code HTML, on ne peut rien faire pour t’aider. Essaie un CTRL+U, et mets le résultat dans un jsfiddle ou un jsbin (avec le CSS et JS si nécessaire). Tu peux remplacer le contenu si c’est cela qui te dérange, tant que le problème apparaît toujours.

La plupart du temps pour corriger un problème, tu dois commencer par isoler le code (= le réduire au minimum) pour comprendre d’où vient le problème ensuite si tu ne comprends toujours pas la source du problème, tu traduits ton problème en mot clé et tu regardes sur stackoverflow.