Footer dynamique avec master page

**khallou2007** · 08/07/2009, 16h38

bonjour,
je me trouve bloqué, je développe un site web avec asp.net et j'utilise master page qui contient un menu à gauche et au centre mes page, le header et le footer.
le probleme et que le pied de page doit se mettre dynamiquement à la fin du menu à gauche et un curseur apparaitra dan la page s'il est long % au menu.
mais ce que j'obtient est le contraire: le pied de page vient juste après la page, et le menu à gauche la depasse
voila le fichier .css:

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
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
body {
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	text-align: left;
	font-family: verdana;
	font-size: 11px;
    font-weight: normal;
	color: #003063;  
 
}
 
/* Zone EN-TETE*/
.header
{
	background-image: url(Images/header.gif);
	background-repeat: no-repeat;
    position: relative;
    width: 760px;
    height: 85px;
    margin-left: auto;
    margin-right: auto;
    font-weight: normal;
 
}
.rotator{
	position: absolute;
	right: 30px;
	top: 17px;
}
.nav
{
	position: absolute;
    top: 65px;
    right: 15px;
    color: #ffffff;
    font-size: 10px;
}
.menua
{
    position: absolute;
    right:15px;
    top: 0px;
    color:#ffffff;
    font-size: 10px;
}
 
/* Zone PIED DE PAGE */
.footer
{
    background-image: url(images/footer.gif);
    margin-left: auto;
    margin-right: auto;
    margin-top:0.4em;
    width: 760px;
    text-align: center;
    font-size: 9px;
 
 
 
}
 
/* Zone CENTRE DE PAGE */
.page
{
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background-image: url(images/body-repeat.gif);
    background-repeat: repeat-y;
    position: relative;
    width: 712px;
    padding: 0px 24px;
}

et le master page:

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
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
<%@ Master Language="C#" AutoEventWireup="true" 
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
     <!-- Zone : En tête -->
     <div class="header">
         <!-- Zone : menu en haut de la page -->
        <div class="menua">Plan du site | Contactez-nous | Ajoutez aux favoris</div>
         <!-- Zone : panneau publicitaire -->
         <!-- Zone : barre de navigation affichant le chemin de la page en cours -->
        <div class="nav">
            <asp:SiteMapPath ID="SiteMapPath1" runat="server">
                <PathSeparatorTemplate>
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/App_Themes/Default/Images/bullet-2.gif" />
                </PathSeparatorTemplate>
            </asp:SiteMapPath>
        </div>
 
     </div>
 
     <!-- Zone : Centre -->
    <div class="page">
        <!-- Zone : Zone de navigation à gauche de la page  -->
        <div id="sidebar">                  
		    <!—Zone : identification --><h1>Identifié</h1>
            <asp:LoginView ID="LoginView1" runat="server">
                <LoggedInTemplate>
                    <h2>Bonjour&nbsp;<asp:LoginName ID="LoginName1" runat="server" />
                    &nbsp;!</h2>
                </LoggedInTemplate>
                <AnonymousTemplate>
                    <h2>Bienvenue ! Pour continuer vous devez vous identifier.</h2>
                </AnonymousTemplate>
                <RoleGroups>
                    <asp:RoleGroup Roles="Administrateurs">
                        <ContentTemplate>
                            Bonjour&nbsp;<asp:LoginName ID="LoginName2" runat="server" />
                            ! Il y a actuellement&nbsp;<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>&nbsp;utilisateurs
                            connectés sur le site.
                        </ContentTemplate>
                    </asp:RoleGroup>
                </RoleGroups>
            </asp:LoginView>
            <div id="liensEspaceMembre">:
            <ul class="link">
                <li>
                    <asp:LoginStatus ID="LoginStatus1" runat="server" />
                </li>
                <li>
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="encours.aspx" Text="en cours"></asp:HyperLink></li>
 
             </ul>
            </div>
        <hr />
		<!--Zone : Services des annonces proposés par le site  --> 
		    <h1>Espace membre</h1>
            <h2>en cours de construction</h2>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />               
            <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
                ImageSet="Arrows">
                <ParentNodeStyle Font-Bold="False" />
                <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
                <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" 
                    HorizontalPadding="0px" VerticalPadding="0px" />
                <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" 
                    HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
            </asp:TreeView>
        </div>
        <!-- Zone : Zone contenant le contenu des pages enfants dans un contrôle
             <asp :contentplaceholder> -->
        <div id="content">
            <asp:ContentPlaceHolder ID="Main" runat="server">
            </asp:ContentPlaceHolder>
        </div>
     </div>
 
     <!-- Zone : Pied de page -->
     <div class="footer">
        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"></asp:Menu>
        <asp:Literal ID="ltlPiedDePage" runat="server" Text="Steg | Adresse | Tél : 0 800 888 888 | Fax : 0 111 111 999"></asp:Literal>
     </div>
    </form>
</body>
</html>

j'ai essayé d'ajouter dans le footer:
display: block;
position:absolute;
bottom:0;

mais mon site est centré au milieu du navigateur !
y'a-t'il une solution ?
merci

**khallou2007** · 08/07/2009, 20h31

voila la structure de mon site

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
___________________
|       HEADER         |
|     ------------    |
|     M | Content     |
|     E |                 |
|     N |                 |
|     U |                 |
|    ----------        |
|     FOOTER           |
----------------------

**Macmillenium** · 09/07/2009, 14h24

Bonjour,

Envoyé par khallou2007

le probleme et que le pied de page doit se mettre dynamiquement à la fin du menu à gauche et un curseur apparaitra dan la page s'il est long % au menu.
mais ce que j'obtient est le contraire: le pied de page vient juste après la page, et le menu à gauche la depasse

Ce n'est pas un problème mais un comportement logique.
Ton menu (comme les autres éléments de ta page) est positionné en absolue, ce type de positionnement retire complètement l'élément du flux normal, celui-ci, n'a plus d'impact sur le reste des éléments, c'est comme si le menu n'existe pas pour le footer

Tu as deux solutions, soit abandonner le positionnement absolue et utiliser la propriété float, soit :

j'ai essayé d'ajouter dans le footer:
display: block;
position:absolute;
bottom:0;

Mais ça ne marche pas car tu as oublié de tout englober dans la div .page.