AJJR
asked on
Need help with DotNetNuke Skin div problem
Hello Experts,
I am having an issue with a dot net nuke skin that I am building. The content_container div isn't extending all the way down the page. I have spent all day trying to impliment a sticky footer (i.e. the footer stays to the bottom of the viewable area if a narrow bit of content is in place otherwise it extends to bottom of content). But now I am having an issue with the layout of it. Please help me out here if you can.
Kind Regards,
Aric
I am having an issue with a dot net nuke skin that I am building. The content_container div isn't extending all the way down the page. I have spent all day trying to impliment a sticky footer (i.e. the footer stays to the bottom of the viewable area if a narrow bit of content is in place otherwise it extends to bottom of content). But now I am having an issue with the layout of it. Please help me out here if you can.
Kind Regards,
Aric
<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="avt" TagName="NavXp" Src="~/DesktopModules/NavXp/NavXp.ascx" %>
<div runat="server" id="ControlPanel" ></div>
<div class="wrapper">
<div class="shadow_left">
<div class="shadow_right">
<div class="content_container">
<div class="top_links_area">
<div style="float:right"> |
<a href=""><span class="top_links">Change Community</span></a> |
<dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="top_links" /> |
<a href=""><span class="top_links">Webmail</span></a>
</div>
<div class="community_breadcrumbs">
<avt:NavXp runat="server" id="BreadTopLink" />
</div>
</div>
<div class="header_area">
<div class="logo_area">
<div class="logo">
<dnn:LOGO runat="server" id="dnnLOGO" />
</div>
<div class="clear"></div>
<div class="top_menu_area">
<div class="top_menu_blue_bar">
<img src="<%= SkinPath %>Blue-Strip.jpg" alt=""/>
</div>
<div class="top_menu"><avt:NavXp runat="server" id="AccessMenuTop" /></div>
</div>
</div>
<div class="clear"></div>
<div class="search_area">
<div class="search">
<dnn:SEARCH runat="server" id="dnnSEARCH" CssClass="search" ShowSite="False" ShowWeb="False" UseWebForSite="False" UseDropDownList="False" Submit="<img src="go-button.gif" border="0" alt="Search" />" />
</div>
<div class="search_squares">
<img src="<%= SkinPath %>squares.gif" alt=""/>
</div>
</div>
</div>
<div class="clear"></div>
<div class="breadcrumbs_area">
<div class="main_breadcrumbs"><avt:NavXp runat="server" id="MainBreadLink" /></div>
<div runat="server" id="LinkPane" class="linkpane"></div>
</div>
<div class="content_area">
<div id="RightPane" class="rightpane" runat="server"></div>
<div id="LeftOuterPane" class="leftpane" runat="server"></div>
<div id="LeftPane" class="leftpane" runat="server"></div>
<div id="BannerPane" class="bannerpaneinner" runat="server"></div>
<div id="ContentPane" class="contentpaneinner" runat="server"></div>
<div id="Pane1" class="pane1" runat="server"></div>
<div id="Pane2" class="pane2" runat="server"></div>
<div id="Pane3" class="pane3" runat="server"></div>
<div id="Pane4" class="pane4" runat="server"></div>
</div>
</div>
<div class="footer_area">
<div class="footer_container">
<div class="footer_separator">
<img src="/images/1x1.gif" width="1017" height="2" alt=""/>
</div>
<div class="footer_links_area" align="center">
<a href="/home.aspx"><span class="footer_links">Home</span></a> |
<a href=""><span class="footer_links">About Us</span></a> |
<dnn:PRIVACY runat="server" id="dnnPRIVACY" CssClass="footer_links" /> |
<dnn:TERMS runat="server" id="dnnTERMS" CssClass="footer_links" /> |
<a href=""><span class="footer_links">Site Map</span></a> |
<a href=""><span class="footer_links">Contact Us</span></a> |
<a href=""><span class="footer_links">Careers</span></a> |
<a href=""><span class="footer_links">Choose Your Community</span></a> |
<a href=""><span class="footer_links">©2010 Access Communications Co-Operative Limited</span></a>
<span style="display:none;"><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="footer_links" /></span>
</div>
</div>
</div>
</div>
</div>
</div>
________________________________________________________________
CSS FILE
/* CSS Document */
#Body {
background:#FFF url(bg.jpg) repeat-x top left;
height:100%;
margin:0;
padding:0;
}
html, body, form{
height:100%;
}
/* ControlPanel style*/
.controlpanel{
border:none;
padding-bottom:10px;
width:1017px;
margin:auto;
padding-left:10px;
border:0;
}
.facebook a{
display:block;
width: 37px;
height:37px;
background: url("/portals/0/facebook.png") 0 0 no-repeat;
text-decoration: none;
}
.facebook a:hover {
background-position: 0 -37px;
}
.twitter a{
display:block;
width: 36px;
height:36px;
background: url("/portals/0/twitter.png") 0 0 no-repeat;
text-decoration: none;
}
.twitter a:hover {
background-position: 0 -36px;
}
.rss a{
display:block;
width: 37px;
height:37px;
background: url("/portals/0/rss.png") 0 0 no-repeat;
text-decoration: none;
}
.rss a:hover {
background-position: 0 -37px;
}
.youtube a{
display:block;
width: 81px;
height:31px;
background: url("/portals/0/youtube.png") 0 0 no-repeat;
text-decoration: none;
}
.youtube a:hover {
background-position: 0 -31px;
}
.linkedin a{
display:block;
width: 90px;
height:25px;
background: url("/portals/0/linkedin.png") 0 0 no-repeat;
text-decoration: none;
}
.linkedin a:hover {
background-position: 0 -25px;
}
/*-------- Default Style --------*/
input[type=text]:focus,
input[type=password]:focus {
outline: 0 none;
}
body,th,td,table,h1,h2,h3,h4,h5,h6,.Normal,.NormalDisabled,.Head,.SubHead,.SubSubHead, a:link, a:visited, a:hover, input, .CommandButton{
color:#2E3D47;
font-family:Verdana, Arial;
}
body,th,td,table,.Normal,.NormalDisabled,.Head,.SubHead,.SubSubHead, a:link, a:visited, a:hover{
font-size:12px;
}
h1, h2, h3, h4, h5, h6, h2 input{
color:#375162;
font-weight:bold;
margin:1ex 0;
}
h1{
font-size:18px;
margin:10px 0;
}
h2, h2 input{
font-size:16px;
}
h3{
font-size:14px;
}
h4{
font-size:12px;
}
h5{
font-size:11px;
}
h6{
font-size:10px;
}
a,a:link,a:visited,a:active{
color:#77787b;
text-decoration:none;
font-weight:normal;
}
a:hover{
color:#243a76;
text-decoration:underline;
}
.Head, .SubHead, .SubSubHead, .Normal, .NormalDisabled, .NormalDisabled, .NormalBold, .NormalRed, .NormalTextBox{
font-family:Verdana, Arial;
}
.Head{
color:#2E3D47;
font-weight:bold;
}
.SubHead{
color:#4C6171;
}
.SubSubHead{
color:#6E8AA0;
}
.NormalRed{
color:#F00;
}
/*Datagrids */
.DataGrid_Container{
margin-top:15px;
}
.DataGrid_Header{
font-weight:bold;
}
.DataGrid_Header td, .NormalBold td{
font-weight:bold;
}
/* ------- FileManager -------*/
div.FileManager{
height:auto;
border:none;
}
table.FileManager{
width:99%
}
a.CommandButton:link, a.CommandButton:visited{
color:#CB2027;
font-weight:bold;
text-decoration:none;
}
a.CommandButton:hover{
color:#3E81B5;
text-decoration:underline;
}
/*-------ControlPanel changes ---------------*/
.ControlPanel a.CommandButton:link, .ControlPanel a.CommandButton:visited{color:#3E81B5;}
.ControlPanel a.CommandButton:hover{color:#CB2027; text-decoration:underline;}
.ControlPanel a.CommandButton:link, .ControlPanel a.CommandButton:hover, .ControlPanel a.CommandButton:visited, .ControlPanel .SubHead{
font-size:11px;}
.ControlPanel a[disabled="disabled"]{color:#888 !important;text-decoration:none !important;}
/*--------- pane style ----------*/
.bannerpane{
padding:0px;
float:left;
}
.bannerpaneinner{
padding:0px;
float:left;
}
.contentpane{
padding:0px;
float:left;
}
.contentpaneinner{
padding:0px;
float:left;
}
.leftpane{
padding:0px 10px 0 0;
width:185px;
height:100%!IMPORTANT;
height:auto;
float:left;
}
.rightpane{
padding:0px 0 0 10px;
width:160px;
float:right;
position:relative;
right:80px;
top:0
}
.pane1{
padding:0px 5px 0px 0px;
float:left;
}
.pane2{
padding:0px 5px 0px 5px;
float:left;
}
.pane3{
padding:0px 5px 0px 5px;
float:left;
}
.pane4{
padding:0px 5px 0px 5px;
float:left;
}
.pane5{
padding:0px 0px 0px 8px;
float:left;
}
.DNNEmptyPane{
display:none;
clear:both
}
/*-------- design style --------*/
.clear{
clear:both;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin:auto;
width:1017px!IMPORTANT;
}
.shadow_left{
background: url(shadow_right.png) repeat-y top right;
height: 100%;
margin:0;
padding:0;
float:left;
}
.shadow_right{
background: url(shadow_left.png) repeat-y top left;
height: 100%;
margin:0;
padding:0;
float:right;
}
.content_container{
height: 100%;
padding-bottom:120px;
margin:0 7px 0 7px;
padding-top:7px;
width:1017px;
background-color:#ffffff;
clear:both;
}
.top_links_area{
color:#77787b;
line-height:10px;
padding:0;
margin:0 40px 0 40px;
background-color:#ffffff
}
.community_breadcrumbs{
float:right;
padding:0;
}
.top_links,a.top_links,a.top_links:link{
color:#77787b;
font-size:10px;
}
a.top_links:active,a.top_links:hover{
color:#243a76;
font-size:10px;
}
.header_area{
margin:0;
}
.logo_area{
padding:0px;
margin-left:40px;
}
.logo{
height:54px;
width:178px;
}
.top_menu_area{
padding:0;
vertical-align:top;
width:760px;
height:32px;
float:right;
position:relative;
top:-30px;
right:0;
}
.top_menu{
float:right;
height:32px;
}
.top_menu_blue_bar{
width:40px;
height:30px;
padding:3px 0 0 0;
float:right;
}
.search_area{
padding:0px 40px 0px 0px;
float:right;
height:35px;
position:relative;
top:-20px;
right:0;
}
.search{
float:right;
}
.search_squares{
padding:8px 10px 0 0;
float:right;
}
#dnn_dnnSEARCH_ClassicSearch input.NormalTextBox{
width:150px;
height:22px;
line-height:22px;
vertical-align:top;
padding:0;
margin:0;
font-size:11px;
}
#ClassicSearch{
vertical-align:top;
padding:0;
height:26px;
}
.breadcrumbs_area{
margin:0 40px 0 40px;
position:relative;
top:-40px;
left:0;
}
.main_breadcrumbs{
}
.content_area{
width:100%;
margin:0 40px 0 40px;
padding:0;
vertical-align:top;
position:relative;
top:-30px;
left:0;
background-color:#ffffff;
}
.footer_container{
clear:both;
}
.footer_area{
clear: both;
position: relative;
margin:-120px auto auto auto;
width:1017px !IMPORTANT;
height:120px;
background-color:#ffffff;
}
.footer_separator{
background: url(Divider-Line.gif) no-repeat bottom center;
height:3px;
width:1017px;
margin:0;
padding-top:50px;
}
.link_separator{
height:8px;
line-height:10px;
color:#77787b;
}
.footer_links_area{
color:#77787b;
line-height:30px;
}
.footer_links,a.footer_links,a.footer_links:link,a.footer_links:active {
color:#77787b;
font-size:10px;
font-family:Verdana, Arial;
}
a.footer_links:hover{
color:#243a76;
font-size:10px;
font-family:Verdana, Arial;
}
I take it you're trying to reach an effect like this http://ryanfait.com/sticky-footer/ shows? You need to place the footer outside the wrapper, not inside it. At least it works here after I move the footer below the .wrapper div.
It is possible that you could use a min-height property for the div that is collapsing too much?
+Bill
+Bill
I was revisiting this question and I think you have a problem with the floats. There does not appear to be a div that does not float. If all of your div's float right or left, then what will keep the middle of the content are defined? It seems to me that you would want your panel div's to not float and then they will help define the height of the content area...further, the footer div probably should not float either. I hope this helps.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.