Un petit soucis de pied de page

Résolu/Fermé

Mordred - 22 juin 2019 à 12:23
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>


<header>
<img src="https://image.noelshack.com/fichiers/2019/24/4/1560432410-banniere-finale.jpg">

</header>



<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;

}

A voir également:

1 réponse

Réponse 1 / 1

elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
22 juin 2019 à 16:49

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

Mordred
22 juin 2019 à 20:43

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
24 juin 2019 à 14:21

Pourquoi des positions absolues ? Bon, enlève la position sur la classe .article1. Pour la mise en page, je te conseille les flexbox.

Mordred
24 juin 2019 à 19:13

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?

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

petit colis

[référencement] Ne pas être référencé

Chemin Logo du site de la Cité de l'espace

comment écrire des petits chiffres ?

Discussions similaires

Newsletters