Probleme de footer avec height 100% ...

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Probleme de footer avec height 100% ...

fscalda

Gaaaaaazzzz

Bonjour à tous,

je rencontre un soucis avec mon pied de page (footer) , il se ballade toujours en milieu de page quand cette dernière est très longue.
A force de retoucher, changer, tester, je vois plus trop quoi faire ou j'ai du oublier de remettre un truc en place ...

Ma page :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="one.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="identification"><?php include('includes/identification.php'); ?></div>
<div id="bandeau"><?php include('includes/bandeau.php'); ?></div>
<div id="menu"><?php include('includes/menu.php'); ?></div>
<div id="contenu">
<div id="contenufiche">
<?php include('includes/fiche.php'); ?>
</div>
<div id="contenudroite"><?php include('includes/contenu-droite.php'); ?></div>
<div id="footer"><?php include('includes/copyright.php'); ?></div>
</div>
</body>
</html>

Le CSS ...

Code :

html, body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image:url(commun/carbon-fiber.jpg);
background-position:top;
height: 100%
}
div {
text-align:center;
}
div#identification {
position:absolute;
width:988px;
height:30px;
margin-left: -495px;
left: 50%;
border : solid #000000 1px;
}
div#bandeau {
position:absolute;
width:988px;
height:120px;
background-color:#FFCC33;
margin-left: -495px;
left: 50%;
border : solid #000000 1px;
top:30px;
}
div#menu {
position:absolute;
width:988px;
height:30px;
margin-left: -495px;
left: 50%;
border : solid #000000 1px;
top:150px;
}
div#contenu {
position:relative;
width:988px;
height:100%;
background-color:#FFFFFF;
margin-left: -495px;
left: 50%;
border : solid #000000 1px;
top:180px;
vertical-align:top;
}
div#contenufiche {
position:relative;
float: left;
width:770px;
height:100%;
background-color:#FFFFFF;
top:0px;
vertical-align:top;
text-align:left;
padding-left:0px;
}
div#contenudroite {
position:relative;
float: left;
width:216px;
height:100%;
background-color:#CCCCCC;
top:0px;
margin-left: 0px;
vertical-align:top;
text-align:left;
padding-left:0px;
border : solid #FF0000 1px;
}
div#footer {
position:absolute;
clear:both;
width:990px;
height:30px;
background-color:#CCCCCC;
border : solid #000000 1px;
bottom: 0px;
}

Un schema aidera peut être ...

Publicité

cetplus

Wazard dans l'ombre

Salut.
Hé bien je sais pas trop ce que tu veux. :heink:
Tu test, tu test.

Je sais pas si ça te convient : (surement pas mais bon :ange: on sait jamais)

Code :

html, body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image:url(commun/carbon-fiber.jpg);
background-position:top;
height: 100%
}
div {
text-align:center;
}
div#identification {
position:absolute;
width:988px;
height:30px;
margin-left: -495px;
left: 50%;
border : solid #000000 1px;
}
div#bandeau {
position:absolute;
width:988px;
height:120px;
background-color:#FFCC33;
margin-left: -495px;
left: 50%;
border : solid #000000 1px;
top:30px;
}
div#menu {
position:absolute;
width:988px;
height:30px;
margin-left: -495px;
left: 50%;
border : solid #000000 1px;
top:150px;
}
div#contenu {
position:relative;
width:988px;
height:100%;
background-color:#FFFFFF;
margin-left: -495px;
left: 50%;
border : solid #000000 1px;
top:180px;
vertical-align:top;
}
div#contenufiche {
position:relative;
float: left;
width:770px;
height:100%;
background-color:#FFFFFF;
top:0px;
vertical-align:top;
text-align:left;
padding-left:0px;
}
div#contenudroite {
position:relative;
float: left;
width:216px;
height:99.69%;
background-color:#CCCCCC;
top:0px;
margin-left: 0px;
vertical-align:top;
text-align:left;
padding-left:0px;
border : solid #FF0000 1px;
}
div#footer {
position:absolute;
clear:both;
width:768px;
height:30px;
background-color:#CCCCCC;
border : solid #000000 1px;
bottom: 0px;
}

fscalda

Gaaaaaazzzz

Hello, merci pour ta réponse, je vais regarder ci cela fonctionne comme je le souhaite.

Voila ce que je comptais faire :

Mais le footer bizarrement passe par dessus le contenu de la fiche quand celui ci devient trop long (Affichage d'une requete de centaine de fiche).

J'ai encore bouger mon code je simplifie...

fscalda

Gaaaaaazzzz

Hello cetplus,

ça s'améliore, mais c'est toujours pas ça ... :pt1cable: Sur toutes les pages, c'est ok, sauf celle ou une liste assez longue s'affiche, je comprends pas...

J'en suis la :

Page :

Code :

<div id="contenu">
<div id="identification"><?php include('includes/identification.php'); ?></div>
<div id="bandeau"><?php include('includes/bandeau.php'); ?></div>
<div id="menu"><?php include('includes/menu.php'); ?></div>
<div id="contenufiche">
<?php include('includes/fiche.php'); ?>
</div>
<div id="contenudroite"><?php include('includes/contenu-droite.php'); ?></div>
<div id="footer"><?php include('includes/copyright.php'); ?></div>
</div>

Et le CSS :

Code :

html, body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image:url(commun/carbon-fiber.jpg);
background-position:top;
height: 100%
}
div {
text-align:center;
}
div#contenu {
position:absolute;
width:988px;
height:100%;
background-color:#FFFFFF;
margin-left: -495px;
left: 50%;
border : solid #000000 1px;
vertical-align:top;
}
div#identification {
position:relative;
width:988px;
height:30px;
border : solid #000000 1px;
}
div#bandeau {
position:relative;
width:988px;
height:120px;
background-color:#FFCC33;
border : solid #000000 1px;
}
div#menu {
position:relative;
width:988px;
height:30px;
border : solid #000000 1px;
}
div#contenufiche {
position:relative;
float: left;
width:770px;
height:100%;
background-color:#FFFFFF;
vertical-align:top;
text-align:left;
padding-left:0px;
}
div#contenudroite {
position:relative;
float: left;
width:216px;
height:99.69%;
background-color:#CCCCCC;
top:0px;
margin-left: 0px;
vertical-align:top;
text-align:left;
padding-left:0px;
border : solid #FF0000 1px;
}
div#footer {
position:absolute;
clear:both;
width:768px;
height:30px;
background-color:#CCCCCC;
border : solid #000000 1px;
bottom: 0px;
}

Message édité par fscalda le 04-03-2011 à 10:07:17

fscalda

Gaaaaaazzzz

Bon, je commence à comprendre, la position de mon footer est non dépendante de mon div#contenufiche et de div#contenudroite, mais seulement de div#contenudroite.

Donc, si mon contenu de droite est plus ou moins vide...ça donne ça :

Message édité par fscalda le 04-03-2011 à 10:30:50

crasse2

si ton site est statique, en bricolant tu pourrais y arriver en mettant tes div contenu fiche et contenu droite dans un meme div "contenu" par exemple donc la hauteur correspond a la hauteur la plus grande entre fiche et droite et tu place en dessous (dans l'ordre c'est important) dans ton fichier html la div footer avec en css position:relative et top:0.

fscalda

Gaaaaaazzzz

Merci crasse2, le contenu fiche est dynamique, mais bon, tu m'as donné une super piste, je teste et je fais un retour [:aztechxx]

David Boring

Un clear:left sur le #footer devrait suffire non ?
Tes blocs contenu sont flottant, donc en dehors du flux.
Ce sont les bases du css
http://www.coursweb.ch/css/float.html

fscalda

Gaaaaaazzzz

Clear : left ne fonctionne pas ... je vais tout reprendre tranquillement depuis le début...

David Boring

C'est certain, pour le moment c'est n'importe quoi (sorry)
Voilà ton layout

Code :

* {margin:0;    padding:0;}
    body {
        background:#fff url(commun/carbon-fiber.jpg) top;
    }
    div {
        text-align: center;
    }
    #contenu {
        width: 988px;
        margin: 0 auto;
    }
    #identification {
        background: red;
    }
    #bandeau {
        background-color: #FFCC33;
    }
    #menu {
        background: teal;
        height: 30px;
        border :1px solid #000;
    }
    #wrapper_content {
        overflow: hidden;
        zoom: 1;
    }
    div#contenufiche {
        float: left;
        width: 770px;
        background-color: #FFFFFF;
    }
    div#contenudroite {
        float: right;
        width: 216px;
        background-color: #CCCCCC;
    }
    div#footer {
        background-color: orange;
    }

Code :

<div id="contenu">
<div id="identification">identification</div>
<div id="bandeau">bandeau</div>
<div id="menu">menu</div>
<div id="wrapper_content">
<div id="contenufiche">
contenu fiche
</div>
<div id="contenudroite">conteu droite</div>
</div>
<div id="footer">footer</div>
</div>

Publicité

fscalda

Gaaaaaazzzz

Vi, c'est clair qu'il à fallu que je nettoie grandement :pt1cable: car comme tu l'as très bien mentionné, je dirais que j'ai fait de la m* :whistle: mais bon, j'ai trouvé à force de chercher.

L'url de la mort http://ryanfait.com/sticky-footer/

FORUM HardWare.fr

Programmation

HTML/CSS

Probleme de footer avec height 100% ...

Sujets relatifs
Probleme de regex	VBA Excel 2007 Problème de variable objet. Erreur 91
Problème lors de l'import de GTK	Problème à l'importation B.D.D MySQL
Probléme language C	[resolu] Probleme de variable "tout" sur un formulaire de recherche
probleme de boucle	probleme sur mon site web
problème avec un DIFF	Wanewsletter et fckeditor probleme
Plus de sujets relatifs à : Probleme de footer avec height 100% ...

Page générée en 0.130 secondes