Bonjour, c'est mon premier poste sur ce forum, pardonnez-moi si ce n'est pas convenable.
J'aurai besoin d'un coup de main pour une petite histoire de footer, j'aimerai qu'il soit toujours en bas et faire en sorte que rien ne se glisse dessous ou dessus, mais je ne veut pas qu'il soit en position: fixed, j'aimerai que quand je suis en haut de la page, le footer ne soit pas visible et que quand je scroll et que j'arrive tout en bas de la page, il soit visible.
Je tien à préciser que je suis débutant.
Voici mon code html:
Ce qu'il y à dans le header:
Ce qu'il y à dans le body:
Ce qu'il y a dans le footer:
et ce qu'il y a dans la css:
J'espère que vous pourrez m'aider
J'aurai besoin d'un coup de main pour une petite histoire de footer, j'aimerai qu'il soit toujours en bas et faire en sorte que rien ne se glisse dessous ou dessus, mais je ne veut pas qu'il soit en position: fixed, j'aimerai que quand je suis en haut de la page, le footer ne soit pas visible et que quand je scroll et que j'arrive tout en bas de la page, il soit visible.
Je tien à préciser que je suis débutant.
Voici mon code html:
Ce qu'il y à dans le header:
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<script language="JavaScript">
</script>
<title>Office</title>
</head>
<body>
<div id="header">
<header>
<nav type="context" id="menu"><ul><li><a href="#">Accueil</a></li><li><a href="galerie.php">Galerie</a></li><li><a href="departement.php">Départements</a></li><li><a href="#">Contact</a></li></ul></nav>
</header>
</div>
Ce qu'il y à dans le body:
<html>
<head>
<link href="css/galerie.css" rel="stylesheet">
</head>
<body>
<div id="header">
<header>
<img src="img/bzh.png" style="height:50px; line-height: 50px; width: 50px; float: left; line-height: 65px;">
<nav type="context" id="menu"><ul><li><a href="#">Accueil</a></li><li><a href="galerie.php">Galerie</a></li><li><a href="departement.php">Départements</a></li><li><a href="#">Contact</a></li></ul></nav>
</header>
</div>
<div id="contain1">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
</div>
<div id="contain2">
<div id="img5"></div>
<div id="img6"></div>
<div id="img7"></div>
<div id="img8"></div>
</div>
<div id="contain3">
<div id="img9"></div>
<div id="img10"></div>
<div id="img10"></div>
<div id="img10"></div>
</div>
<?php
require_once("partitions/footer.php");
?>
</body>
</html>
Ce qu'il y a dans le footer:
<footer>
<p>Footer</p>
</footer>
</body>
</html>
et ce qu'il y a dans la css:
/*CSS RESET*/
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ul{list-style:none}
button,input,select,textarea{margin:0}
html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
img,video{height:auto;max-width:100%}
iframe{border:0}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0;text-align:left}
html {
height: 100%;
box-sizing: border-box;
}
body {
min-height: 100%;
position: relative;
text-align: center;
}
header{
background-color: #0099ff;
top: 0%;
height: 65px;
}
header > img{
vertical-align:middle;
display: inline-block;
height: 55px;
width: 70px;
margin-left: 20px;
}
ul li a{
float: left;
height: 65px;
background-color: #0099ff;
opacity: .7;
line-height:63px;
text-align: center;
font-size: 20px;
width: 24%;
text-decoration: none;
color: white;
}
ul li a:hover{
background-color: #006db6;
}
/*!MAIN*/
#contain1{
display: flex;
flex-direction: row;
height: 250px;
margin: 20px 10%;
}
#img1{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/1.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
#img2{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/2.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
#img3{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/3.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
#img4{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/4.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
#contain2{
display: flex;
flex-direction: row;
height: 250px;
margin: 20px 10%;
}
#img5{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/5.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
#img6{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/6.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
#img7{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/7.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
#img8{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/8.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
#contain3{
display: flex;
flex-direction: row;
height: 250px;
margin: 20px 10%;
}
#img9{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/9.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
#img10{
height: 250px;
width: 25%;
border: 1px solid white;
background-image: url("../img/galerie/10.jpg");
background-size: cover;
background-repeat: no-repeat;
position: center;
}
/*!Footer________________________________________________________________________________________________________*/
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
opacity: .7;
padding: 1rem;
background-color: #0099ff;
text-align: center;
height: 60px;
}
J'espère que vous pourrez m'aider
