Cannon Cannon - 4 months ago 15
CSS Question

ASP CSS Footer issue

Here is how my master page is designed:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<form id="form1" runat="server">
<div id="header">
<h1 class="Title">Title</h1>
<span class="TagLine">tagline</span> </div>
<div id="navigation">
<table>
<tr>
<td><asp:Menu ID="m" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</Items>
</asp:Menu></td>
</tr>
</table>
</div>
<div id="body">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
<p>footer</p>
</div>
</form>
</div>
</body>
</html>


This is my css:

body {
margin: 20px 20px 20px 20px;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: darkslategrey;
width: 960px;
background-color: #F8F8FF;
margin: 0;
height: 100%;
position: relative;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
}
#header {
height: 120px;
overflow: hidden;
}
#Content {
margin: 5px;
background-color: #F8F8FF;
overflow: hidden;
}
#Footer {
position: absolute;
background: #F8F8FF;
text-align: center;
}
#header .Title {
color: #2E2E2E;
}
#header h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
}
h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 100%;
}
#header .TagLine {
color: #2E2E2E;
}
.Menu li {
display: inline;
margin: 0px;
}
.Menu a {
text-decoration: none;
background-color: #BDBDBD;
padding: 5px;
color: White;
border-right: .5px solid White;
margin: 0px;
}
.Menu a:hover {
background-color: #BDBDBD;
padding: 5px;
margin: 0px;
}
.Menu {
text-align: justify;
font-size: 25px;
}
.menuhover {
color: #fff;
}


Here are issues I am not able to figure:


  • I am trying to stick footer at bottom, but such a
    way that if page has lot of content that should still work.

  • Center align whole page and master page


Answer

Updated : Try this

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Title</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="container">
        <form id="form1" runat="server">
            <div id="header">
                <h1 class="Title">Title</h1>
                <span class="TagLine">tagline</span>
            </div>
            <div id="navigation">
                <table cellpadding="0" cellspacing="0" width="1000" align="center">
                    <tr>
                        <td>
                            <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="Menu" Font-Names="Verdana" ForeColor="Black" Width="800px">
                                <staticmenuitemstyle height="40px" />
                                <dynamicmenuitemstyle cssclass="Menu" height="40px" horizontalpadding="25px" />
                                <dynamichoverstyle cssclass="menuhover" />
                                <statichoverstyle cssclass="menuhover" />
                                <items>
                                    <asp:menuitem text="Home" navigateurl="~/Default.aspx"></asp:menuitem>
                                </items>
                            </asp:Menu>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="body">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                    <!-- Page-specific content will go here... -->
                </asp:ContentPlaceHolder>
            </div>
            <div id="Footer">
                <p>footer</p>
            </div>
        </form>
    </div>
</body>
</html>

CSS:

<style type="text/css">

    body {
        margin: 20px 20px 20px 20px;
        padding: 0;
        font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        color: darkslategrey;
        width: 960px;
        background-color: #F8F8FF;
        margin: auto;
        padding:auto;
        height: 100%;
        position: relative;
    }
    #container {
        min-height: 100%;
        position: relative;
        height: 100%;
    }
    #body {
        padding: 10px;
    }
    #header {
        margin: 10px 10px 0px 10px;
        height: 120px;
        overflow: hidden;
    }
    #Content {
        padding-top: 1em;
        margin: 5px;
        background-color: #F8F8FF;
        overflow: hidden;
    }
    #Footer {
        position: fixed;
        background: #F8F8FF;
        text-align: center;
        bottom:0px;

    }
    #header .Title {
        color: #2E2E2E;
    }
    #header h1 {
        margin:0px;
        padding:0px;
        background-color: #F8F8FF;
        overflow: hidden;
        font-size: 170%;
    }
    h1 {
        padding:0px;
        margin:0px;
        background-color: #F8F8FF;
        overflow: hidden;
        font-size: 100%;
    }
    #header .TagLine {
        color: #2E2E2E;
    }
    .Menu li {
        display: inline;
        margin: 0px;
    }
    .Menu a {
        text-decoration: none;
        background-color: #BDBDBD;
        padding: 5px;
        color: White;
        border-right: .5px solid White;
        margin: 0px;
    }
    .Menu a:hover {
        background-color: #BDBDBD;
        padding: 5px;
        margin: 0px;
    }
    .Menu {
        text-align: justify;
        font-size: 25px;
    }
    .menuhover {
        color: #fff;
    }

</style>