Solved

Need help with DotNetNuke Skin div problem

Posted on 2010-08-22
4
1,472 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now