28172 sujets

CSS et mise en forme, CSS3

Footer en haut de page

bonjour, j'ai regardé sur le forum mais n'ai pas trouvé la réponse.
j'ai crée une page avec header, main (le corps de la page, elle même conçue avec une marge droite et gauche et un centre contenant le texte) et un footer.
quand j'insère 2 colonne dans le corsp de la page le footer se met en haut de page.
Pouvez vous m'aider svp?
Merci
code html
<body>
<div id="header">
menu haut
</div>
<div id="main">
<div class="gauche">
<p>marge gauche</p>
</div>
<div class="droite">
<p>marge droite</p>
</div>
<div class="centre">
<div class="colonne-1">blablabla
</div>
<div class="colonne-2">blablabla
</div>
</div>
</div>
<div id="footer">pieds de page
</div>

css

#header{
position: relative;
}
#main{
position relative;
/*padding-bottom: 100px;*/
margin: 0;
padding: 0;
}
#footer {
padding:5px;
width:100%;
margin: auto;
min-width: 800px;
}
oups la suite du css
.gauche { /* boite gauche (avec le menu) */
position: absolute; /* positionné par rapport à la boite parent (ici .container) */
left: 10px; /* démarre à 10 pixels de la gauche de la boite parent */
width: 5%; /* largeur de la boite */
}

.centre { /* boite qui "pousse" vers le bas le reste de la page */
margin: 0 5% 0 5%; /* marges gauche et droite, pour la place des 2 autres colonnes */
border-left: 3px; /* bordure gauche */
border-right: 3px; /* bordure droite */
padding: 10px; /* marge intérieure - indispensable */
text-align: justify;
}

.droite { /* boite droite (avec le commentaire) */
position: absolute; /* positionné par rapport à la boite parent (ici .container) */
right: 10px; /* démarre à 10 pixels de la droite de la boite parent */
width: 5%; ; /* largeur de la boite */

}
.colonne-1 {
width: 450px;
height: 500px;
float: left;
margin:0px;

}

.colonne-2 {
width: 450px;
height: 500px;
float: left;
margin:50px;

}
j'ai trouvé Smiley smile )
comme il était question de parent enfants etparent, j'ai mis dans le footer clear: both;
et le pieds de page se trouve bien en bas de la page.
cela faisait 2 jours que je galèrait Smiley decu (
Désolé de vous avoir importuné
salut

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div id="header">
  menu haut
  </div>
  
<div id="main">

  <div class="gauche">
    <p>marge gauche</p>
  </div>
    
  <div class="centre">
    <div class="colonne-1">blablabla</div>
    <div class="colonne-2">blablabla</div>
  </div>
  
   <div class="droite"> 
    <p>marge droite</p>
  </div>
  
</div>

<div id="footer">pieds de page</div>

</body




#header{
  position: relative;
  top:0px;
}

#main{
  display: flex;
  /*position relative;
  /*padding-bottom: 100px;*/
  margin: 0;
  padding: 0;
}

#footer {
  position:absolute;
  bottom:0;
  width:100%;
  padding-top:50px;
  height:50px;

}
Il faut privilégier l' utilisant des balises <header> <footer> <main> <section> pour aider les moteurs de recherche à mieux référencer votre site internet.
Sujet clos
Aller à