[CSS] Marge Header

Sujet résolu

26 mars 2017 à 17:27:17

Bonjours, voilà j'aimerais que le fond de mon header soit blanc et que ce cadre prenne tout l'espace de la page en largeur comme ceci :

J'ai donc ce code :

header
{
	height: 20%;
	width: auto;
	margin: auto;
	background-color : #FFF;
	opacity: 0.8;
	color: #FFF;
}

Sauf qu'il reste des contours autour du cadre je ne comprend pas comment faire :/ :

Merci pour votre aide, je débute.

-
Edité par AntoninJvlt 26 mars 2017 à 17:27:36

Ar7awn

26 mars 2017 à 17:31:48

Certains éléments peuvent avoir une marge par défaut.

*{
    margin: 0px;
    padding: 0px;
}

-
Edité par Ar7awn 26 mars 2017 à 17:32:16

http://fr.openclassrooms.com/forum/sujet/zozoraction-le-retour-de-zozor?page=1

Lamecarlate

26 mars 2017 à 17:47:32

Bonjour,

ne surtout pas utiliser le reset de * ! C'est vraiment utiliser un bazooka nucléaire à quatre canons pour tuer une mouche.

La quasi-totalité des éléments HTML n'a ni margin, ni padding. Ce que tu cherches c'est

body {
  margin: 0;
}

et ça suffit amplement.

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

NawiksNey

26 mars 2017 à 19:46:42

Normalement ce que dit lamecarlate doit marcher

-
Edité par NawiksNey 26 mars 2017 à 20:59:47

L-N

26 mars 2017 à 21:46:45

Je suis daccord n’utilise pas le reset de * néanmoins l’idée était bonne Ar7awn

AntoninJvlt

26 mars 2017 à 21:47:55

Si je met seulement margin: 0; je vois plus rien (background image et header)

Lamecarlate

27 mars 2017 à 7:21:10

AntoninJo > tu as mis margin: 0 sur quoi ? Tu peux nous montrer ton code complet et le résultat ? (si tu peux mettre ta page en ligne, ne serait-ce que via http://codepen.io/pen, ça serait cool)

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

Anonyme

27 mars 2017 à 11:17:07

tu met le la valeur 0 de margin dans body

body{
margin:0;
}

et pour que le fond sois blanc

tu doit faire

header{

background-color:#FFFFFF;

}

AntoninJvlt

27 mars 2017 à 15:36:02

Il n'y a rien dans mon code quasiment :

  	<body>
  		
  		<header>
  		<h1 id="Title">Title</h1>
  		</header>
  	</body>

et pour le CSS :

body
{
	background: url("images/background.jpg")
}
header
{
	height: 20%;
	width: auto;
	background-color : #FFF;
	opacity: 0.8;
	color: #FFF;
}

j'ai :

Si je met le margin: 0; dans le body comme vous me dites alors j'obtiens une page totalement blanche il n'y a plus rien.

-
Edité par AntoninJvlt 27 mars 2017 à 15:39:11

L-N

27 mars 2017 à 15:40:41

Déjà un 20% sur la hauteur, si ton body n’a pas de height 100% ça ne sert à rien

Lamecarlate

27 mars 2017 à 15:41:54

Ton header est en blanc pour le fond et pour le texte, normal que tu ne voies pas son contenu.

Et body n'a comme hauteur que celle de son contenu, donc si tu lui enlèves les marges, tu ne vois plus que le header. Qui est donc tout blanc.

Mets un peu plus de contenu après ton header, il apparaîtra.

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

AntoninJvlt

27 mars 2017 à 16:38:07

Alors si je rajoute du contenu je ne vois toujours pas mon image de fond, de plus si je met le header en noir pour vérifier il ne prend toujours pas toute la largeur. J'ai donc le même rectangle mais en noir, et des paragraphes de textes en dessous le header :

  	<body>
  		
  		<header>
  		<h1 id="Title">Title</h1>
  		</header>


  		<p>Test test test test Test test test test</p>
  	</body>

body
{
	background: url("images/background.jpg")
	margin: 0;
}
header
{
	height: 20%;
	width: auto;
	background-color : black;
	opacity: 0.8;
	color: #FFF;
}

-
Edité par AntoninJvlt 27 mars 2017 à 16:38:57

Lamecarlate

27 mars 2017 à 17:27:53

Il manque un ";" après ton background dans le CSS (ligne 3). Et ensuite, c'est une question de fusion des marges parce que tu as un h1 (j'avais pas vu, désolée) : http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

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

AntoninJvlt

28 mars 2017 à 19:09:20

Ah merci Lamecarlate sa ma permis de comprendre un point important sur les marges ! :)

Au final c'était donc bien ce que disait Ar7qwn mais je ne comprenait pas et donc il n'y a pas spécialement besoin de l'appliquer à tout les éléments.

Merci pour votre aide !

Lamecarlate

28 mars 2017 à 19:43:33

Yep, la fusion des marges est importante, parce que ça arrive tout le temps et que c'est très déroutant quand on ne connaît pas (mais c'est super utile de base)

Bonne continuation !

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

[CSS] Marge Header

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

[CSS] Marge Header

[CSS] Marge Header

Supprimer

Modérer

Signaler le message aux modérateurs