18041 sujets

Questions générales et questions de débutants

Problème positionnement du pied de page

Bonjour,

j'ai déjà conçu quelques sites internet avec un pied de page qui se positionne en bas de l'écran même si l'article est trop court mais ça ne fonctionne pas sur ma dernière réalisation... J'ai certainement oublié quelque chose mais là je tourne en rond.
Je ne peux malheureusement pas donner un exemple en ligne pour l'instant aussi, je vous donne le code en espérant que vous puissiez m'aider quand même.

code css :

html {
	font-size: 100%;
	background-color:#333;
	background-image: url("arp_hg.png");
	background-repeat: no-repeat;
}

body {
	font-family: Verdana, "Bitstream Vera Sans", Tahoma, Arial, sans-serif;
	font-size: 75%;
	margin: 0;
	padding: 0;
	color : #eee;
	background-image: url("arp_bd.png");
        background-repeat: no-repeat;
	background-position: right bottom;
}

p {
	padding: 0 8px 0 16px
}

h1 {
	color : #fc0; 
	font-weight: bold;
	margin: 27px 0 0 7px;
}

h2, h3, h4, h5, h6 {
	margin: 1em 0 .5em 0;
	color : #9cf; 
	font-weight: bold;
}

h1 {
    font-size: 2.25em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.25em;
}

h4 {
    font-size: 1em;
}

dl, dt, dd, ul, li {
	margin: 5px;
	padding: 0;
	list-style-type: none;
   	font-size: 1em;
}

img {
	border:0;
	margin: 4px;
}

img.d {
	float: right;
	}

img.g {
	float: left;
	}

a {	
	text-decoration: none;
	color:#ae0; 
	font-weight: bold;
}

a:hover {
	color:#690;
}

#page {
	position: relative;
	width: 95%;
	max-width: 970px;
	min-width: 760px;
	margin: 8px auto 8px auto;
	min-height: 100%;
	}

#entete {
	height:70px;
	}

#article {
	padding: 16px 16px 16px 16px;
	margin-left: 200px;
	text-align:justify;
	padding-bottom: 25px; /* hauteur du pied de page */
	}

#gauche {
	position: absolute;
	left:0;
	width: 200px;
	top:193px;
}

#breves {
	background-color:#666;
	margin: 5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
}

#rechercher {
	margin: 5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
}

#pied_de_page {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	height: 25px;
	line-height: 25px;
	margin-top: 5px;
	border-top: 1px solid #666;
}


code html :


#CACHE{43200}
<BOUCLE_breve_principal(BREVES) {id_breve}>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">

<head>
			<INCLURE{fond=inc-head}>	
</head>

<body>

<div id="page"> 


  <div id="entete">
			 <INCLURE{fond=inc-entete}>
  </div>

  <div id="gauche">
	
		<div id="rechercher">
			<a name="formulaire_recherche" id="formulaire_recherche"></a>
			<form action="spip.php?page=recherche" method="get">
			<input name='page' value='recherche' type='hidden' />
			<input type="text" name="recherche" value="Rechercher" onfocus="this.value='';" />
			</form>
		</div>
	
		<INCLURE{fond=inc-menu-gauche}>	
  
	</div>

  <div id="article">
	[(#REM) Fil d'Ariane ]
	<div id="hierarchie"><a href="#URL_SITE_SPIP/" ><:accueil_site:></a><BOUCLE_ariane(RUBRIQUES){id_rubrique}> &gt; <a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero|couper{80})]</a></BOUCLE_ariane>[ &gt; (#TITRE|couper{80})]</div>
		<div id="contenu">

			<div class="cartouche">
				[(#LOGO_BREVE||image_reduire{200,200})]
				<h2 class="titre">[(#TITRE|supprimer_numero)]</h2>
				<p><small>[(#DATE|nom_jour) ][(#DATE|affdate)]</small></p>
			</div>

			[<p>(#TEXTE)</p>]
			[<p class="lien"><:voir_en_ligne:> : <a href="(#URL_SITE)" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
			[<div class="notes"><h3><:info_notes:></h3>(#NOTES)</div>]

		</div><!-- fin contenu -->


 </div>

  <div id="pied_de_page">
	<INCLURE{fond=inc-pied}{lang}>
  </div>
</div>
</body>
</html>
</BOUCLE_breve_principal>
Je viens de trouver Smiley cligne j'ai oublié de placer 
height: 100%;
dans le html et le body...
Reste un tout petit problème, le pied de page passe légèrement en dessous de l'écran mais si je mets 95%, mon image en bas à droite n'est pas bien positionnée. Je souhaite la placer sous le pied de page tout en débordant derrière le contenu... Ce qui est le cas quand c'est 100% !!! Un moyen aurait été de la placer dans l'html du css mais j'en ai déjà une positionnée en haut à gauche Smiley cligne
Heu... J'espère que j'ai été clair !
Bonjour !

Heu... J'espère que j'ai été clair

Oui bien sur mais alors pourquoi avoir imbriqué ce DIV dans d'autres DIV ?
moi je l'aurais laissé indépndant Smiley eek
Bonsoir,

FoxLeRenard a écrit :


Oui bien sur mais alors pourquoi avoir imbriqué ce DIV dans d'autres DIV ?
moi je l'aurais laissé indépndant Smiley eek


Si je mets mon <div id="pied_de_page"> hors de mon <div id="page">, le pied de page se colle toujours en bas de la fenêtre, ce qui vient chevaucher le contenu si la fenêtre est trop petite.

En fait la question que je me pose maintenant c'est peut-on placer deux images en arrière plan ? Une en haut à gauche et une en bas à droite.
Pour l'instant, j'ai celle en haut à gauche :

html {
	font-size: 100%;
	background-color:#333;
	background-image: url("arp_hg.png");
	background-repeat: no-repeat;
	height: 95%;
}

mais comment faire pour en placer une en bas à droite dans ce html {} ?
Sujet clos
Aller à