Incompréhension de la balise <div>

:(

Sujet résolu

Founny

17 janvier 2019 à 19:56:49

Bonjour,

j'ai un petit problème,

j'aimerai mettre le <div> tout en haut à gauche de la page, mais ce dernier s'amuse à se décaller:

user.oc-static.com/upload/2019/01/17/1547751207034_1.PNG

Voici l'html et le css:

<!DOCTYPE html>
<html>
<head>
	<title>Skullfox</title>
	<meta charset="utf-8" />
	<link rel="icon" href="icon.ico">
    <link rel="stylesheet" href="index.css" />
</head>
<body>
	<header>
		<div id="header">
    		<div id="element1"><span id="titre">SKULLFOX</span></div>
		</div>
	</header>
</body>
</html>

body
{
	background-color: #f1f1f1f1;
}

#header
{

    background-color: #36393f;;
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
}

J'attends vos idées avec impatient

(même si j'ai l'impression que je vais me faire pété tellement mon erreur est stupide)

-
Edité par Founny 17 janvier 2019 à 23:38:35

Lamecarlate

17 janvier 2019 à 20:23:44 - Message modéré pour le motif suivant : La demande de l'équipe de modération a été honorée

Pas d'aide concernant le code par MP, le forum est là pour ça :)

philiga

19 janvier 2019 à 20:56:09

Bonsoir,

Piège classique du à la marge par défaut de body.

Solution:

body
{
  margin:0;
}

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Duckerson

20 janvier 2019 à 1:30:43

Bonjour!

j'opte pour la réponse de philiga. Juste un conseille en passant. Si le rôle de ton div#header est de représenté l'entête de ta page alors tu devrais le retiré, le html5 a pourvu une balise pour l'occasion: la balise <header> que tu as aussi utilisée.

EmiliLadjet

20 janvier 2019 à 15:49:19

Bonjour Philiga

Mais le décalage et au niveau de la balise header, probablement nous devons aussi ajouter ce code

<style type="text/css">
header { padding:0px; margin:0px}
</style>

philiga a écrit:

Bonsoir,

Piège classique du à la marge par défaut de body.

Solution:
body
{
  margin:0;
}

-
Edité par EmiliLadjet 20 janvier 2019 à 15:49:55

Exterminateur a montreal possède tous les compétences nécessaires

Lamecarlate

20 janvier 2019 à 16:09:18

Le résultat problématique tel qu'il était montré dans le premier message donne cependant à penser - à 99% - que c'est bien les marges de body qui sont en cause. De plus, header, par défaut, n'a ni marge ni padding, inutile d'essayer de les lui enlever.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Domi65

21 janvier 2019 à 15:52:09

« De plus, header, par défaut, n'a ni marge ni padding »

Body non plus. Ces choix ne dépendent pas des spécifications mais des développeurs des navigateurs.

Par exemple, Firefox impose (par défaut) ceci au body

body {
    display: block;
    margin: 8px;
}

La spécification ne donne aucune consigne pour les espaces.

S'il est vrai que les navigateurs sont assez harmonisés, il ne faut pas croire ces règles universelles ni immuables.

Donc, préciser par exemple

body {padding: 0; margin: 0.2em}

sur sa feuille de style est tout à fait pertinent.

Lamecarlate

21 janvier 2019 à 15:58:34

Ok, je me suis mal exprimée.

J'aurais dû en effet dire "aucun navigateur ne met de marges ou de padding sur header". En vrai, la spec d'HTML se fiche royalement du rendu, qui est laissé à l'appréciation des navigateurs.

Et par abus de langage, comme tous les navigateurs sont harmonisés en terme de style par défaut, on peut dire qu'il n'y a pas de padding par défaut sur header, ou div, ou span.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Domi65

22 janvier 2019 à 14:46:15

« Et par abus de langage, comme tous les navigateurs sont harmonisés en terme de style par défaut, on peut dire qu'il n'y a pas de padding par défaut sur header, ou div, ou span »

Bonjour.

Ce qui a motivé ma correction, c'est que beaucoup de développeurs en herbe peuvent se méprendre sur la spécification. Sur ce forum, un internaute affirmait péremptoirement il y a peu qu'il ne fallait pas mettre un padding de zéro à body.

On peut en effet dire qu'il n'y a pas de padding par défaut sur header pour traduire une certaine réalité de fait (susceptible d'évoluer), mais pas lorsqu'on enseigne le CSS. Cela peut mener à des confusions.

Cordialement.

-
Edité par Domi65 22 janvier 2019 à 14:51:38

Founny

22 janvier 2019 à 20:12:02

Bonsoir,

haha mon erreur était tellement bête j'ai honte x)

Merci à tous et surtout à Philiga