ASP.NET

Master page with top, left menu, ContentPlaceHolder and footer RSS

6 replies

Last post Nov 22, 2012 06:35 AM by johnsonlim026

‹ Previous Thread|Next Thread ›

johnsonlim02...

Member

118 Points

287 Posts

Master page with top, left menu, ContentPlaceHolder and footer

Nov 21, 2012 01:10 PM|LINK

Hi,

I would like to create a master page with top, left menu, ContenetPlaceHolder and footer.

I am manage the create the section by div but i am having problem to have footer always at the bottom of the page.

I have try many solution but not working either having the footer shrink up to the page if the page content is not long enough or if the page is long enough, the footer is in the middle of the page.

Below is my CSS code:

body {
    font-family: Verdana;
    font-size: medium;
    margin: 0px;
}



#topContent {
    text-align: right;
    background-color: #600;
    color: White;
    font-size: x-large;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
    height: 50px;
}


#leftContent {
    width: 230px;
    padding: 10px;
    font-size: 90%;
    text-align: left;
    position: absolute;
    top: 60px;
    margin-top: 10px;
    left: 0px;
}

#mainContent {
    text-align: left;
    margin-left: 250px;
    padding: 10px;
}

#footerContent {
    text-align: center;
    padding: 5px;
}

Below is the master page design

<div id="topContent">
           Master Pages Header
        </div>
    
        <div id="mainContent">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        
        <div id="leftContent">
            <h3>Lessons</h3>       
            <ul>
                <li>TODO</li>
            </ul>

            <h3>News</h3>       
            <ul>
                <li>TODO</li>
            </ul>
        </div>
        
        <div id="footerContent">
           Footer
        </div>

I have search whole day for solution but no solution on this. Does anyone has any idea?

HELP PLEASE!!

- Reply
urenjoy

Star

12279 Points

1848 Posts

Re: Master page with top, left menu, ContentPlaceHolder and footer

Nov 21, 2012 01:34 PM|LINK

have a look at following:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

OR

check following example:

http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/

http://techbrij.com
- Edited by urenjoy on Nov 21, 2012 01:35 PM
- Reply
PashBash

Member

371 Points

81 Posts
Re: Master page with top, left menu, ContentPlaceHolder and footer

Nov 21, 2012 01:34 PM|LINK
```
for your footer to appear at the bottom of the page
```
in your css change the #footerContent to the following..
```
#footerContent { 
    position: fixed;
    height: 50px;
    width: 1000px;
    margin: auto;
    bottom: 0px;
}
```
- Marked as answer by johnsonlim026 on Nov 22, 2012 06:23 AM
- Reply
asteranup

All-Star

30184 Points

4906 Posts

Re: Master page with top, left menu, ContentPlaceHolder and footer

Nov 22, 2012 03:06 AM|LINK

Hi,

You can try few posts here-

http://delicious.com/anupdg/layout+header+footer

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
- Marked as answer by johnsonlim026 on Nov 22, 2012 06:23 AM
- Reply
johnsonlim02...

Member

118 Points

287 Posts

Re: Master page with top, left menu, ContentPlaceHolder and footer

Nov 22, 2012 06:34 AM|LINK

Hi Urenjoy,

Thanks for your prompt help.

I have try the both link and would like to share you my test result here:

1).The fist 1 do not working for <form> tag cannot be used in the master page.If it is used the footer will no longer in the bottom of the page.

2).The second 1 is on the bottom of the page only if the page content is not longer than the page size.If the page content is longer than the page size, the footer appear aa at the middle of the page.
- Reply
johnsonlim02...

Member

118 Points

287 Posts

Re: Master page with top, left menu, ContentPlaceHolder and footer

Nov 22, 2012 06:35 AM|LINK

Hi asteranup,

It is working. ^^ Thank you so much!!
- Reply
johnsonlim02...

Member

118 Points

287 Posts

Re: Master page with top, left menu, ContentPlaceHolder and footer

Nov 22, 2012 06:35 AM|LINK

Hi PashBash, it is working.. Thank you so much !!!!