Home » Asp.netRSS

ContentPlaceHolder - not aligning and not scrolling...

Yes, I'm a beginner...!

I am trying, somewhat in vain, to set up a MasterPage with a header section 960px wide and a footer section 960px wide.

The ContentPlaceHolder in the middle needs to be 960px wide and scroll up/down on each Content page that is too long for it.

I am following a text book for VWD2005E which states 'how to' align the ContentPlaceHolder to the Header section, but it doesn't seem to work in VWD2010E.

Thus, My Qs are;

1) how can you get this alignment to work

2) how do you get the ContentPlaceHolder to automatically scroll, as at present the content is just bunching up in a fixed page width and looking terrible!

Thanks for any help in advance...

 

6 Answers Found

 

Answer 1

Use fixed Div with proper Height and width then you place content place holders in that div your will be resolved. 

 

Answer 2

You can do something like this:

Snippet

<%@ Master Language="C#"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    <style>
        body { text-align:center; }
        #header,
        #footer { height:100border:solid 1px #f00width:960pxmargin:0 autotext-align:left; }
        #content { height:400pxwidth:960pxborder:solid 1px #00foverflow:automargin:0 autotext-align:left; }        
    </style>
</head>
<body>
    <form id="Form1" runat="server">
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />                
        </div>
        <div id="footer">
            Copyrights 2010
        </div>
    </form>
</body>
</html>


 

Answer 3

Many thanks for this text - it has helped quite a lot.

Q. At which point in the code does this 'anchor' the footer section to the screen?  I only want the header to remain on the screen, not the footer as well.

e.g. - the main content needs to scroll down to the bottom before you see the footer, however I want to keep the whole header on the screen at all times - a bit like 'freezing' cells in MS-Excel...!

Thanks again.

 

Answer 4

Then you can do something like this:

Snippet

<%@ Master Language="C#"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    <style>
        body { text-align:center; }
        #header,
        #footer { height:100border:solid 1px #f00width:960pxmargin:0 autotext-align:left; }
        #contentWrapper { height:400pxoverflow:autowidth:960pxmargin:0 autotext-align:left; }
        #content { width:960pxborder:solid 1px #00fmargin:0 autotext-align:left; }        
    </style>
</head>
<body>
    <form id="Form1" runat="server">
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="contentWrapper">
            <div id="content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />      
            </div>
            <div id="footer">
                Copyrights 2010
            </div>
                      
        </div>

    </form>
</body>
</html>


 

Answer 5

Thanks again Charith.

The only thing now is that the header doesn't remain fixed to the screen when scrolling down - it scrolls up too.  Is there a way around this?

And, one Q re the code you supplied, you didn't add a closing:

</asp:ContentPlaceHolder>

is this not required?  Obviously not as it works without it, but why do you need it in the <head id> but not the <div id>

Very much appreciated, thanks.

 

Answer 6

Hi,

DunkRose:
The only thing now is that the header doesn't remain fixed to the screen when scrolling down - it scrolls up too
 

For my experience ,you can try to use JavaScript to achieve the goal.

Here is a sample ,hope it can help you.

1.Code in .aspx:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
 //<![CDATA[
        var tips; var theTop = 1;
        var old = theTop;
        function initFloatTips() {
            tips = document.getElementById('header');
            moveTips();
        };
        function moveTips() {
            var tt = 50;
            if (window.innerHeight) {
                pos = window.pageYOffset
            }
            else if (document.documentElement && document.documentElement.scrollTop) {
                pos = document.documentElement.scrollTop
            }
            else if (document.body) {
                pos = document.body.scrollTop;
            }
            pos = pos - tips.offsetTop + theTop;
            pos = tips.offsetTop + pos / 10;
            if (pos < theTop) pos = theTop;
            if (pos != old) {
                tips.style.top = pos + "px";
                tt = 10;
            }
            old = pos;
            setTimeout(moveTips, tt);
        }
 //!]]>
    </script>
    <style type="text/css">
        div#header
        {
            height: 100;
            border: solid 1px #f00;
            width: 960px;
            margin: 0 auto;
            text-align: left;
            position: absolute;
            padding: 3px;
            top: 1px;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
    </style>
</head>
<body onload="initFloatTips()">
    <form id="form1" runat="server">
    <div>
        <div id="header">
            <h1>
                Header</h1>
        </div>
       <%=Content %>
    </div>
    </form>
</body>
</html>


2.Code in .cs:

 public string Content = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 80; i++)
        {
            Content += "Content<br/>";
        }
    }


DunkRose:

And, one Q re the code you supplied, you didn't add a closing:

</asp:ContentPlaceHolder>

is this not required?  Obviously not as it works without it, but why do you need it in the <head id> but not the <div id>

 

The code which post in Charith Gunasekara's reply:

Charith Gunasekara:
<div id="content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />      
            </div>

There is a '/' which used to end the tag.Therefore the code 

</asp:ContentPlaceHolder> 
 

 which as you mentioned is needless.

I would like to suggest you that please check the link below for more information:

http://support.microsoft.com/kb/316946

Hope it can help you.

 
 
 

<< Previous      Next >>


Microsoft   |   Windows   |   Visual Studio   |   Follow us on Twitter