28172 sujets

CSS et mise en forme, CSS3

[Résolu] Besoin d'aide CSS débutant

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:

<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 Smiley biggrin
Salut

Enfaite soit tu met bout à bout dans une seule page.

Soit tu fractionne/module comme tu viens de faire, mais pas la peine de mettre les tags chaque page :

<html><body> etc....

ton fichier footer il doit avoir juste 

<div>
<footer>
			<p>Footer</p>
		</footer>
</div>
Hello,
pas besoin de position:absolute, c'est même une mauvaise idée pour ce que tu veux, laisse les éléments s'afficher tranquillement à la suite les uns des autres
Sujet clos
Aller à