[Marge] Problème CSS

Sujet résolu

24 mars 2020 à 19:31:56

Bonjour, cela fait plusieurs heures que je m'arrache les cheveux, pas moyen de savoir d'où provient ce petit espace à droite de ma 3ème colonne et pourquoi elle n'est pas alignée à droite comme celle de gauche.

Si quelqu'un a une idée

<!DOCTYPE html>
<html>
<head>
	<title>Labo_4.1</title>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="labo_4.1.css">
</head>
<body>

	<header>Ceci est l'en-tête</header>

	<div id="contenu">

		<nav>
			<h2>Navigation</h2>
			<ul>
				<li>Page 1</li>
				<li>Page 2</li>
				<li>Page 3</li>
				<li>Page 4</li>
			</ul>
		</nav>

		<main>
				<p>Lorem ipsum</p>
				<img src="src/150.png"/>
		</main>

		<aside>
			<h2>Photos annexes</h2>
			<img src="src/150.png"/>
			<img src="src/150.png"/>
		</aside>

	</div>

	<footer>Copyright</footer>

	<script type="text/javascript" src="labo_4.1.js"></script>
</body>
</html>

html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
}

body
{
	margin-left: 5%;
	margin-right: 5%;
}

#contenu
{
	display: flex;
	height: 65%;
	width: 100%;
	justify-content: space-between;
}

header
{
	height: 10%;
	width: 100%;
	background-color: #ffcabc;

	display: flex;
	align-items: center;
	justify-content: space-around;
}

header, nav, main, aside, footer
{
	border: 3px black solid;
	margin: 5px;
}

nav
{
	background-color: #18F3EF;
}

main
{
	background-color: #FFDA00;
	width: 40%;
}

aside
{
	background-color: #F55A5A;
}

footer
{
	height: 10%;
	width: 100%;

	background-color: #FFFF6E;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

-
Edité par Cybevil 24 mars 2020 à 20:10:49

AbcAbc6

24 mars 2020 à 19:56:51

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Problème marge CSS)

Liens conseillés

Règles générales du forum

Bonsoir, retire le width: 100% sur le header et le footer. C'est une mauvaise pratique

lire : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Cybevil

24 mars 2020 à 20:51:55

AbcAbc6 a écrit:

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Problème marge CSS)

Liens conseillés

Règles générales du forum

Bonsoir, retire le width: 100% sur le header et le footer. C'est une mauvaise pratique

lire : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Merci, problème résolu