28173 sujets

CSS et mise en forme, CSS3

Texte qui passe sous le footer.

Bonjour (edit ^^)

Tout d'abord voici le lien en question: http://n.romaric.free.fr/test/Nouveau%20dossier/

J'explique mon souci, j'essai de faire en sorte que mon footer colle au bas de la page et cela peu importe l'importance du contenu.

Sur ma page mon footer est bel et bien en bas de page, cela dit si le texte deviens trop important, il passe par dessous et le footer ne colle plus au bas de page (voir le lien).

Je ne vois pas ou est mon erreur, si quelqu'un pouvais jeter un oeil ce serai bien gentil.

Voici ma page html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>titre</title>
<meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-15" />
	  <link rel="stylesheet" type="text/css" href="styles.css"
	  media="screen" />
</head>
<body>

<div id="global">
 <div id="bgheader">
                <div id="header">
				    <div id="pathway">
				        <div class="pathway-texte"> 
						Accueil - Présentation..
						</div>
				    </div>
				</div>
</div>				
				<div id="contenu">
				
				
				            <div id="texte">
				                        <div class="texte-contenu">
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										texte de contenu<br/>texte de contenu<br/>
										</div>
							</div>		

							<div id="menuv">
							<div class="texte-menuv">
							Accueil<br/>
							Présentation</br>
							</div>
							</div>
				</div>
				
				<div id="footer">
				
				            <div id="footer-copy">
				                        <div class="copy">
				                        Copyright blablabla
				                        </div>
							</div>			
				</div>

</div>
</body>
</html>



Et ma page css:

html, body {
	margin: 0;
	padding: 0;	
	height:100%;
}
Body {
background-image:url(images/bg.png);
background-color:#f3f3f3;
margin : 0 auto 0 auto;
}


#global {
position:relative;
min-height:100%;
background-image:url(images/corp.png);
background-repeat:repeat-y;
}


#bgheader{
background-image:url(images/bg-h.png);
background-repeat:repeat-x;
height:147px;
}

#header {
background-image:url(images/header.png);
width:786px;
height:184px;
}
#pathway {
position:relative;
width:514px;
margin-left:17px;
padding-left:5px;
padding-top:149px;
}


#contenu {
width:786px;
margin-bottom: 0;
padding-bottom: 4em;
}
                #texte {
				position:relative;
				float:left;
				width:509px;
				margin-left:17px;
				padding-left:10px;
				margin-top:40px;
				}
				#menuv {
				float:left;
				width:194px;
				margin-left:17px;
				padding-left:15px;
				margin-top:40px;
				}

				
				
#footer {
background-image:url(images/footer.png);
width:786px;
height:105px;
position: absolute;
bottom: 0; 
left: 0;
}
#footer-copy {
float:left;
width:509px;
margin-left:17px;
padding-left:10px;
margin-top:50px;
padding-top:15px;
}


                                            .texte-contenu {
											font-family:Verdana, Georgia;
											font-size:0.8em;
											}
											.texte-menuv {
											font-family:Arial,Georgia;
											font-size:0.9em;
											}
											.copy {
											font-family:Georgia, Arial;
											font-size:0.7em;
											text-align:center;
											}
											.pathway-texte {
											font-family:Times;
											font-size:0.8em;
											}



Merci d'avance. Smiley smile
Modifié par Romaric (10 Jul 2007 - 18:47)
Oops désolé, "Bonjour ^^" (j'ai pas commencer mon message dans le bon ordre, ce qui explique l'oubli mais ne l'escuse pas Smiley ohwell )

Bah mince, si bête et j'avais pas vu, ça fonctionne nickel, merci beaucoup Smiley smile

Edit: Finalement non, si j'enleve l'absolute, je n'ai plus mon footer en bas de page si le texte est moindre : http://n.romaric.free.fr/test/2/
Modifié par Romaric (10 Jul 2007 - 18:52)
Sujet clos
Aller à