Menu

Un petit soucis de pied de page [Résolu]

- - Dernière réponse :  Mordred - 24 juin 2019 à 19:13
Bonjour à tous,

Je débute en html5 / css3 et j'ai décidé de faire une petite page web pour ma guilde.
Petit soucis je n'arrive pas à régler mon footer pour qu'il reste en pied de page.
Actuellement il se positionne bien sous mon élément p mais, si celui-ci est trop grand, continue de s'afficher sous mon footer.

Si quelqu'un peu jeter un œil a mon travail et me dire comment faire et améliorer le tout j'en serait bien heureux ;)


HTML:

<!DOCTYPE HTML>

<html lang="fr-FR">

<head>
<title>La Garde De Nuit Eratz 1.29</title>
<meta charset= "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>

</head>



<body>

<!--banniere de la guilde img en tete-->
<header>
<img src="https://image.noelshack.com/fichiers/2019/24/4/1560432410-banniere-finale.jpg">


</header>



<!--menu principal-->


<nav>

<div class="table">

<ul>
<li class="menu">
<a href="accueil1.html">Accueil</a>
</li>

<li class="menu">
<a href="la guilde.html">La Guilde</a>
</li>

<li class="menu">
<a href="le recrutement.html">Le Recrutement</a>
</li>

<li class="menu">
<a href="https://www.dofus.com/fr/forum/1580-1-29-eratz-henual">Forum 1.29</a>
</li>

<li class="menu">
<a href="http://www.dofus.tools/">Dofus Tools</a>
</li>

<li class="menu">
<a href="http://lagardenuitdof.forum-jeu.com/">Notre Forum</a>
</li>
</ul>
</div>

</nav>


<table>
<div class="table2">

<ul class="menu2">
<li class="menu2">
<a href="https://barbok.eratz.fr/index.php/accpano">Panoplies</a>
</li>
<br>

<li class="menu2">
<a href="https://barbok.eratz.fr/index.php/equipements/amulettes">Les Stuffs</a>
</li>
<br>


<li class="menu2">
<a href="https://barbok.eratz.fr/index.php/armes/dague">Les CAC</a>
</li>
<br>

<li class="menu2">
<a href="https://barbok.eratz.fr/index.php/accdonjon">Les Donjons</a>
</li>
<br>


<li class="menu2">
<a href="https://barbok.eratz.fr/index.php/accquete">Les Quetes</a>
</li>
<br>
<li class="menu2">
<a href="nos aventures.html">Nos Aventures</a>
</li>
<br>
</ul>
<br>
</div>
</table>

<div class="article1">

<h1 class="t1">Titre article</h1>
<br>
<p class="art1">article complet <br>a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p <br><br><br><br><br><br><br><br><br><br><br><br><br>c<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>d<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>





</div>


<footer>

<p>Dofus est un MMORPG édité par Ankama."Barbok " est un site non-officiel sans aucun lien avec Ankama."LaGardeDeNuit "
est un site non-officiel sans aucun lien avec Ankama.
Toutes les illustrations sont la propriété d'Ankama Studio et de Dofus.</p>

</footer>


</body>
</html>



CSS:


html {
height: 100%;

}



body{

min-height: 100%;
font-family:'Century Gothic', Calibri, Serif;
font-size:14px;
margin:0px;
padding:0px;
background-color:#1e457c;
}

/* banniere pleine ecran*/
header img{

width:100%;
}


/*pied page*/
footer{

position: absolute;
right: 0;
bottom: 0;
left: 0;


border-top:2px solid #AAA;
font-size:10px;
background-color:#1e457c;
text-align: center;


}


/*menu principale*/
nav{
width:100%;
background-color:#098BBF;


}
nav ul{
margin:0px;
padding:0px;

}

nav li{
list-style-type:none;
float:left;

}

nav a{
display:inline-block;
text-decoration:none;
padding:20px 30px;
color:black;
text-transform:uppercase;
font-size:18px;


}

.table{

display:table;
margin: 0 auto;


}
/* onglet menu*/

/*.menu-ind:hover{

background-color:yellow;
border-top:5px solid red;
}

.menu-exp:hover{
border-top: 5px solid green;
background-color: blue;


}

.menu-hob:hover{

border-top:5px solid black;
background-color:pink;
}


.menu-con:hover{
border-top:5px solid black;
background-color: pink;

}*/




.menu2{

display:table;
margin: 0px;
padding:0px;
float:left;
font-size:14px;
color:black;
background-color:#1E87BA;




}

.menu2 li{

border:1px solid #6DB3D5;
width:300px;
height:40px;




}

.menu2 li a{

display:inline-block;
text-decoration:none;
list-style-type:none;
font-family:'American Typewriter';
color:black;

font-size:20px;

}

.article1{
position:absolute;
left:310px;
height:100000px;
width:1800px;

}
Afficher la suite 

1 réponse

Messages postés
5379
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
18 juillet 2019
795
0
Merci
Bonjour
ne le mets pas en position absolute et ajoute un margin-top pour qu'il reste en dessous de l'élément qui le précède
Bonjour,

je viens de faire le test et ça ne marche pas:/
Tsarano
Messages postés
6
Date d'inscription
samedi 10 septembre 2016
Statut
Membre
Dernière intervention
24 juin 2019
1 -
Pourquoi des positions absolues ? Bon, enlève la position sur la classe .article1. Pour la mise en page, je te conseille les flexbox.
Bonjour,

merci de vos réponses, par contre je ne comprend pas bien les flexbox, je viens d'essayer le display flex-direction column mais rien ne change. Y a t'il des prérequis pour les utiliser?
Existe t'il une ligne de commande html ou css pour placer directement en pied de page?
Commenter la réponse de elgazar