28172 sujets

CSS et mise en forme, CSS3

Pb CSS : Ecart entre contenu et pied de page [Résolu]

Bonjour,

Je n'arrive pas à comprendre pourquoi sur certaines de mes pages (les + longues), le bloc "contenu" ne se positionne pas correctement sous le pied de page...
Pourtant, initialement tout était ok, je ne comprends pas ce que j'ai pu faire Smiley decu

(Merci d'avance pour l'aide) 
<style type="text/css">
<!--
#conteneur #contenu p img {
	position: relative;
	height: 150px;
	width: 211px;
	border-top-style: double;
	border-right-style: double;
	border-bottom-style: double;
	border-left-style: double;
	border-top-color: #ABC568;
	border-right-color: #ABC568;
	border-bottom-color: #ABC568;
	border-left-color: #ABC568;
	float: left;
	margin-right: 10px;
	margin-bottom: 1px;
}
#entete {
	height: 210px;
	width: 750px;
	background-color: #FFF;
	text-align: center;
	padding-top: 5px;
}
#menu {
	height: 50px;
	width: 750px;
	background-color: #FFF;
	text-align: center;
}
#conteneur #menu ul a {
}
#conteneur #menu ul {
}
#contenu {
	width: 750px;
	background-color: #FFF;
	text-align: left;
}
#pied_page {
	height: 35px;
	width: 750px;
	background-color: #FFF;
}
#conteneur {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
}
body {
	background-color: #abc568;
}
#conteneur #menu ul li {
	list-style-type: none;
	display: inline;
}
#conteneur #menu ul li {
	color: #89263a;
}
#conteneur #menu ul {
}
.espace {
	margin-right: 50px;
}
.espace {
	margin-right: 10px;
}
#conteneur #menu ul {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	padding-top: 10px;
	margin: 0px;
	padding-left: 0px;
}
#conteneur #menu ul {
	padding-top: 15px;
}
#conteneur #menu ul a {
	color: #2f1710;
	text-decoration: none;
}
#conteneur #menu ul  a:hover {
	background-color: #abc669;
	height: 50px;
	width: 755px;
	margin: 0px;
	color: #2f1710;
}
.image_entete {
}
#conteneur #entete a img {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#conteneur #contenu {
	background-color: #FFF;
	left: 66px;
}
#conteneur #contenu h3 {
	padding-left: 90px;
	margin-top: 0px;
}
#conteneur #contenu p {
	text-align: justify;
	padding-left: 55px;
	padding-right: 35px;
	color: #2f1710;
	background-color: #FFF;
}
#conteneur #contenu h3 {
	color: #811e2b;
}
#conteneur #contenu p a {
	color: #861c30;
	text-decoration: none;
}
#conteneur #contenu p a:hover {
	background-color: #abc669;
}
-->
</style>


<body>
<div id="conteneur">
  <div id="entete"><a href="index.html"><img src="images/logo3.jpg" width="701" height="203" alt="banniere" /></a><a name="haut" id="haut"></a></div>
  <div id="menu">
    <ul>
      <li class="espace"><a href="index.html">Accueil</a></li>
      <li class="espace"><a href="fichepays.html">Fiche pays</a></li>
      <li class="espace"><a href="villes.html">Circuit</a></li>
      <li class="espace"><a href="cuisine.html">Cuisine</a></li>
      <li class="espace"><a href="scandales.html">Scandales</a></li>
      <li class="espace"><a href="chartevoyageur.html">Charte du voyageur</a></li>
      <li class="espace"><a href="galeriephotos.html">Photos</a></li>
    </ul>
  </div>
  <div class="image_entete" id="contenu"> 
    <h3><br />
    Titre</h3>
    <p>texte texte texte </p>
    <p><img src="images/photos/divers/niagaralake2.JPG" width="743" height="557" alt="maison 1" />Texte texte texte.</p>
    <p><br />
    </p>
<p><img src="images/photos/divers/camion.JPG" width="3648" height="2736" alt="camions" />Texte texte texte <br />
Texte texte texte <a href="http://fr.wikipedia.org/wiki/Sherbrooke">Sherbrooke</a>.</p>
<p><br />
 Texte texte texte <br />
  <br />
  <a href="#haut">Retour en haut de la page</a><br />
  <br />
</p>
  </div>
  <div id="pied_page"></div>
</div>
</body>

Modifié par SUMIE (18 Dec 2010 - 00:35)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.


Pour ce qui est de ton problème, une feuille de style sans le code HTML correspondant, ne sert à rien ; comment pouvons nous savoir à quel élément est appliqué tel ou tel style, quelle est l'imbrication...

Bonne continuation Smiley smile

upload/1-code.gif
C'est bon : Le problème vient du dernier <p> contenu dans #contenu, la marge externe par défaut décale le pied de page.

La solution : J'ai mis 0 à margin de <p> et l'écart s'efface.

Dès fois que cela puisse aider quelqu'un.
Sujet clos
Aller à