Un petit soucis de pied de page
Résolu
Mordred
-
Mordred -
Mordred -
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;
}
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;
}
A voir également:
- Un petit soucis de pied de page
- Impossible de supprimer une page word - Guide
- Calcul km marche à pied gratuit - Télécharger - Sport
- Comment imprimer un tableau excel sur une seule page - Guide
- Numéro de page word - Guide
- Consultez le code source de cette page. copiez la ligne qui indique aux moteurs de recherche de ne pas référencer la page. ✓ - Forum Référencement
je viens de faire le test et ça ne marche pas:/
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?