Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Need help with DotNetNuke Skin div problem

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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

971 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