Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Same height - Inner_Left_Right_Middle PanesSame height - Inner_Left_Right_Middle Panes
Previous
 
Next
New Post
3/25/2009 1:50 PM
 

Hi Forum,

I have designed a skin with three inner panes inside the main content pane to place three approriate modules side by side.

The problem is with the height of these three inner modules.

Now I need help from the skinning team for a new kind of issue.

Following are the required content in the appropriate files..............

animated.aspx:

<table id="table1" width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr >
<td valign="top" id="LeftPane" class="LeftPane" runat="server" visible="false"></td>
<td valign="top" id="ContentPaneWrapper" class="ContentPane">


<table id="table2" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="InnerLeftPane" class="LeftPane" runat="server" visible="false"></td>
<td valign="top" id="InnerContentPane" class="ContentPane" runat="server" visible="false"></td>
<td valign="top" id="InnerRightPane" class="RightPane" runat="server" visible="false"></td>
</tr>
</table>
<table id="table3" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="ContentPane" class="ContentPane" runat="server" visible="false"></td>
</tr>
</table>

</td>
<td valign="top" id="RightPane" class="RightPane" runat="server" visible="false"></td>
</tr>
</table>
 

 Skin.css:

*
{
margin: 0px 0px;
}
a
{
color: #0EA2CC;
text-decoration: none;
}
h1, h2, h3
{
font-family: "Trebuchet MS" , Verdana, sans-serif;
}
h1
{
font-size: 26px;
}
h2
{
font-size: 18px;
}
h3
{
font-size: 16px;
}


body
{
background: url(images/bg2.jpg) fixed center top;
background-color: #ccc;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
#wrap
{
width: 950px;
margin: 0 auto 0 auto;
}
#header
{
background: url(images/header.png) no-repeat;
height: 136px;
}
#content
{
background: url(images/pagebg.png) repeat-y;
padding: 10px 40px 10px 40px;

}

.clear
{
clear: both;
}
#footer1
{
background: url(images/footerbg.png) no-repeat;
height: 62px;
padding: 0px 30px;
}

#scrapmenu
{
}

#scraplogo
{
margin: 40px 10px;
height: 99px;
width: 390px;
background: url(images/scrapbook2.png) no-repeat;
}

#tbpane
{
margin: 0 0 0 5px;
}

table
{
 

}


/*
.m All Sub Menu .m All Sub Menus
.m[level] Sub Menu at level x .m0 First level sub menus

.mid[id] Sub Menu with id x .mid39 DNN Admin Sub Menu
.break Break .break All menu breaks
.mi Menu Item (all) .mi All Menu Items
.id Menu Item with id x .id41 Menu Item with id 41
.mi[path] Menu Item in specific path .mi0 First Menu Item (Home)
.mi1-0 First child of second root menu (Admin-Site Settings)

.root Root Menu Item .root All root menu items
.first First Menu Item .first First menu item in each menu
.last Last Menu Item .last Last menu item in each menu
.first.last First & Last menu item in each menu

.icn Icon
.hov Hover
.sel Selected
.bc BreadCrumb
.txt Menu Text (coming soon!)
*/

/* menu container css */

.mainMenu
{
font-family: Verdana, Arial, Helvetica, sans-serif;
cursor: pointer;
font-size: 10px;
font-weight: bold;
}
.mainMenu_bg
{
background: url(images/menu_back.png) repeat-x top left;
margin: 0 24px 0 27px;
height: 40px;
}
.mainMenu_left
{
background: url(images/menu_LR.png) no-repeat top left;
}
.mainMenu_right
{
background: url(images/menu_R.png) no-repeat top right;
}

/* root menu css */
.mainMenu .root
{
text-align: center;
line-height: 41px;
padding: 8px 8px 10px 8px;
color: #333333;
}
.mainMenu .root.mi
{
background: url(images/menu123.png) repeat-x 0px 0px;
margin: 0px 0px;
}
.mainMenu .root.mi.hov
{
background: url(images/menu123.png) repeat-x 0px -60px;
color: #000009;
}
.mainMenu .root.first span
{
visibility: hidden;
}
.mainMenu .root.first
{
background: url(images/menu123_First.png) no-repeat 0px 0px;
margin: auto -26px auto auto;
}
.mainMenu .root.first.hov
{
background: url(images/menu123_First.png) no-repeat 0px 0px;
}

.mainMenu .root.last span
{
visibility: hidden;
}
.mainMenu .root.last
{
background: url(images/menu123_Last.png) no-repeat 0px 0px;
}
.mainMenu .root.last.hov
{
background: url(images/menu123_Last.png) no-repeat 0px 0px;
}


/*
.mainMenu .root.first span {visibility: hidden} /*hide first menu item text and show icon instead*/
/*
.mainMenu .root.first span {border-bottom: solid 22px transparent;} /* chrome hack */
/*
.mainMenu .root.first {background: url(images/home.png) no-repeat left top; padding: 12px 0px 12px 0px;}
.mainMenu .root.first.hov {background: url(images/home_hov.png) no-repeat left top;}
*/

.mainMenu .root.mi.sel
{
background: url(images/menu123.png) repeat-x 0px -60px;
color: #000009;
}

/* general submenu css */
.mainMenu .m
{
width: 150px;
font-size: 10px;
font-weight: bold;
z-index: 1000;
}
.mainMenu .hov, .mainMenu .bc
{
background: url(images/menu123.png) repeat-x 0px -60px;
}
.mainMenu .m .mi
{
height: 30px;
background: url(images/menu123.png) repeat-x 0px -29px;
}
.mainMenu .m
{
border: 1px inset #000000;
margin: 0 5px;
padding: 0px;
}
.mainMenu .m .icn
{
padding-left: 5px;
}
.mainMenu .m .mi *
{
color: white;
margin-right: 5px;
}
/* change * to .txt with latest webcontrols */
.mainMenu .m .sel, .mainMenu .m .bc
{
background: url(images/menu123.png) repeat-x 0px 0px;
}
.mainMenu .m .hov
{
background: url(images/menu123.png) repeat-x 0px -59px;
}

/* glossy rounded corners */
/*
.mainMenu .m .first {background: url(images/menu123.png) no-repeat top right; height: 30px;}
.mainMenu .m .first .icn {background: url(images/menu123.png) no-repeat top left;} /*needed to hide TR/TD image tiling*/
/*
.mainMenu .m .first.hov {background: url(images/menu123.png) no-repeat top right; height: 30px;}
.mainMenu .m .first.hov .icn {background: url(images/menu123.png) no-repeat top left;} /*needed to hide TR/TD image tiling*/
/*
.mainMenu .m .first.last {background: url(images/menu123.png) no-repeat top right; height: 32px;}
.mainMenu .m .first.last .icn {background: url(images/menu123.png) no-repeat top left;} /*needed to hide TR/TD image tiling*/
/*
.mainMenu .m .first.last.hov {background: url(images/menu123.png) no-repeat top right; height: 32px;}
.mainMenu .m .first.last.hov .icn {background: url(images/menu123.png) no-repeat top left;} /*needed to hide TR/TD image tiling*/
/*
.mainMenu .m .last {background: url(images/menu123.png) no-repeat bottom right; height: 26px;}
.mainMenu .m .last .icn {background: url(images/menu123.png) no-repeat bottom left;} /*needed to hide TR/TD image tiling*/
/*
.mainMenu .m .last.hov {background: url(images/menu123.png) no-repeat bottom right; height: 26px;}
.mainMenu .m .last.hov .icn {background: url(images/menu123.png) no-repeat bottom left;} /*needed to hide TR/TD image tiling*/

.m .break .icn
{
font-size: 1px;
height: 1px;
}
/*ensure that all menu breaks are only 1px high */


/*layout*/
.template_style
{
width: 960px;
margin: auto;
}
.logo
{
margin-top: 10px;
}
.bread_bg
{
background-color: #F2F5F9;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-left: solid 1px #EAEAEA;
border-right: solid 1px #EAEAEA;
margin: 0 5px 0 5px;
height: 40px;
}
.content
{
background: white;
border-left: solid 1px #EAEAEA;
border-right: solid 1px #EAEAEA;
padding: 10px;
margin: 0 5px 0 5px;
}
.bot_bg
{
background-color: #EAEAEA;
border-left: solid 1px #EAEAEA;
border-right: solid 1px #EAEAEA;
border-bottom: solid 1px #EAEAEA;
padding: 10px;
margin: 0 5px 0 5px;
}
.bot_pad
{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-bottom: 0px;
padding: 0 30px 0 20px;
}

/* controls */
#login_style
{
float: right;
padding: 10px 17px 0px 10px;
}
#bread_style
{
float: left;
padding: 10px 0px 0px 17px;
color: #000000;
font-size: 13px;
}
#terms_style
{
float: left;
}
#copy_style
{
float: right;
}

/*panes*/
.ContentPane
{
padding: 0px;
margin: 0px;
}
.MiddlePane
{
padding: 0px 0px 0px 10px;
width: 10em;
margin: 0px;
}
.LeftPane
{
padding: 0px 10px 0px 0px;
width: 10em;
margin: 0px;
}
.RightPane
{
padding: 0px 0px 0px 10px;
width: 10em;
margin: 0px;
}

/*breadcrumbs*/
.Breadcrumb, a.Breadcrumb:link, a.Breadcrumb:active, a.Breadcrumb:visited
{
color: #800000;
font-size: 13px;
}
a.Breadcrumb:hover
{
color: #C00;
}

/*links*/
.links
{
text-align: center;
}
.links, a.links:link, a.links:active, a.links:visited
{
font-weight: bold;
color: #800000;
font-size: 11px;
}
a.links:hover
{
color: #C00;
}

/*user*/
.user, a.user:link, a.user:active, a.user:visited
{
color: #800000;
font-size: 12px;
}
a.user:hover
{
color: #C00;
}

/*footer*/
.footer, a.footer:link, a.footer:active, a.footer:visited
{
color: #800000;
font-size: 12px;
}
a.footer:hover
{
color: #C00;
}

 

 

 


 

Container.css

/* menu container css */

.moduleContainer

{

width: 100%;

margin: 10px 0;

}

.moduleContainer .wrapper

{

width: 100%;

}

.moduleContainer .header

{

width: 100%;

height: 100%;

 

}

.moduleContainer .actions

{

 

}

.moduleContainer .actions .ModuleTitle_MenuBar

{

float: left;

width:10px;

height:10px;

margin:0 0 -10px 0;

}

.moduleContainer .actions .ModuleTitle_MenuBar .root

{

/* font-size:30px;*/

border:0px;

clear:both;

}

/*

.moduleContainer .actions .ModuleTitle_MenuBar .root.first {background: url(images/action.png) no-repeat left center; }

.moduleContainer .actions .ModuleTitle_MenuBar .root.first.hov {background: url(images/action_hov.png) no-repeat left center; }

.moduleContainer .actions .ModuleTitle_MenuBar .root.first .icn img {height: 24px; width: 24px; visibility: hidden;}

*/

.moduleContainer .actions .ModuleTitle_MenuBar .m

{

background: #242424;

padding-right: 2px;

}

.moduleContainer .actions .ModuleTitle_MenuBar .m .icn

{

background: url(images/icon_bg.png) repeat-y left top;

border: 0px;

width: 22px;

text-align: left;

}

.moduleContainer .actions .ModuleTitle_MenuBar .m .break .icn

{

font-size: 1px;

height: 1px;

}

.moduleContainer .actions .ModuleTitle_MenuBar .m span

{

padding-left: 0px;

color: White;

}

.moduleContainer .actions .ModuleTitle_MenuBar .m .hov

{

background: url(images/subaction_hov.gif);

}

.moduleContainer .actions .ModuleTitle_MenuBar .m .mi img

{

/* visibility: hidden;*/

}

.moduleContainer .title

{

text-align: center;

width:100%;

clear:both;

padding:10px 0;

}

.moduleContainer .help

{

float: right;

}

.moduleContainer .footer

{

margin-top: 10px;

}

 

.contentPane1

{

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-style: solid;

border-right-width: 2px;

border-bottom-width: 2px;

border-left-width: 2px;

border-top-width: 2px;

border-right-color: #FF9900;

border-bottom-color: #FF9900;

border-left-color: #FF9900;

border-top-color: #FF9900;

margin-top: -5px;

 

}

.mainMenu1

{

font-family: Verdana, Arial, Helvetica, sans-serif;

cursor: pointer;

font-size: 14px;

font-weight: bold;

 

}

.mainMenu1_bg

{

background-image: url(images/top_middle.png);

background-position: 0px 0px;

background-repeat: repeat-x;

margin: 0px 21px 0px 18px;

height: 50px;

color: #774700;

 

 

}

.mainMenu1_left

{

background-image: url(images/top_left.png);

background-repeat: no-repeat;

margin:0 0 0 -1px;

}

.mainMenu1_right

{

background: url(images/top_right.png) no-repeat top right;

margin:0 -4px 0 0;

}

/**==============================For Container:2====================================*/

.contentPane2

{

border-style: solid;

border-width: 2px;

border-color: #7AA72B;

margin-top: -12px;

}

.mainMenu2

{

font-family: Verdana, Arial, Helvetica, sans-serif;

cursor: pointer;

font-size: 14px;

font-weight: bold;

 

}

.mainMenu2_bg

{

background-image: url(images/2top_middle.png);

background-position: 0px 0px;

background-repeat: repeat-x;

margin: 0px 17px 0px 18px;

height: 50px;

color: #155715;

}

.mainMenu2_left

{

background-image: url(images/2top_left.png);

background-repeat: no-repeat;

margin:0 -1px 0 -1px;

}

.mainMenu2_right

{

background: url(images/2top_right.png) no-repeat top right;

margin:0 0px 0 0;

}

/**==============================For Container:3====================================*/

.contentPane3

{

margin-top: -12px;

padding-top: 10px;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-right-width: 2px;

border-bottom-width: 2px;

border-left-width: 2px;

border-right-color: #054F7B;

border-bottom-color: #054F7B;

border-left-color: #054F7B;

}

.mainMenu3

{

font-family: Verdana, Arial, Helvetica, sans-serif;

cursor: pointer;

font-size: 14px;

font-weight: bold;

 

}

.mainMenu3_bg

{

background-image: url(images/3top_middle.png);

background-position: 0px 0px;

background-repeat: repeat-x;

margin: 0px 24px 0px 25px;

height: 50px;

color: #333333;

 

}

.mainMenu3_left

{

background-image: url(images/3top_left.png);

background-repeat: no-repeat;

margin:0 -1px 0 -1px;

}

.mainMenu3_right

{

background: url(images/3top_right.png) no-repeat top right;

margin:0 0px 0 0;

}

 

 
New Post
3/25/2009 11:02 PM
 

Hi,

Can anybody please suggest me to have same height for the containers placed side by side in a table like I said above.

Regards

Riaz

 
New Post
3/26/2009 5:02 AM
 

I don't understand your question.

You used a table it seems so then the left middle and rightpane should already be the same height...?

Or do you want the modules in them to be the same height?

 
New Post
3/26/2009 6:02 AM
 

Timo,

Yes I am using three different modules.

Let me explain,

My skin contains Panes like this.....(please verify animated.ascx file above)

leftpane innerleftpane innercontentpane innerRightpane RightPane
ContentPane

innerLeftpane contains "Latest Post-forum extension module"

innercontentpane contains "Top User -Forum extension module"

innerRightPane contains "Top thread -froum extension module"

ContentPane conatins "Forum Module"

All the above modules will load dynamically ,so one module will differ from another in their height.I want to make the first three

extension modules to the same height (make the small once to match the maximum height).

Note: The above table structure is as follows.....

<table id="table1" width="100%" border="0" cellspacing="0" cellpadding="0" >

<tr >

<td valign="top" id="LeftPane" class="LeftPane" runat="server" visible="false"></td>

<td valign="top" id="ContentPaneWrapper" class="ContentPane">

 

 

<table id="table2" width="100%" border="0" cellspacing="0" cellpadding="0">

<tr >

<td valign="top" id="InnerLeftPane" class="LeftPane" runat="server" visible="false"></td>

<td valign="top" id="InnerContentPane" class="ContentPane" runat="server" visible="false"></td>

<td valign="top" id="InnerRightPane" class="RightPane" runat="server" visible="false"></td>

</tr>

</table>

<table id="table3" width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td valign="top" id="ContentPane" class="ContentPane" runat="server" visible="false"></td>

</tr>

</table>

 

</td>

<td valign="top" id="RightPane" class="RightPane" runat="server" visible="false"></td>

</tr>

</table>

 

Regards

Riaz

 
New Post
3/26/2009 6:39 AM
 

You need to do containers that are fixed height and scrol the content when hight are beyond what is allowed in your design. This is not an ideal method and I suggest you change your design so it does not dictate same height columns.

Salar

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Same height - Inner_Left_Right_Middle PanesSame height - Inner_Left_Right_Middle Panes


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out