Afficher le footer en bas du site

Résolu

j3-1996 Messages postés 77 Date d'inscription Statut Membre Dernière intervention -
j3-1996 Messages postés 77 Date d'inscription Statut Membre Dernière intervention - 10 oct. 2013 à 17:43

Bonjour,

Je débute dans la programmation HTML et CSS et je suis entrain de créer un petit site internet mais je suis bloqué sur un quelques petit truc. Mon footer s'affiche en bas de mon menu de navigation et non en bas du site. J'ai fais quelque recherche sur internet et tout ce que j'ai pu trouvé c'était de mettre la position "fixed" mais ce n'est pas ce que je recherche car je veux que le footer ce trouve tout en bas du site et non toujours visible en bas de l'écran.
J'ai également un autre problème, j'ai mis des bordure pour différencier les différentes partis de mon site et je remarque que mes deux partie "section" se retrouve en dessous du body.

Je vous copie colle ici mon code HTML et CSS, ça sera surment plus facile pour vous de m'aidez si vous voyer un peu plus clairement mon problème

Code HTML:


<!DOCTYPE html>
<html>

  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Pianisto.com</title>
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
  
    <header>
      <div id="entete">
        <div id="text-header">Pianismo.com</div>
      </div>
    </header>
	
    <nav>
      <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="video.html">Vidéos</a></li>
        <li><a href="don.html">Don</a></li>
      </ul>
    </nav>
	    
	<section id="actu">
	<h1>Dernières viédos</h1>
      <article id="video1">
        <iframe width="640" height="360" src="//www.youtube.com/embed/9Ci7yQkSHGk" allowfullscreen></iframe>
	  </article>
      <article id="video2">
        <iframe width="640" height="360" src="//www.youtube.com/embed/JnNBkd6J3sU?list=PL613C6231698C2FAD" allowfullscreen></iframe>
	  </article>
      <article id="video3">
        <iframe width="640" height="360" src="//www.youtube.com/embed/NX97Re2WuEE?list=PL613C6231698C2FAD" allowfullscreen></iframe>
	  </article>
    </section>
	
    <section id="presentation">
      <h1>Présentation</h1>
      <p> blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>
    </section>
	
    <footer>
      <p>Copyright - Blablablabla</p>
    </footer>
	
  </body>
</html>

Code CSS:


@charset "UTF-8";

/* Corps */



html, body
{
	background-color:black;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	width: relative:80%;
	height: 100%;
	border: 3px solid yellow;
	margin: auto;	
}


/* En-tête */

#entete
{
	background-image:url(images/baniere.jpg);
	height: 290px;
	background-repeat:no-repeat;
}

#text-header
{
	text-align:left;
	font-family:"Comic Sans MS", cursive, serif;
	font-size:30px;
	margin-top: 15px;
	margin-left: 5px;
}


/* Pied de page */

footer
{
	text-align:center;
	font-size:small;	
	position: relative;
	bottom :0px;
	left: 0px;
	right: 0px;
}


/* Navigation */

nav
{
	text-align:center;
	width: 35%;
	display: inline;
}

nav ul
{
	list-style-type: none;
}

nav li
{
	display: inline-block;
	margin-right: 15px;
}

nav a:hover
{
	color:#CCC;
	border-bottom: 3px #999;
}


/* Section */

section
{
	border: 1px solid blue;
	margin-top: 50px;
	display: inline-block;
	vertical-align: top;
}

#actu
{
	width: 70%;
	position: absolute;
	left: 20px;
	overflow: auto;
}


iframe
{
	margin-bottom: 15px;
	margin-left: 100px;
	margin-right: 100px;
}




#presentation
{
	border: 1px solid red;
	width: 25%;
	position: absolute;
	right: 20px;	
}

Afficher la suite

A voir également:

Afficher le footer en bas du site
Site comme coco - Accueil - Réseaux sociaux
Site de telechargement - Accueil - Outils
Quel site remplace coco - Accueil - Réseaux sociaux
Site x - Guide
Site pour vendre des objets d'occasion - Guide

6 réponses

Réponse 1 / 6

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Salut
l'erreur vient peu être de la

tu as mis #actu et #presentation en position absolute mets les en position relative car mettre un div en position absolute les sort du flux du code

Réponse 2 / 6

j3-1996 Messages postés 77 Date d'inscription Statut Membre Dernière intervention 2

En modifiant d'autre bout de mon code j'ai "accidentellement" réussi à placer mon footer dans le bas de la page. Parcontre j'ai toujours le problème que mes deux sections ce trouve en dessous de body et non à l'intérieur. J'ai essayer de mettre relative au lieux de absolute mais ça ne change rien

Réponse 3 / 6

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

mets en ligne et donne l'URL
tu as aussi une erreur dans html, body
width: relative:80%;

Un petit merci vaut mieux qu'une grande ignorance

Réponse 4 / 6

j3-1996 Messages postés 77 Date d'inscription Statut Membre Dernière intervention 2

Je n'ai pas encore d'hébergeur donc je ne peux pas le mettre en ligne pour l'instant et pour l'erreur je l'ai corrigé mais ça n'a rien a voir avec mon problème

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Salut,

Voici un exemple de version corrigée de ton code (voir les commentaires css et html) :


<!DOCTYPE html>
<html>

  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Pianisto.com</title>
    <style>
	@charset "UTF-8";

/* Corps */


body
{
	background-color:black;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	/* width: relative:80%; erreur de syntaxe. A corriger : */
	width: 80%;
	/* height: 100%; à supprimer sinon la hauteur du body correspond à la taille de l'écran et non à la taille du contenu */
	border: 3px solid yellow;
	margin: auto;	
}


/* En-tête */

#entete
{
	background-image:url(images/baniere.jpg);
	height: 290px;
	background-repeat:no-repeat;
}

#text-header
{
	text-align:left;
	font-family:"Comic Sans MS", cursive, serif;
	font-size:30px;
	margin-top: 15px;
	margin-left: 5px;
}


/* Pied de page */

footer
{
	text-align:center;
	font-size:small;	
	position: relative;
	bottom :0px;
	left: 0px;
	right: 0px;
}


/* Navigation */

nav
{
	text-align:center;
	/* width: 35%; display: inline; à supprimer : non utile */
}

nav ul
{
	list-style-type: none;
}

nav li
{
	display: inline-block;
	margin-right: 15px;
}

nav a:hover
{
	color:#CCC;
	border-bottom: 3px #999;
}


/* Section */

section
{
	border: 1px solid blue;
	margin-top: 50px;
	/* display: inline-block; à supprimer : non utile */
	vertical-align: top;
}

#actu
{
	width: 70%;
	overflow: auto;
	/* position: absolute; left: 20px; pas de position absolute, donc on peut enlever left qui ne sert plus */	
	float: left; /* pour placer le bloc à gauche par rapport à #presentation */
}


iframe
{
	margin-bottom: 15px;
	margin-left: 100px;
	margin-right: 100px;
}




#presentation
{
	border: 1px solid red;
	width: 25%;
	/* position: absolute; right: 20px;	idem que #actu */
	float: right; /* pour placer le bloc à droite par rapport à #actu */
}
	</style>
  </head>
  
  <body>
  
    <header>
      <div id="entete">
        <div id="text-header">Pianismo.com</div>
      </div>
    </header>
	
    <nav>
      <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="video.html">Vidéos</a></li>
        <li><a href="don.html">Don</a></li>
      </ul>
    </nav>
	    
	<section id="actu">
	<h1>Dernières viédos</h1>
      <article id="video1">
        <iframe width="640" height="360" src="//www.youtube.com/embed/9Ci7yQkSHGk" allowfullscreen></iframe>
	  </article>
      <article id="video2">
        <iframe width="640" height="360" src="//www.youtube.com/embed/JnNBkd6J3sU?list=PL613C6231698C2FAD" allowfullscreen></iframe>
	  </article>
      <article id="video3">
        <iframe width="640" height="360" src="//www.youtube.com/embed/NX97Re2WuEE?list=PL613C6231698C2FAD" allowfullscreen></iframe>
	  </article>
    </section>
	
    <section id="presentation">
      <h1>Présentation</h1>
      <p> blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>
    </section>
	
	<!-- on force le flux html à continuer sous les sections flotantes -->
	<div style="clear: both"></div>
	
    <footer>
      <p>Copyright - Blablablabla</p>
    </footer>
	
  </body>
</html>

Bonne journée

Réponse 6 / 6

j3-1996 Messages postés 77 Date d'inscription Statut Membre Dernière intervention 2

Salut,

Merci beaucoup pour ton aide. cette fois ça donne comme je voulais. Cependant je n'ai pas appliqué tout tes conseils étant donné que j'avais déjà fais quelque changement entre temps

Bonne journée

Discussions similaires

C'est quoi le site qui remplace coco chat

tiret du bas

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

Votre réponse

Discussions similaires