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

Version imprimable

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:

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:

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

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

Code:

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:

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>

03/06/2008, 14h39
doudoustephane

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

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

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 ?

Citation:
Envoyé par Er3van
Si ton div en question en en positionnement relatif, tu peux utiliser la technique suivante qui devrait fonctionner.
Code:

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

03/06/2008, 16h23
Candygirl
Citation:
Envoyé par Er3van

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

Code:

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.
03/06/2008, 16h35
Er3van

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 ! :P

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:

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:

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

merci

03/06/2008, 17h42
Candygirl

Citation:

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 :aie:). 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é.

Citation:

Envoyé par Er3van

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

Citation:

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 ;)

Citation:

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:

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>

03/06/2008, 22h55
doudoustephane

Candygirl, je te remercie de ton aide, mais j'ai essayé ce que tu as donné et cela ne fonctionne pas non plus... :cry:
je sais plus quoi faire là...
03/06/2008, 23h50
Candygirl
Soit tu regardes sur IE6, auquel cas tu dois attribuer un height de 100% à #page, par le biais de commentaires conditionnels ou un hack selon tes habitudes. Genre:
Code:

1 2 3 * html #page { height:100%; }
Soit je n'ai pas compris ce que tu souhaites faire ;)
04/06/2008, 00h44
doudoustephane
Citation:
Envoyé par Candygirl

Soit tu regardes sur IE6, auquel cas tu dois attribuer un height de 100% à #page, par le biais de commentaires conditionnels ou un hack selon tes habitudes. Genre:

Code:

1 2 3 * html #page { height:100%; }

Soit je n'ai pas compris ce que tu souhaites faire ;)
j'ai découpé ma page en tableau de 3x3.
dans la cellule 3ième ligne, 2ième colonne, qui est ma cellule de page principale, et qui va jusqu'en bas du navigateur de l'utilisateur au moins, je dois y insérer un pied de page (qui ne sort pas de cette cellule) qui est toujours au plus bas (du texte ssi celui-ci est plus grand que l'écran, de l'écran sinon...
merci

bon, ben j'en suis toujours au meme point...
je vous mets tout mon body, dès fois que ca vous aiderez...:

Code:

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
<body>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;height:100%;text-align:justify; ">
    <tr>
        <td colspan="3" align="center" class="cote_banniere" id="header">
            <?php include(DIR_INCLUDES . 'header.php'); ?>
        </td>
    </tr>
    <tr>
        <td colspan="3" style="width:100%; background-color:#000000;" id="barre_navigation">
            <?php include(DIR_INCLUDES . 'navigation.php'); ?>
        </td>
    </tr>
    <tr>
        <td class="col1" valign="top">
            <?php include(DIR_INCLUDES . 'column_left.php'); ?>
        </td>
        <td class="col2" valign="top" id="centre">
            <div id="page">    <!-- Mon problème est ici -->
                <div id="content">
                    <?php echo TEXTE_INDEX; ?>
                </div>
                <div id="pied_de_page">
                    <?php include(DIR_INCLUDES . 'footer.php'); ?>
                </div>
            </div>
        </td>
        <td class="col3" valign="top">
            <?php include(DIR_INCLUDES . 'column_right.php'); ?>
        </td>
    </tr>
</table>
</body>

et le css des div qui va avec:

Code:

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
 
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #FFFFFF;
    color: #000000;
}
 
div#page 
{
    width: 815px;
    min-height:100%;
    background-color:#FFFFFF;
    position:relative;
    margin:0 auto;
}
 
div#pied_de_page
{
    position:relative;
    bottom:0;
    padding:10px;
    width:100%;
    background-color:#000000;
}
 
#content
{
    padding-bottom:48px;
    padding:10px;
}

Pour info, toutes les variables php sont bien, surtout que, même si je mets un texte simple, cela ne change rien.
Merci encore d'avance

04/06/2008, 10h09
Candygirl

Ah ben non, évidement, si tu mets dans un tableau ça ne va pas le faire ;)

Pourquoi passes-tu par un tableau?
04/06/2008, 10h26
doudoustephane

Citation:

Envoyé par Candygirl

Ah ben non, évidement, si tu mets dans un tableau ça ne va pas le faire ;)

Pourquoi passes-tu par un tableau?

ben, parce que je trouve que c'est plus pratique pour la mise en page, meme si je sais que c'est plus l'époque de ça...
mais vu comment les div sont galères à mettre en oeuvre...
maintenant, tu crois que si je fais tout en div, ca peut résoudre le problème ?
04/06/2008, 10h34
Er3van

Ce n'est pas une question d'époque.

Les tableaux ne sont pas fait pour structurer une page, c'est tout.
C'est un conteneur particulier, qui n'est pas géré de la même façon qu'un div, et nuit à l'accessibilité.

Les div ne sont pas si complexes que ça à mettre en place ;)
04/06/2008, 10h48
doudoustephane

Citation:

Envoyé par Er3van

Ce n'est pas une question d'époque.

Les tableaux ne sont pas fait pour structurer une page, c'est tout.
C'est un conteneur particulier, qui n'est pas géré de la même façon qu'un div, et nuit à l'accessibilité.

Les div ne sont pas si complexes que ça à mettre en place ;)

bon, ben je fais un essai en div et je vous redis ça...
04/06/2008, 14h04
doudoustephane

je ne parviens pas à refaire mes 3 colonnes en div...
j'ai essayé en jouant sur les left et les float du css mais ca veut pas...
comment faites-vous svp ?

bon, voici où j'en suis et ce que j'ai pour le moment comme code :
xhtml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<div id="page3">
    <div id="premier-element">
            <?php include(DIR_INCLUDES . 'header.php'); ?>
    </div>
    <div id="style_navigation">
            <?php include(DIR_INCLUDES . 'navigation.php'); ?>
    </div>
    <div>
        <div id="colonne1">
            <?php include(DIR_INCLUDES . 'column_left.php'); ?>
        </div>
        <div class="colonne2">
            <?php echo TEXTE_INDEX; ?>
        </div>
        <div class="colonne3">
            <?php include(DIR_INCLUDES . 'column_right.php'); ?>
        </div>
    </div>
            <div id="piedpage3">
                <?php include(DIR_INCLUDES . 'footer.php'); ?>
            </div>
</div>
</body>

et le css :

Code:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
html, body {
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
    background-color: #FFFFFF;
    color: #000000;
}
 
div#page3 
{
    position: relative;
    width: 100%;
    height:100%;
    margin: 0 auto;
    min-height: 100%;
}
 
div#page3 #premier-element 
{
    margin-top: 0; 
    background-image:url(../images/slice_banner.jpg);
    background-color:#000000;
    width:100%;
    background-repeat:repeat-x;
    border:0;
    padding:0;
}
 
#style_navigation
{
    width:100%;
    background-color:#000000;
}
 
#colonne1
{
    /*position:absolute;*/
    /*left:0;*/
    width:25%;
    height:100%;
    z-index:1;
    float:left;
}
 
#colonne2
{
    /*position:absolute;*/
    /*clear:both;*/
    float:left;
    /*left:25%;*/
    width:815px;
    height:100%;
    background-color:#FFFFFF;
    padding:10px;
    margin:10px;
}
 
#colonne3
{
    /*clear:both;*/
    float:left;
    /*position:absolute;*/
    height:100%;
    width:25%;
    /*right:0;*/
    z-index:1;
}
 
div#piedpage3 
{
    width: 100%;
    min-height:100%;
    background-color:#FFFFFF;
    position:relative;
    margin:0 auto;
    height:100%;
    z-index:0;
    padding-bottom: 50px;
    overflow:auto;
}

Mes problèmes que je n'arrive pas à résoudre sont multiples :
- mes 3 colonnes ne s'affichent pas correctement (celle de droite notamment),
- la hauteur de la page, bien que n'ayant aucun contenu, fait deux fois la taille du navigateur et génère donc l'affichage du scrollbarre.
Voilà, ca fait quelques heures que je coinces dessus et j'ai essayé diverses solutions exemples trouvés sur le net sans résultat ... :(:(:(

04/06/2008, 19h09
Candygirl

Citation:

Envoyé par doudouallemand

- mes 3 colonnes ne s'affichent pas correctement (celle de droite notamment)

Tu donnes comme tailles de colonne 25%, 25% et 815px. En 1280, 25% => 320px
2*320px + 815 = 1435px. Donc il n'y a pas la place de mettre les 3 colonnes les unes à côté des autres...

Citation:

Envoyé par doudouallemand

- la hauteur de la page, bien que n'ayant aucun contenu, fait deux fois la taille du navigateur et génère donc l'affichage du scrollbarre.

Tu donnes une hauteur de 100% à ton pied de page pour quelle raison ?

Forcément que si tes colonnes se mettent les unes en-dessous des autres et que chaqun de tes enfants de #page (auquel tu as attribué un height de 100% inaproprié pour ce type montage puisqu'on joue avec le min-height) a une hauteur de 100%, on va dépasser aisément les 100%...

Avant de jouer avec le pied de page et les hauteurs en % il faut déjà que tu aies une structure correcte pour tes 3 colonnes.
05/06/2008, 00h47
doudoustephane

Citation:

Envoyé par Candygirl

Tu donnes comme tailles de colonne 25%, 25% et 815px. En 1280, 25% => 320px
2*320px + 815 = 1435px. Donc il n'y a pas la place de mettre les 3 colonnes les unes à côté des autres...

Tu donnes une hauteur de 100% à ton pied de page pour quelle raison ?

Forcément que si tes colonnes se mettent les unes en-dessous des autres et que chaqun de tes enfants de #page (auquel tu as attribué un height de 100% inaproprié pour ce type montage puisqu'on joue avec le min-height) a une hauteur de 100%, on va dépasser aisément les 100%...

Avant de jouer avec le pied de page et les hauteurs en % il faut déjà que tu aies une structure correcte pour tes 3 colonnes.

cela ne change rien... désolé

Bonsoir,

Citation:

Envoyé par Er3van

C'est un conteneur particulier, qui n'est pas géré de la même façon qu'un div, et nuit à l'accessibilité.

Que dans certaines situations Er3van. C-à-d quand le tableau est mal linéarisé
ou qu'ils sont imbriqués de tel manière à ce que cela nuit à l'accessibilité.
Voir la page 98 de RGAA (ancienne version le site de la dgme étant indisponible).
Des explications sur le site d'Accessiweb.

@Doudouallemand: Si tu ne veux pas être trop souvent confronté à ce genre de problèmes, il va falloir que tu penses un peu à te former ;)

Le heigh:100% de html et body correspond à la hauteur de la zone d'affichage. Or la totalité des hauteur des div est bien supérieure (100% pour les colonnes, cela correspond à la hauteur de la zone d'affichage pusique que ces 100% ont pour hauteur référente les 100% du body, à cela tu ajoutes encore 100%, donc forcément ça dépasse.)
Tu dois sous diviser les 100%: exemple 60% pour tes colonnes + 20% pour le
piedpage3 et 10% pour les 2 premiers blocs à laquelle il faudra ajouter les padding et border verticaux s'il y a, sachant que la totalité ne soit pas dépasser 100%.

Tu dois clearer (dégager) le pied de page car les 3 colonnes sont flottantes:
Lire les commentaires
Code:

1 2 3 4 5 6 7 8 9 10 11 12 div#piedpage3 { /* < inutile width: 100%; min-height:100%; background-color:#FFFFFF; height:100%; inutile > */ position:relative; /*que si tu as des enfants positionnés de manière absolue*/ margin:0 auto; /*inutile si la largeur est à 100% ou à auto (par defaut)*/ padding-bottom: 50px; overflow:auto; /*que si tu as des enfants flottants pour qu'il englobe ses enfants*/ clear:left; }

Citation:

Envoyé par Erwan31

Bonsoir,

Que dans certaines situations Er3van. C-à-d quand le tableau est mal linéarisé
ou qu'ils sont imbriqués de tel manière à ce que cela nuit à l'accessibilité.
Voir la page 98 de RGAA (ancienne version le site de la dgme étant indisponible).
Des explications sur le site d'Accessiweb.

Merci de cette info bien utile.

Citation:

Envoyé par Erwan31

@Doudouallemand: Si tu ne veux pas être trop souvent confronté à ce genre de problèmes, il va falloir que tu penses un peu à te former ;)

c'est justement ce que je suis en train de faire avec cette mise en forme, d'où toutes mes questions !
Citation:
Envoyé par Erwan31
Le heigh:100% de html et body correspond à la hauteur de la zone d'affichage. Or la totalité des hauteur des div est bien supérieure (100% pour les colonnes, cela correspond à la hauteur de la zone d'affichage pusique que ces 100% ont pour hauteur référente les 100% du body, à cela tu ajoutes encore 100%, donc forcément ça dépasse.)
Tu dois sous diviser les 100%: exemple 60% pour tes colonnes + 20% pour le
piedpage3 et 10% pour les 2 premiers blocs à laquelle il faudra ajouter les padding et border verticaux s'il y a, sachant que la totalité ne soit pas dépasser 100%.

Tu dois clearer (dégager) le pied de page car les 3 colonnes sont flottantes:
Lire les commentaires
Code:

1 2 3 4 5 6 7 8 9 10 11 12 div#piedpage3 { /* < inutile width: 100%; min-height:100%; background-color:#FFFFFF; height:100%; inutile > */ position:relative; /*que si tu as des enfants positionnés de manière absolue*/ margin:0 auto; /*inutile si la largeur est à 100% ou à auto (par defaut)*/ padding-bottom: 50px; overflow:auto; /*que si tu as des enfants flottants pour qu'il englobe ses enfants*/ clear:left; }
Pour ces commentaires, je le sais, j'ai essayé toutes les configurations possibles...

05/06/2008, 11h47
Erwan31

Bonjour,
pour qu'on t'aider plus efficacement il faudrait donner la totalité du code XHTML sans PHP) et du code CSS.
Maintenant tu ne précises pas ce qui bloque.
05/06/2008, 12h44
doudoustephane

Citation:

Envoyé par Erwan31

Bonjour,
pour qu'on t'aider plus efficacement il faudrait donner la totalité du code XHTML sans PHP) et du code CSS.
Maintenant tu ne précises pas ce qui bloque.

je vais vous le fournir après manger alors
pour ce qui bloque, c'est toujours le pied de page interne à la div centrale, et également la mise en colonne des 3 div en questions.
j'annoterai les endroits dans le code où je parviens pas à résoudre.
merci

Voici donc comme demandé tout mon code xhtml :

Code:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!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>Accueil</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1"/>
<meta name="title" content="contenu"/>
<meta name="description" content="."/>
<meta name="keywords" content="."/>
<meta name="owner" content="."/>
<meta name="Publisher" content="."/>
<meta name="author" lang="fr" content=""/>
<meta name="Reply-to" content=""/>
<meta name="Indentifier-URL" content="http://www.monsite.fr/"/>
<meta name="Date" content="June 2008"/> 
<meta name="robots" content="index,follow"/>
<meta name="revisit_after" content="1"/>
<meta name="robots" content="ALL"/> 
<link rel="stylesheet" type="text/css" href="includes/style.css"/>
</head>

<body>
<div id="page3">
	<div id="premier-element">
			<!-- Haut de page : header.php -->
<!-- Affichage des éléments Flash dans swfobject pour être compatible avec ie et tous les navigateurs -->
<script type="text/javascript" src="includes/script/swfobject.js"></script>
<div id="flashcontent">
	<strong>
Vous visualisez ce message car vous ne disposez pas de Flash.<br/>
Merci de le télécharger en <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">cliquant ici</a>.
</strong>
</div>
<script type="text/javascript">
	var so = new SWFObject("images/banner.swf?cat=1", "banner", "815", "137", "8", "");
	so.addParam("wmode", "transparent");
	so.addParam("quality", "high");
	so.addParam("menu", "false");
	so.addParam("loop", "true");
	so.addParam("play", "true");
	so.addParam("valign", "top");
	so.write("flashcontent");
</script>
<!-- Fin : Haut de page : header.php -->
	</div>
	<div id="style_navigation">
			<!-- Barre de navigation : navigation.php -->
<br/>
&nbsp;
<div class="col1_navigation"><!-- mettre sur trois colonnes les div suivants -->
	&nbsp;coucou
</div>
<div class="col2_navigation">
	<div class="col2_navigation_gauche">
		<a href="index.php" class="navigation_violet">lien 1</a> 
		&nbsp;&nbsp; 
		<a href="lien2.php" class="navigation_bleu">lien 2</a> 
		&nbsp;&nbsp; 
		<a href="lien3.php" class="navigation_blanc">lien3</a>&nbsp;|&nbsp;<a href="lien4.php" class="navigation_blanc">lien4</a>&nbsp;|&nbsp;<a href="lien5.php" class="navigation_blanc">lien5</a>	</div>
	<div class="col2_navigation_droite">
				<a href="lien6.php" class="navigation_jaune">lien6</a> 
	</div>
</div>
<div class="col3_navigation">
	&nbsp;
</div><!-- Fin des trois colonnes de navigation -->
<br/>
&nbsp;
<!-- Fin : Barre de navigation : navigation.php -->
	</div>
	<div><!-- Début des div à mettre en 3 colonnes principales -->
		<div id="colonne1">
			<!-- Colonne de gauche : column_left.php -->
<div class="fond_colonne_gauche">
	&nbsp;
</div>
<!-- Fin : Colonne de gauche : column_left.php -->		</div>
		<div class="colonne2">
			<span style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px;border:5px;">Site bientôt en ligne!</span>		</div>
		<div class="colonne3">
			<!-- Colonne de droite : column_right.php -->
<div class="fond_colonne_droite">
	&nbsp;
</div>
<!-- Fin : Colonne de droite : column_right.php -->		</div>
	</div>
			<div id="piedpage3"><!-- pied de page de la colonne 2 -->
				<!-- Bas de page : footer.php -->
<div class="texte_footer">
	<br/>
	<a href="foot1.php" class="lien_footer">foot1</a>&nbsp;|&nbsp;<a href="foot2.php" class="lien_footer">foot2</a>&nbsp;|&nbsp;<a href="foot3.php" class="lien_footer">foot3</a>&nbsp;|&nbsp;<a href="foot4.php" class="lien_footer">foot4</a>&nbsp;|&nbsp;<a href="foot5" class="lien_footer">foot5</a><br/><a href="foot6.php" class="lien_footer">foot6</a>&nbsp;|&nbsp;<a href="foot7.php" class="lien_footer">foot7</a>&nbsp;|&nbsp;<a href="foot8.php" class="lien_footer">foot8</a>	<br/>
	&nbsp;
</div>
<!-- Fin : Bas de page : footer.php -->
			</div><!-- Fin des 3 colonnes -->
</div>
</body>
</html>

et mon code css :

Code:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
 
html, body {
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
	background-color: #FFFFFF;
	color: #000000;
}
 
div#page3 
{
	position: relative;
	width: 100%;
	height:100%;
	margin: 0 auto;
	min-height: 100%;
}
 
div#page3 #premier-element 
{
	margin-top: 0; 
	background-image:url(../images/slice_banner.jpg);
	background-color:#000000;
	width:100%;
	background-repeat:repeat-x;
	border:0;
	padding:0;
}
 
#colonne1
{
	/*position:absolute;*/
	/*left:0;*/
	width:5%;
	height:100%;
	z-index:1;
	float:left;
	text-align:center;
}
 
#colonne2
{
	/*position:absolute;*/
	/*clear:both;*/
	float:left;
	/*left:25%;*/
	width:815px;
	height:100%;
	background-color:#FFFFFF;
	padding:10px;
	margin:10px;
	text-align:center;
}
 
#colonne3
{
	/*clear:both;*/
	float:right;
	/*position:absolute;*/
	height:100%;
	width:5%;
	/*right:0;*/
	z-index:1;
	text-align:center;
}
 
div#piedpage3 
{
	width: 100%;
	min-height:100%;
	background-color:#FFFFFF;
	position:relative;
	margin:0 auto;
	height:100%;
	z-index:0;
	padding-bottom: 50px;
	overflow:auto;
}
 
#flashcontent
{
	float:inherit;
	text-align:center;
}
 
a.lien_footer
{
	color:#838281;
	font-family:Verdana;
	font-weight:bold;
	font-size:11px;
	text-decoration:none;
}
 
a:hover.lien_footer	
{
	color:#FFFFFF;
	font-family:Verdana;
	font-weight:bold;
	font-size:11px;
	text-decoration:none;
}
 
a.navigation_blanc
{
	color:#FFFFFF;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a:hover.navigation_blanc	
{
	color:#FDBDEA;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a.navigation_violet
{
	color:#B02D89;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a:hover.navigation_violet	
{
	color:#FD3BC3;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a.navigation_jaune
{
	color:#FEF400;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
	text-align:right;
	position:relative;
	float:right;
}
 
a:hover.navigation_jaune	
{
	color:#FFFA83;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
	text-align:right;
	position:relative;
	float:right;
}
 
a.navigation_bleu
{
	color:#33BBF5;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
a:hover.navigation_bleu	
{
	color:#AFE6FE;
	text-decoration:none;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
}
 
.fond_colonne_gauche 
{
	width:100%;
	height:100%;
	background:url(../images/background_gauche.jpg);
	background-position:right top;
	background-repeat:repeat;
	z-index:1;
}
 
.fond_colonne_droite 
{
	width:100%;
	height:100%;
	background:url(../images/background_droite.jpg);
	background-position:left top;
	background-repeat:repeat;
	z-index:1;
}
 
.cote_banniere
{
	background-image:url(../images/slice_banner.jpg);
	background-color:#000000;
	width:100%;
	background-repeat:repeat-x;
	border:0;
	border-bottom:0;
	border-left:0;
	border-right:0;
	border-top:0;
}
 
.pos_relative_left
{
	position:relative;
	float:left;
}
 
#style_navigation
{
	width:100%;
	background-color:#000000;
}
 
.col1_navigation
{
	width:10%;
	height:100%;
	float:left;
	left:0;
}
 
.col2_navigation
{
	width:815px;
	background-color:#000000;
	color:#FFFFFF;
	font-family:'Arial Black', sans-serif;
	font-size:18px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
}
 
.col2_navigation_gauche
{
	float:left;
	width:70%;
	vertical-align:inherit;
	background:inherit;
}
 
.col2_navigation_droite
{
	float:right;
	width:20%;
	vertical-align:inherit;
	background:inherit;
}
 
.col3_navigation
{
	width:10%;
	height:100%;
	float:right;
	right:0;
}

Voilà donc tout ce que j'ai refait en div au lieu de tableau.
Si vous pouvez trouver ce qui ne va pas car moi, j'ai cherché dans tous les sens et tout ce que j'ai trouvé sur le net sans résultat.
Pour rappel, ce que je souhaite est indiqué dans le code et, est de mettre la navigation au centre et sur la meme ligne pour le texte, de mettre en trois colonnes les div des colonnes 1,2 et 3 et enfin, de mettre le pied de page en pied de page de la div de colonne 2 et pas de tout le site.
Merci d'avance de votre aide.
doudouallemand

09/06/2008, 15h51
doudoustephane

Bonjour à tous.
Je vous recontact car suite à mon précédent poste, j'ai continuer à faire des essais différents pour parvenir à une solution, sans résultat meilleur que celui-là.
si quelqu'un aurait donc une idée pour m'aider, se serait vraiment sympa.
Merci d'avance
cordialement
doudouallemand
09/06/2008, 16h40
Erwan31

Bonjour,
bon ça va pas, d'une part tu n'a pas nettoyé ta CSS avec des déclarations inutiles que j'ai déjà évoquées et d'autre part tu as des div dont on se demande à quoi ils servent: col3_navigation, col1_navigation par exemple.

Tu as des class sur 2 des colonne alors que tu as un id sur l'autre.
Tes noms de div ne sont pas très appropriée (style_navigation...).
Tu dois identifier (via un id et non une class) des grande division par un nom représentatif (header, content, footer, menu/nav...).
Pour le moment c'est trop fouilli, tu dois simplifier la structure et utilser les div uniquement quand ils sont nécessaire (par la peine d'imbriquer un lien unique dans un div par exemple, autant appliquer le style directement...)

Je sais pas si tu le sais mais les   (non-breaking space > espace insécables) ne devraient être utilisé que pour interdire un retour à la ligne
et les br (break) pour forcer une coupure de ligne dans un paragraphe.
Leur vocation n'est donc pas de créer des espaces.
Pour créer des espaces supplémentaires utiliser les marges latérales,
les marge verticales applicables sur les éléments inline remplacés (img, input...) les éléments de niveau block ou
plus généralement sur les boîtes de bloc (tout élément dont le display est à block)

Tu as attribué des class à tes colonnes 2 et 3 et non les id correspondant.

Pour y voir plus clair, je te conseil d'indenter ton code avec un outil d'indentation automatisé (intégré à certains éditeurs HTML)

font est une propriété hérité, tu n'a pas besoin de le déclarer partout (juste sur le body)

Utilises une liste non-ordonnée (élément UL) pour tes menus et non un simple succession de liens.