Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need help with DotNetNuke Skin div problem

Posted on 2010-08-22
4
Medium Priority
?
1,498 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

670 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