Solved

Need help with DotNetNuke Skin div problem

Posted on 2010-08-22
4
1,482 Views
Last Modified: 2013-11-19
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
<%@ 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">&nbsp;|&nbsp;
						<a href=""><span class="top_links">Change Community</span></a>&nbsp;|
						<dnn:LOGIN runat="server" id="dnnLOGIN"  CssClass="top_links" />&nbsp;|
						<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="&lt;img src=&quot;go-button.gif&quot; border=&quot;0&quot; alt=&quot;Search&quot; /&gt;" />
						</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>&nbsp;|
						<a href=""><span class="footer_links">About Us</span></a>&nbsp;|
						<dnn:PRIVACY runat="server" id="dnnPRIVACY"  CssClass="footer_links" />&nbsp;|
						<dnn:TERMS runat="server" id="dnnTERMS"  CssClass="footer_links" />&nbsp;|
						<a href=""><span class="footer_links">Site Map</span></a>&nbsp;|
						<a href=""><span class="footer_links">Contact Us</span></a>&nbsp;|
						<a href=""><span class="footer_links">Careers</span></a>&nbsp;|
						<a href=""><span class="footer_links">Choose Your Community</span></a>&nbsp;|
						<a href=""><span class="footer_links">&#169;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;
}

Open in new window

0
Comment
Question by:AJJR
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 3

Expert Comment

by:WabbitSeason
ID: 33500544
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.
0
 
LVL 4

Expert Comment

by:Bill Cochran
ID: 33512590
It is possible that you could use a min-height property for the div that is collapsing too much?

+Bill
0
 
LVL 4

Expert Comment

by:Bill Cochran
ID: 33621760
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.
0
 

Accepted Solution

by:
AJJR earned 0 total points
ID: 33740792
Hi Guy's,.
Thanks for all the help. Sorry for the delay (had a death in the family). I ended up solving this by applying an image at a fixed width to the outer div container and repeating it on the y axis. This allowed me to have the footer stick to the bottom but still give the appearance of the main content area full height. The only drawback to this solution is that the skin must stay at a fixed width to match the image. As far as i can tell, this is the only wat to accomplish this layout style in a CMS like DNN.
Kind Regards,
Aric
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question