Header: élargi à 100%

Sujet résolu

18 octobre 2017 à 22:44:12

Bonjour,

Je souhaiterais que mon header occupe toute la largeur de la fenêtre, et qu'il n'y ait pas de marge non plus en haut.

Donc j'ai fait:

header
{
	background-color: pink;
	width: 100%;
	margin-top: 0px;
}

ce qui me donne comme résultat:

Ce qui ne me convient pas puisqu'on voit clairement qu'il y a des marges à gauche, à droite et en haut...

Auriez-vous une solution s'il vous plaît?

Merci

-
Edité par Madouh 18 octobre 2017 à 22:45:14

AbcAbc6

18 octobre 2017 à 22:53:21

Bonsoir, pas de width sur un block au mieux cela ne fait rien, au pire cela crée un débordement. Lire https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

les marges sont crées soit par le contenu de ton header qui possède un style par défaut, soit par les mages que possède l'élément body son style par défaut également. (d'après ton image je pencherais pour la deuxième option).

Donc un reset des marges de body et cela devrais résoudre le problème. Pour voir quel élément crée des marges, utilise les outils de développement de ton navigateur ( clique droit > inspecté l'élément ou F12)

-
Edité par AbcAbc6 18 octobre 2017 à 22:55:51

Madouh

18 octobre 2017 à 23:31:31

Salut,

J'ai dû appliquer le reset non seulement à body (ce qui m'a permis d'enlever les marges à gauche et à droite), mais également à h1 (marge du haut) !

Merci pour ton aide!

J'en profite pour poser une autre question. Côté HTML, j'ai cette structure:

<header>
   <h1>test</h1>
   <nav>contenu</nav>
</header>

<section>contenu</section>

J'ai appliqué un

#header
{
	display: flex;
}

Malheureusement deux balises se chevauchent: <section> est en partie en dessous de <nav>.

Comment faire pour que <nav> et <section> soient parfaitement côte à côté (aucune marge entre eux)?

-
Edité par Madouh 19 octobre 2017 à 0:14:05

Shivan666

19 octobre 2017 à 0:04:23

Madouh a écrit:

J'en profite pour poser une autre question. Côté HTML, j'ai cette structure:
<header>
   <h1>test</h1>
   <nav>contenu</nav>
</header>

<section>contenu</section>
J'ai appliqué un
#header
{
	display: flex;
}
Malheureusement deux balises se chevauchent: <section> est en partie en dessous de <nav>.

Comment faire pour que <nav> et <section> soient bien côté à côté?

Bonsoir, il se fait tard, je suis peut-être en train de m'endormir mais avec ton flex ce sont le h1 et le nav qui vont être côte à côte pas la section... me trompe-je ??

du coup il faudrai que tu flex ton nav et ta section à moins que tu ne te sois trompé et que tu voulais dire h1 au lieu de section...

Lire nuit gravement à l'ignorance...

Madouh

19 octobre 2017 à 0:21:08

Bonsoir,

Effectivement, je voudrais que mon nav soit à côté de mon h1, mais également de la section, de cette manière en fait:

-
Edité par Madouh 19 octobre 2017 à 0:25:32

AbcAbc6

19 octobre 2017 à 1:44:50

Il y a un twist au niveau des couleurs de ton découpage sur ton image; la gauche de ton header ne peut occuper la même place que le haut de la nav.

Donc si j'ai bien compris le header prend la largeur du body et la nav + section en dessous. Si c'est cela place la nav et la section dans un container en flexbox. Comme ceci?

<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>exemple flexbox</title>
	<style type="text/css"> /* les styles ci après */	</style>
</head>
<body>
	<header class="header"> 
		<mark class="tag">header</mark>
	</header>
	<div class="content"> 
	
		<nav class="menu">
			<mark class="tag">nav</mark>
			<ul>
				<li><a href="#">item1</a></li>
				<li><a href="#">item2</a></li>
				<li><a href="#">item3</a></li>
				<li><a href="#">item4</a></li>
				<li><a href="#">item5</a></li>
			</ul>
		</nav>
		<section class="section">
		<mark class="tag">section</mark>
			<h1>Contenu</h1>
		</section>
	</div>
</body>
</html>

avec comme CSS :

.header {
		min-height: 100px; /* uniquement pour le voir car pas de contenu */ 
		border: 2px solid #ffaec9;
	}
	.content {
		display: flex; 
	}
	.menu {
		border: 2px solid #b5e61d;
		flex: 1;
	}
	.section {
		border: 2px solid; 
		flex: 4;
	}
	
	.tag {
		color: #f92672;
		background-color: #000;
		
	}
	.tag:after {
		content: '> ';
	}
	.tag:before {
		content: ' <';	
	}

-
Edité par AbcAbc6 19 octobre 2017 à 1:48:01

Hsuissia

19 octobre 2017 à 9:41:13

Bonjour,

Je me permet de te mettre en garde par rapport au code que tu nous a fournit :

<header>
   <h1>test</h1>
   <nav>contenu</nav>
</header>
 
<section>contenu</section>

#header
{
    display: flex;
}

Ici tu as un élement header, et dans ton CSS tu vise un ID header via le #. La regle ne sera donc jamais affecté a ton header^^

-
Edité par Hsuissia 19 octobre 2017 à 9:41:32

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

Madouh

20 octobre 2017 à 12:05:37

AbcAbc6: Oui, c'était bien ça, merci pour ton aide, c'est vraiment cool!

Hsuissia, effectivement, je ne m'en suis aperçue qu'après... merci à toi ^^

-
Edité par Madouh 21 octobre 2017 à 0:15:00