[Résolu] Espace en bas de la page par QuentinRollet - page 1

Bonjour à tous !

Bon alors voilà, je suis en train de créer un site web pour mes TPE et j'un un petit problème en bas de ma page. Ce problème est présent sur toute les pages du TPE. Je vous envoi le code HTML d'une des pages ainsi que le code CSS. Si vous pouvez m'aider s'il vous plait ce serait sympa.

Code HTML :

<!DOCTYPE html>
<html>
	<head>
		<title> TPE </title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="bloc_page">
			<!-- Header -->
			<header>
	<h1> TPE Energie solaire </h1>
	<!--<ul>
		<a href="index.php"><li>Accueil</li></a>
		<a href="index.php"><li>Accueil</li></a>
		<a href="index.php"><li>Accueil</li></a>
	</ul> -->
</header>						
			<!-- Bannière -->
			 <div id="banniere_image">
                <div id="banniere_description">
                    Source : energie-fr-de.eu
                </div>
            </div>
			
			<!-- Menu navigation -->
			<nav id="plan">
	<h2>Plan</h2>
	<ul>
	<a class="partie" href="index.php"><li>Introduction</li></a>

	<a class="partie" href="introPresentation.php"><li>Présentation</li></a>
		<a class="sousPartie" href="panneauPhoto.php"><li>Solaire photovoltaïque</li></a>
		<a class="sousPartie" href="panneauBasseTemp.php"><li>Solaire thermique basse température</li></a>
		<a class="sousPartie" href="panneauHauteTemp.php"><li>Solaire thermique haute tempétature</li></a>

	<a class="partie" href="introEnjeux.php"><li>Les enjeux environnementaux</li></a>
		<a class="sousPartie" href="energieFossile.php"><li>Pollution des énergies fossiles</li></a>
		<a class="sousPartie" href="energieSolaire.php"><li>Pollution des énergie solaires</li></a>

	<a class="partie" href="introTroyes.php"><li>Etude de cas : Troyes</li></a>
		<a class="sousPartie" href="consoTroyes.php"><li>Consommation</li></a>
		<a class="sousPartie" href="producTroyes.php"><li>Production</li></a>
		<a class="sousPartie" href="solutionTroyes.php"><li>Solution</li></a>

	<a class="partie" href="conclusion.php"><li>Conclusion</li></a>
	</ul>
</nav>			
			<!-- Menu annexe -->
			<nav id="annexe">
	<h2>Annexe</h2>
	<ul>
		<a href="photon.php"><li>Les photons</li></a>
		<a href="indiceCarbone.php"><li>L'indice carbone</li></a>
	</ul>
</nav>			
			<!-- Corps de page -->
			<section>
				<h1>Présentation des énergies solaires</h1>
				
				<p class="tab">Nous allons d'abord commencer à vous présenter ce qu'est une énergie solaire. Nous allons voir dans la suite de ce TPE qu'il existe
				deux types d'énergie solaire. Il y a d'abord l'énergie photovoltaïque, qui est une énergie qui fonctionne grâce à la lumière des rayons du Soleil,
				puis il existe l'énergie thermique qui fonctionne grâce à la chaleur émise par les rayons solaires. L'énergie solaire est dite énergie renouvelable 
				car celle-ci est inépuisable à l'échelle du temps humain.</p>
				
				<p class="tab"> Pour l'énergie thermique, nous allons voir qu'il existe deux sortes de panneaux solaires : les panneaux solaires à basse température
				et les panneaux solaires à haute température.</p>
				
				<p class="tab">Nous allons donc commencer à présenter l'énergie photovoltaïque puis l'énergie thermique à basse température et enfin l'énergie thermique
				à haute température.</p>
			
				<div class="bouton">
					<a href="panneauPhoto.php">Page suivante</a>
				</div>
			</section>
			<!-- Footer -->
			<footer>
	<p> © Mon Nom 2019 </p>
</footer>		</div>
	</body>

Et le code CSS :

/* --- Elements basique de la page --- */
body
{
	font-family :Arial, sans-serif;
	color : black;
	background-color : #C5FFFC;
	text-align : justify;
}

.bloc_page
{
	width : 960px;
	height : 100%;
	margin : auto;
	border-radius : 20px;
	background-color : white;
	padding-left : 10px;
	padding-right : 10px;
}

ul
{
	list-style : none;
}

a
{
	text-decoration : none;
	color : black;
}

a:hover
{
	font-weight : bold;
}

.tab
{
	text-indent : 50px;
}

sup
{
	font-size : 0.6em;
}

/* --- Header --- */
header
{
	margin : auto;
}

header h1
{
	margin : auto;
	text-align : center;
}

header ul
{
	display : flex;
	margin : auto;
	justify-content : space-between;
}

/* --- BanniĂ¨re --- */

#banniere_image
{
    margin-top: 15px;
    height: 200px;
	width : 940px;
    border-radius: 5px;
    background: url('image/banniere.jpg') no-repeat;
    position: relative;
    margin-bottom: 25px;
	text-align : center;
	margin-left : auto;
	margin-right : auto;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
	right : 0;
    border-radius: 5px 0px 5px 5px;
    width: 20%;
    height: 15px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
    
}
/* --- Menu de navigation --- */
#plan
{
	width : 300px;
	margin-left : 15px;
}

#plan h1
{
	margin : auto;
}
.partie
{
	font-size : 1.1em;
	position : relative;
	left : -35px;
}

.sousPartie
{
	font-size : 0.9em;
	position : relative;
	left : -15px;
}

/* --- Menu des annexes --- */
#annexe
{
	width : 300px;
	margin-left : 15px;
}

#annexe h1
{
	margin : auto;
}

/* --- Corps de la page --- */
section
{
	margin-left : 300px;
	padding : 40px;
	position : relative;
	top : -470px;
	font-size : 1.2em;
}

section h1
{
	font-size : 1.8em;
}

.bouton
{
	text-align : center;
	border : 1px black solid;
	border-radius : 5px;
	background-color : red;
	display : block;
	width : 120px;
	position : absolute;
	right : 0px;
	font-size : 0.9em;
}

.bouton a
{
	color : white;
}
/* --- Footer --- */
footer
{
	position : relative;
	top : 0px;
}

Pour ceux qui ne peuvent pas tester le site : voila ce que ça me fait grâce à une image :

Merci beaucoup pour votre aide !

QuentinRollet

14 février 2019 à 15:42:58

Mamashi

14 février 2019 à 16:33:01

Le body posssède des marges de base (donc margin: 0 sur le body )

Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité

AliasDmc

14 février 2019 à 18:24:21

Bonjour QuentinRollet ,

comme le dit Mamashi il faut mettre un margin:0 dans les propriétés css du body

Il te faut aussi supprimer l'effet des margin du <P> soit en les supprimant avec margin soit en mettant un

overflow:hidden; dans les propriétés css du footer

Tu peux aussi mettre le P en display:inline ce qui annihile le margin verticales

Découvrez les Css avec la zonecss.fr

14 février 2019 à 22:00:49

Merci beaucoup de vos réponses !!! Néanmoins, le problème est toujours là alors que j'ai fais toute les modifications que vous m'avez conseiller

youne25

14 février 2019 à 23:33:12

salut

sur la section au lieu de mettre top: -470px; met plutôt margin-top: -710px;

deux choses sont infinies: l'univers et la bêtise humaine. Mais en ce qui concerne l'univers, je n'en ai pas encore acquis la certitude absolue. A.E

15 février 2019 à 0:15:15

Mercii beaucoup ça a marché ! Plus qu'à régler quelque bug d'affichage qui sont apparus

15 février 2019 à 0:20:36

je me suis trompé c'est margin-top: -470px; erreur de frappe, mais j'arrivais pas a éditer la réponse.

Lamecarlate

15 février 2019 à 8:10:41

Oui alors un margin négatif c'est pas ouf, mais avec une valeur de -470px c'est le signe qu'il y a quelque chose qui ne va pas du tout.

Si tu veux mettre ton header et ta section côte à côte, donne display: flex à leur parent direct, et basta.

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

Espace en bas de la page

Espace en bas de la page

Supprimer

Modérer

Signaler le message aux modérateurs