I am in the process of developing a DNN portal. I have implemented a horizontal nav bar that uses the HouseMenu Skin object (and in doing this I took valuable guidance from the video turorial for a horizontal House Menu). My Skin has 5 panes and the left hand pane carries an Adsense Vertical 'sksyscraper' ad (guidance from video tutorial #12 helped me in this!)

My problem is this:

If the length of content in the main (i.e. middle) content pane is longer the height of the left hand pane's vertical google ad unit then the footer text runs 'behind' the text of the main content pane. For an example of this in action see this page in my test environement (you may need to scroll down a bit to see the issue).

I appears to be a positioning issue and my knowledge of CSS positioning is not too sophisticated. I have tried to play with the CSS to correct this issue - but without success. The relevant CSS files are as follows:

• Default.css
• Skin.css
• Portal.css

Anybody had a similar problem in the past and manage to solve it? Any ideas?

Thanks,

Eoghano

Hello,

Looking at the source code, you have placed a clear: both in the CSS for
#footercontent
{
    clear: both;
    padding-top: 10px;
}

But, when looking in your skin.html code, you have:

<div id="footercontent">
    
</div>
<div id="date">
    <p><span id="dnn_dnnCURRENTDATE_lblDate" class="SkinItem">October 31, 2006</span>
</p>
</div>
<div id="footer">

	<p><span id="dnn_dnnCOPYRIGHT_lblCopyright" class="SkinItem">© 1999-2006 www.CLUAS.com & individual writers as indicated per by-line.</span>
&nbsp;&nbsp;<a id="dnn_dnnTERMS_hypTerms" class="SkinItem" href="http://208.106.151.10/indie-music/A...aspx">Terms of Use</a>&nbsp;&nbsp;<a id="dnn_dnnPRIVACY_hypPrivacy" class="SkinItem" href="http://208.106.151.10/indie-music/A...aspx">Privacy Statement</a></p>
</div>
</div> 

Notice: - You have a closing div tag after the "footercontent" tag - Do you need to move this closing div tag to surround all of the footer content?

Lee,

Thanks for this. I tried moving the DIV tag as you suggested but it did not work. I think the problem is somehow rooted in the fact that this is a 5 pane skin.

I tried various other variations on DIV tags and where each pane appears in the order of the DIVs but to no avail. I also added in a <div style="clear:both"> after the left and main cotent panes in the Skin's index.html page. Currently the code in the skin's index.html page resmebles the following:
 
<div id="mainbody">
        <div id="content">
            <div id="contentpane" runat="server" visible="false"></div>
        </div>
        <div id="sidebar"> 
            <div id="leftpane" runat="server"> ADSENSE CODE HERE</div>
        </div>
</div>
<div style="clear:both"></div><!-- end #main-body -->
<div id="sidebar-2">
        <div id="rightpane" runat="server" visible="false"></div>
</div>
<div id="footercontent">
    <div id="footerpane" runat="server" visible="false"></div>
<div id="date">
    <p>[CURRENTDATE]</p>
</div>
<div id="footer">
    <p>[COPYRIGHT]&nbsp;&nbsp;[TERMS]&nbsp;&nbsp;[PRIVACY]</p>
</div>
</div>

The problem can be seen on this page (scroll down to see the issue of the footer text appearing behind the main content pan, also the right hand pane is now just below the lower edge of the left hand pane, thanks I presume to the 'clear:both' property I added inline ).

Any insights? I am stumped. But think the right hand pane holds the key to a solution!

Cheers.

Eoghan

Hello,

I've just been looking at the CSS code, I think this could be the problem:

#content
{
position: absolute; left: 1px; width: 60%;

}

When you absolute position items it takes them out of the flow of the document, which is then likely to be the reason why your footer is so far up the page.

I removed those details in the web developers toolbar and the footer was then placed at the bottom of the page.

I would also remove the inline style that you have added. - I wouldn't recommend adding any inline styles in this way, you should always try to add CSS into your actual skin.css file.

Hope this helps,