28172 sujets

CSS et mise en forme, CSS3

Coller le pied mon pied de page à mon conetnu

Bonjour ,

j'ai suivie le tuto du site pompage (http://www.pompage.net/pompe/pieds/) concernant les pieds de pages mais malgré tout je n'arrive toujours pas a coller mon pied de page à mon bloc contenu. Et quand j'y arrive je m'appercois qu'une partie de mon contenu est squizé.

Je souhaiterais faire en sorte a avoir un site extensible en longueur avec avec mon menu général et pied de pages collé à mon bloc contenu.

Je vous joint mon code afin que vous puissiez me conseiller.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
    <title>...</title>

    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body>

<div id="container">
		<h1 id="header"><span><a href="...html"></a></span></h1><!--Entete de site-->
		
		<ul id="menu_general">
			<li>Accuiel</li>
			<li>Download</li>
		</ul>
		
    	<div id="contenu"><br />

		<h2>Mon site</h2>
		<p>Bla bla bla bla</p>
		<p>Bla bla bla</p>
		<em>- Je crains qu'aujourd'hui le choix de monsieur ne soit pas des plus judicieux... Si je peux juste me permettre...
		- Tu ne te permets juste rien du tout. Tu vas d'abord me soigner cette mauvaise peau et ensuite tu te permets, ok ?</em>
		<hr />
		<h2> Mon site</h2>
		<p>Bla bla bla bla</p>
		<p>Bla bla bla</p>
		</div>
    <div id="footer">Copyright by <a href="">...</a></div>

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


CSS

html, body {
    height: 100%;}

body {
background: url(images/vistatrends_wallpaper_avantzone.jpg) no-repeat;
margin: 20px 0 30px 0 ;
padding: 0 ;
text-align: center;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;}


/*-------------CONTENERE GLOBAL DE SITE--*/
#container {
position: relative;
min-height: 100%;

width: 800px;
margin: auto;
text-align: left;}
/*-----------------------ENTETE DE SITE--*/
#header {
background: url(images/head.png) no-repeat;
height: 200px;}
/*------------------MENU GENERAL (HAUT)--*/
#menu_general {
margin: 0;
height: 89px;
background: url(images/menu.png) no-repeat;}

/*------------------------------CONTENU--*/
#contenu {

min-height: 100%;
background: url(images/contenu.png) repeat-y;}

#contenu h2{
padding-left: 30px;
color: #FF6600;
border-bottom: dashed 1px;}

#contenu p{
font-size: 0.9em;
color: #fff;
text-align: justify ;
text-indent: 2em ;
line-height: 0.5em ;}

/*-------------------------PIED DE PAGE--*/
#footer {
position: absolute;
bottom: 0;
background: #0033FF;
width: 800px;
background: url(images/pied.png) no-repeat;
height: 50px;}

/*------------------------------AUTRES--*/
hr {
height: 0.1em;
width: 300px;
margin-left: 25%;
padding: 0;
color: #333333;}


Merci a vous pour votre aide.
Hello, Smiley smile

- Il manque left:0 sur #footer,
- Il faudrait éviter les margin sur body, préférer les padding sur #container si possible,
- Il faut rajouter un padding-bottom à peu près égal à la hauteur de #footer pour éviter que le contenu et le pied de page ne se superposent,
- Le min-height:100% sur #contenu est inutile, si tu veux un fond qui se répète sur toute la hauteur de la fenêtre il faudra le mettre sur #container.

Le reste me semble correct, une page en ligne pourrait aider à avancer. Smiley cligne
Oups, désolé pour le retard,

Entre temps , j'ai eu une sérieuse panne de PC se qui explique partiellement se retard.

merci en tout cas pour le coup de pouce, j'ai essayé a nouveau en conservant la meme base se qui marche sur IE en fixant le pied de page à fleur de la marge du bas, par contre sur FF j'ai un ptit décalage. Si tu a la réponse, c'est cool, si non j'essai de la trouver et vous tiens informé .

Merci encore.
Sujet clos
Aller à