28173 sujets

CSS et mise en forme, CSS3

[résolu] Encore et toujours un problème de bas de page

bonjour à tous

malgré toutes mes recherches sur le forum ou sur "gougoule" , malgré avoir lu la FAQ ... je n'arrive pas à resoudre mon problème de bas de page ! je suis parti du gabarit modèle 5 (modele5.htm) que j'adapte au fur et à mesure de mes besoins

çà fonctionne que si je fixe le width de "centre" à une dimension > ou = à la colonne gauche ce qui me m'arrange pas.

voici une partie de la css:

*{
margin:0;
padding:0;}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background: #725359 url(../img/bg.gif) repeat-x; 
}	
/*header */
/*-----------------------------------------*/
#header1 { 
width: 760px;
height: 78px;
background: #725359 url(../img/header1.gif) no-repeat;	
}
#header2 { 
width: 760px;
height: 72px;
background: #725359 url(../img/header2.gif) no-repeat;	
}
#header1 h1 span, #header2 h1 span {display: none;}
#header1 h1 {
    position: relative;
    top: 0px;
    left: 15px;
    margin: 0;
}
#header1 h1 a {
    display: block;
    width: 259px;
    height: 34px;
    background: url(../img/logo.gif) top left no-repeat;
}
#header2 h1 {
    margin: 0;					 
    height: 60px;	 
    background: url(../img/titre-portfolio.gif) 140px 15px no-repeat;
}	
/*corps du site*/
/*--------------------------------------------*/
#conteneur {
position: relative;
top:30px;
width: 760px;
left: 50%;
margin-left: -380px;
background: #fFF url(../img/main.gif) repeat-y;
}	

#centre {
display:block;
background-color:#fff;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 110px;
}
#droite {
position: absolute;
right:0;
width: 110px;
}
/* Pied de page
----------------------------------------------- */
#pied {	
width:760px;
height: 37px;
background: #725359 url(../img/footer.gif) no-repeat;
font-size:85%;	
border:1px solid green;		/* pour test*/
width:758px;	/* pour test*/
}

#pied p {
  margin:0;
  padding:10px 20px; 
  color:#777;
  text-align:center;
  line-height:1.6em;
  }
/* Fixe-bug pour IE-Win (5 and 6)*/
* html #footer p {
  height:1%;
  }


voici le html :
<body>
<div id="conteneur">
<div id="header1">
	<h1><a href="http://www.nordahldesign.info/" title="Nordahl Homepage"><span>Nordahl Homepage</span></a></h1>	
</div>	
<div id="header2"><h1><span>Nordahl Homepage</span></h1></div>
	  <div id="gauche">
			<img src="img/photo1.gif" border="0" width="130" height="527" alt="">	
	  </div>

	  <div id="droite">
			<p>droite</p> 	
			<ul class="menudroit">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>

			</ul>
	  </div>  
  	<div id="centre">
  	  partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />	 	 
  	</div>
	  <div id="pied"><p>pied de page</p></div>
</div>
</body>


si vous avez une idée de solution pour m'aider à résoudre ce problème

voici le lien de la page
Merci.ma page ici
Modifié par dentnoir (09 Dec 2005 - 18:18)
Modérateur
bonjour,
en plaçant les elements menu en "float", cela va te permettre de t'assurrer de positionner ton footer en dessous de ceux-ci a l'aide d'un :clear:both;

ex avec l'extrait de css concernant les menus et footer.
#gauche {
float:left;

width: 110px;
}
#droite {
float:right;

width: 110px;
}
/* Pied de page
----------------------------------------------- */
#pied {	
width:760px;
height: 37px;
background: #725359 url(./img/footer.gif) no-repeat;
font-size:85%;	
width:760px;	
clear:both;
}


a plus
Modifié par gcyrillus (09 Dec 2005 - 15:35)
Super Merci !! çà marche
j'avais bien pensais au "clear:both;" mais pas à mettre les menus en float j'ai fais une fixation sur le "pied de page" et le "conteneur"...
Merci j'en apprend tous les jours un peu plus..
@+
Sujet clos
Aller à