You need to Register for free and Login to post a message in the forum.

Forum

Forums > DotNetNuke® > DotNetNuke® Questions
Subject: Positioning of DNN Footer - CSS problem
Prev Next
You are not authorized to post a reply.

Author Messages
e on
Nuke Ace
Nuke Ace
Posts:42
29 Oct 2006 2:17 AM  
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:
Anybody had a similar problem in the past and manage to solve it? Any ideas?

Thanks,

Eoghano
Lee Sykes
DNN Creative Staff
Nuke Master V
Nuke Master V
Posts:5302
31 Oct 2006 3:52 AM  
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/Albums/tabid/53/ctl/Terms/Default.aspx">Terms of Use</a>&nbsp;&nbsp;<a id="dnn_dnnPRIVACY_hypPrivacy" class="SkinItem" href="http://208.106.151.10/indie-music/Albums/tabid/53/ctl/Privacy/Default.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 Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
e on
Nuke Ace
Nuke Ace
Posts:42
01 Nov 2006 4:17 AM  
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
Lee Sykes
DNN Creative Staff
Nuke Master V
Nuke Master V
Posts:5302
01 Nov 2006 9:56 AM  
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,
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
You are not authorized to post a reply.
Forums > DotNetNuke® > DotNetNuke® Questions > Positioning of DNN Footer - CSS problem



ActiveForums 3.7

Latest Forum Posts

while installing bulk emailer module in my website by agiline
Hi all,i have downloaded bulk e mailer trial version and when i am installing it in my website it wa...
RE: Creating Portals before setting the host by cyborama
Hello Joe, Just got done speaking with my hosting company in reguards to A records and host head...
RE: PayFlow Link by johnmurphy
Hi murphydolores, I am using iHost. iHost.Net supports PayFlow Link and its easy to configure. T...
RE: Background Music by cyborama
Hello Kyle I can't think of any modules that could do this though that doesn't mean they are not out...
RE: Creating Portals before setting the host by cyborama
Hello Joe thanks for the quick reply, If you read down my thread fully you will see I had already...
RE: Employee Absent Indicator by jncraig
I think that the biggest here is to define the workflow and to figure out who/how will maintain the ...
RE: Run exe/dll from DNN? by ollivogt
Thank you. I have a look at it....RegardsOliver
RE: DotNetNuke 5.3.0 Released by jncraig
Whoops! From Joe Brinkman: "With any software product you will occasionally have a release tha...
RE: Creating Portals before setting the host by jncraig
Whoops! Didn't quite finish. DNS, through A Records and other records is used to convert a domai...
RE: Creating Portals before setting the host by jncraig
NO! Don't delete and start over. "A Records" are part of DNS. Host Headers are part of IIS Co...
RE: Creating Portals before setting the host by cyborama
By the way Lee or Joe didn't try this yet but do you think it would be wise (should someone else run...
RE: Creating Portals before setting the host by cyborama
Ok Lee, Joe, and others reading this thread, I just had success. Here is what happened. I thoug...
RE: Creating Portals before setting the host by cyborama
Hello Lee, No Success yet I think I might need to delete my portal and recreate it. I created th...
RE: Auto create pages and content by jncraig
Are you using the DotNetNuke menu or another one?
RE: Missing Edit & Add Function on Modules to Entire Site by jncraig
Glad it's working!
RE: Firefox SWF file by jncraig
I recommend that you use the free DigFlash module from dignuke.com. I've found it to be a very reli...
Firefox SWF file by ce221
on my dnn site it have a text/html that has the following attached code this displays fine in IE but...
RE: Missing Edit & Add Function on Modules to Entire Site by jacksonsc56
arrrrggghhhh for goodness sake, I was in View mode!. After a year working on numerous B2B DNN sit...
RE: Missing Edit & Add Function on Modules to Entire Site by jacksonsc56
Strangely enough the Admin account is displaying the modules settings menu. To confirm its the menu ...
.MainMenu_MenuItemActive (Active Solpart menu item not working) by SixfootStudio
Hi Guys, Could someone please take a look at this SolPart menu for me and tell me why it is that ...
DNN Creative Subscribe
RSS Feeds