[XHTML - CSS] Mise en page complexe - problèmes

**doudoustephane** · 03/06/2008, 12h06

Bonjour.
Je cherche à construire une page, dans laquelle j'ai un tableau à 3 lignes et 3 colonnes.
dans une de mes cellules, la cellule centrale de la page qui descend jusqu'en bas de la fenêtre du navigateur au moins, je cherche à insérer un pied de page (propre à cette cellule donc). J'ai fait des essais avec les table et css, avec les div et css et rien n'y fait.
Voici ce que j'ai pour le moment :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height:100%;
    background-color: #FFFFFF;
    color: #000000;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
}
 
div#page {
    width: 815px;
    min-height: 100%;
    background-color:#FFFFFF;
    position:relative;
    margin:0 auto;
    height:100%;
}
 
div#pied_de_page
{
    position:relative;
    width:100%;
    background-color:#000000;
    text-align:center;
    clear:both;
}

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
            <div id="page" class="page">
                        <p>bonjour</p>
                        <p>bonjour</p>
                        <p>bonjour</p>
                <div id="pied_de_page" class="pied_de_page">
                    <?php include(DIR_INCLUDES . 'footer.php'); ?>
                </div>
            </div>

Or, cela ne fonctionne pas.
Et si je mets le pied de page en absolue, le texte que je rajoute dans le div page passe en dessous du pied de page...

Si quelqu'un sait comment solutionner ce problème SVP ...?
Merci d'avance

**Er3van** · 03/06/2008, 12h34

Tu peux déjà commencer par enlever tout le code superflu :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /*min-height:100%; quand la taille est définie, la taille minimale ne sert pas */
    background-color: #FFFFFF;
    color: #000000;
    /*margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0; Tu as déjà définis margin:0 */
}
 
div#page {
    width: 815px;
    /* min-height: 100%; déjà défini dans le parent avec height:100% */
    background-color:#FFFFFF;
    position:relative;
    margin:0 auto;
    /*height:100%; déjà défini dans le parent */
}
 
div#pied_de_page
{
    position:relative;
    width:100%;
    background-color:#000000;
    text-align:center;
    /* clear:both; inutile, tu n'es en position floattante ! */
}

Ensuite, si ton tableau contient autre chose qu'un véritable contenu tableau, c'est déconseillé pour des raisons d'accessibilité.

Pour le reste, est-ce que tu peux décrire ce que tu as à l'écran, ou mieux, fournir une page en ligne ?

Logiquement, tu devrais plutôt avoir :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="page" class="page">
      <p>bonjour</p>
      <p>bonjour</p>
      <p>bonjour</p>        
</div>
<div id="pied_de_page" class="pied_de_page">
       <?php include(DIR_INCLUDES . 'footer.php'); ?>
</div>

**doudoustephane** · 03/06/2008, 14h39

salut Er3van.
Merci de ton aide.
En fait, le problème en soit est simple : je possède un div qui va au minimum en bas de l'écran utilisateur (plus si plus de texte qu'affichage).
comment mettre un pied de page à se div qui soit toujours en bas de celui-ci (dedans).
Or, la solution que tu me donnes, en sortant le div du pied de page de celui du contenu, cela ne fait que le mettre à la suite sur la ligne du dessous.
voilà, en espérant avoir été plus clair,
merci d'avance

**Er3van** · 03/06/2008, 15h03

Si ton div en question en en positionnement relatif, tu peux utiliser la technique suivante qui devrait fonctionner.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
div#pied_de_page
{
    position:relative; /* ou absolute, à voir */
    bottom : -20px ;
    width:100%;
    background-color:#000000;
    text-align:center;
    /* clear:both; inutile, tu n'es en position floattante ! */
}

Et ça devrait marcher, si ce n'est pas le cas, je ne vois pas de solution adéquat dans l'immédiat.

En revanche, pourquoi le fait que le pied de page passe en dessous gêne ? Ce n'est pas ce que tu veux ?

**doudoustephane** · 03/06/2008, 15h06

Envoyé par Er3van

Si ton div en question en en positionnement relatif, tu peux utiliser la technique suivante qui devrait fonctionner.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
div#pied_de_page
{
    position:relative; /* ou absolute, à voir */
    bottom : -20px ;
    width:100%;
    background-color:#000000;
    text-align:center;
    /* clear:both; inutile, tu n'es en position floattante ! */
}

Et ça devrait marcher, si ce n'est pas le cas, je ne vois pas de solution adéquat dans l'immédiat.

En revanche, pourquoi le fait que le pied de page passe en dessous gêne ? Ce n'est pas ce que tu veux ?

cela ne fonctionne pas.
Sinon, le fait que ca passe en dessous ne me gene pas, mais ca passe juste en dessous et pas en bas et donc, s'il n'y a pas assez de texte, le pied de page se retrouve au milieu de l'écran, et ca, ca pose problème.
merci

**Candygirl** · 03/06/2008, 16h23

Envoyé par Er3van

Tu peux déjà commencer par enlever tout le code superflu :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
div#page {
    /* min-height: 100%; déjà défini dans le parent avec height:100% */
}

Ce min-height est indispensable pour ce qu'il souhaite faire.

Il y a deux manières pour placer le footer. Soit dans #page, à l'aide d'un positionnement absolu, bottom:0, soit en dehors, à l'aide d'un margin négatif de sa hauteur. Après il y a pleins de petits détails à règler pour ce type de montage.

**Er3van** · 03/06/2008, 16h35

Alors là j'avoue ne pas comprendre...

Si une taille minimale est en %age, elle est inutile puisqu'on donne une taille height également en %age.

Il n'y a pas de raisons pour que min-height soit pris en compte et pas height...il y en a une ?

Si min-height était en px là ça aurait eu de l'intérêt, mais en pourcentage j'avoue ne pas comprendre.

Explication ?

Parceque si on fixe la taille d'un carton à la taille du camion qui le contient, mais qu'on fixe la taille minimale de ce même carton à la taille du même camion qui le contient, on dit deux fois la même chose...

De plus, min-height ne fonctionnera pas pour IE 6, nah !

**doudoustephane** · 03/06/2008, 17h30

en tout cas, du coup, je me suis lancé dans un essai avec javascript.
ca fonctionne bien sauf en cas de redimmensionnement.
sinon, si vous connaissez javascript, peut-être trouverz-vous mon erreur ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/javascript">
function place_pied_de_page()
{
    var e = document.getElementById("pied_de_page").offsetHeight;
    var f = document.getElementById("header").offsetHeight;
    var g = document.getElementById("barre_navigation").offsetHeight;
    var h = document.getElementById("page").offsetHeight;
    var c = document.body.offsetHeight;
    //alert(f + ' ' + g + ' ' + h + ' ' + c);
    var calcul = f + g + h;
    //alert(calcul);
    var calcul2 = c - e;
    //alert(c + ' ' + calcul2 + ' ' + calcul);
    if(calcul < calcul2)
    {
        if(navigator.appName == "Microsoft Internet Explorer")
        {
            //alert("true");
            var calcul3 = calcul2 - calcul;// - 32;
            //alert(calcul3);
            document.getElementById("pied_de_page").style.top = calcul3 + "px";
        }
        else
        {
            //alert("true");
            var calcul3 = calcul2 - calcul - 32;
            //alert(calcul3);
            document.getElementById("pied_de_page").style.top = calcul3 + "px";
        }
    }
    else
    {
        document.getElementById("pied_de_page").style.bottom = "-11px";
    }
}
</script>

et utilisez dans le body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="javascript:place_pied_de_page();" onresize="javascript:place_pied_de_page();"">

merci

**Candygirl** · 03/06/2008, 18h00

Envoyé par doudouallemand

en tout cas, du coup, je me suis lancé dans un essai avec javascript.

En css ça pourrait donner une base du genre:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>footer bas de page</title>
<style type="text/css">
        html, body {
                        margin: 0;
                        padding: 0;
                        height: 100%;
                        background-color: #ccc;
                        color: #000;
        }
        
        #header {
                background-color:red;
        }
         
        div#page {
                        width: 815px;
                        min-height: 100%;
                        background-color:#FFF;
                        position:relative;
                        margin:0 auto;
        }
        
        div#pied_de_page
        {
                        position:absolute;
                        bottom:0;left:0;
                        width:100%;
                        background-color:#000;
                        color:#FFF;
                        text-align:center;
                        height:1.25em;
        }
        
        #content {
                padding-bottom:2em;
        }
</style>
</head>
 
<body>
	<div id="page" class="page">
		<div id="header">header</div>
		<div id="content">
			<p>bonjour</p>
			<p>bonjour</p>
			<p>bonjour</p>
		</div>
		<div id="pied_de_page" class="pied_de_page">
			footer
		</div>
	</div>
</body>
</html>

**Candygirl** · 03/06/2008, 17h42

Envoyé par Er3van

Parceque si on fixe la taille d'un carton à la taille du camion qui le contient, mais qu'on fixe la taille minimale de ce même carton à la taille du même camion qui le contient, on dit deux fois la même chose...

Pas tout à fait; le camion a une dimension fixe de 100%, par contre avec un min-height on autorise le carton à faire plus que 100% c'est là tout l'intérêt (ça revient en quelque sorte à laisser les portes du camion ouvertes

). Au passage on s'abstient justement de donner un height de 100% au carton.

Quand le contenu dépasse la hauteur de la fenêtre on veux que #page continue de s'agrandir, pas qu'il s'arrete au 100% de la hauteur de la fenêtre ou le footer sera mal positionné.

Envoyé par Er3van

De plus, min-height ne fonctionnera pas pour IE 6, nah !

Envoyé par Candygirl

Après il y a pleins de petits détails à règler pour ce type de montage.

Ajouter un height à l'attention d'IE6 en est un