Pied de page qui masque des éléments

Sujet résolu

15 mars 2020 à 20:35:07

Bonsoir,

Je demande votre aide aujourd'hui pour vous exposer mon problème: je veux fixer mon pied de page (footer) en bas de page, ce qui est concluant, mais le pied de page masque des éléments sur ma page, ce qui est gênant.

Ma page concernée:

Voici des captures d'écran qui expliquent mon problème:

Dans mon cas, les boutons Envoyer et Effacer sont masqués par le pied de page. Voici le code de ma page:

<!DOCTYPE HTML>
<html> 
	<head>
		<title>Contact | Krom Alhva</title>
		<link rel="stylesheet" media="screen" href="css.css">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	</head>
	
	<!-- En-tête -->
	<?php include "header.html"; ?>
	

	<body class="corps">
		<h2 id="contact">CONTACT</h2>
			<p>Vous pouvez nous contacter grâce à ce formulaire ci-joint. Une réponse vous sera envoyé dans les délais les plus courts à l'adresse email indiquée.</p>
		
		<div class="w3-container">
		<!-- Formulaire -->
		
		  <form method="POST" action="form.php" enctype="multipart/form-data" class="form">
			<label>
			  Pseudo:
			  <input class="w3-input champ" size='30' type="text" name="pseudo" required>
			</label><br />
			
			 <label>
			  Email:
			  <input class="w3-input champ" type="email" name="email" size='30' required>
			</label><br />
			
			 <label>
			  Sujet:
			  <input class="w3-input champ" size="30" type="text" name="sujet" required>
			</label><br />
			
			<label>
			  Message:
			  <textarea required class="champ" name="message" cols="50" rows="10" size="50" maxlength="500"></textarea>
			</label><br />
			
			<label>
			  Insérer un fichier:
			<input name="fichier" type="file" accept="application/pdf, image/png, image/jpeg"></label><br />
			
	
			<button class="w3-button w3-green" type="envoyer">Envoyer</button>
			<button class="w3-button w3-red" type="effacer">Effacer</button>
			</form>
			</div>
		</body>
		<!-- Fin formulaire -->
		
		
	
	<!-- Pied de page -->
	<?php include "footer.php"; ?>

</html>

Ma page footer:

<style>
footer {
	background-color: black;
	color: white;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	clear: both;
	text-align: center;
	}
	
#hautP {
	font-size: 15px;
	display: block;
	text-align: right;
	
}
</style>

<footer>
2020-<?php echo date("Y"); ?> © Krom Alhva<br />
<a href=#haut id='hautP'>Retour en haut de page</a>


</footer>

Merci d'avance pour votre aide inestimable :).

-
Edité par Lucas5201 15 mars 2020 à 20:35:42

Lartak

15 mars 2020 à 20:52:22

Bonsoir.

Que fais ta balise footer en dehors de la balise body ?

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

Lucas5201

15 mars 2020 à 20:57:56

Oups, je n'avais pas aperçu ceci, c'est une erreur de ma part. Merci de ce signalement

AbcAbc6

16 mars 2020 à 1:20:36

Bonsoir, pour voir vos erreurs de syntaxe, utilisez le validateur => https://validator.w3.org/

Pas d'affichage entre </head> et <body>.

Pas d'attribut size pour <texarea> voici les attributs possible.

La valeurs "effacer" et "envoyer" n'existe pas pour l’attribut type de <button> , c'est respectivement "reset" et "submit" .

En CSS pas de width: 100% sur un block positionné utiliser les propriétés right: 0; et left: 0; Voir https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Une fois que tout ceci sera corrigé, pour votre problème de footer voir https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/

PS : pour quelles raisons un display: block sur le lien dans le footer?

Lucas5201

16 mars 2020 à 19:15:24

Bonsoir,

Merci de vos commentaires, j'ai pu résoudre mon problème.

Pour le display, il s'agit là d'un oubli d'un ancien élément css dont j'ai oublié de retirer la ligne (même s'il est plus recommandé de retirer tout le code et de reconstruireà.

Merci à vous de m'avoir aidé