Sujet Précédent Sujet Suivant

Afficher le footer en bas du site

Résolu/Fermé
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 - 10 oct. 2013 à 14:24
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 - 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;	
}




A voir également:

6 réponses

Réponse 1 / 6
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
10 oct. 2013 à 16:22
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
0
Réponse 2 / 6
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 2
10 oct. 2013 à 16:38
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
0
Réponse 3 / 6
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 10/10/2013 à 16:47
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
0
Réponse 4 / 6
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 2
10 oct. 2013 à 16:50
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
0

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 lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
10 oct. 2013 à 17:17
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
0
Réponse 6 / 6
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 2
10 oct. 2013 à 17:43
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
0

Discussions similaires

[SUJET GROUPÉ] Le site COCO.GG est définitivement fermé.
Utilisateur anonyme -
Panth33ra -

20 réponses
C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
adele
marine carnet-pantier -
irongege -

2 réponses