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, ...css overflow contentpane css overflow contentpane
Previous
 
Next
New Post
2/11/2006 1:26 PM
 

Hello,

i'm using DNN 3.2.2 and i'm developing a new skin. I've tried everything to get an overflow of the contentpane, so only a central textpart scrolls. Without succes. Can somebody look at the code and has someone the solution for this problem? Beneath the style of the contentpane and the .ascx-file.

skin.css:

.contentpane {
width:100%;
height:100%;
margin:0;
overflow:scroll;
background-image: url("slices_0002/gemo_r5_c6.png");
background-repeat:repeat-y;}

}

portalfixedwidth.ascx:

<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%
@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%
@ Register TagPrefix="dnn" TagName="MENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>
<%
@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<div id="page">
<
div id="table">
<
table width=100% cellspacing=0 cellpadding=0 border=0>
<tr><td class="a1"></td><td class="b1" align="right" valign="top">&nbsp;&nbsp;<dnn:LOGIN runat="server" id="dnnLOGIN" />&nbsp;&nbsp;</td></tr>
<tr><td class="a2"></td><td class="b2"><dnn:MENU runat="server" id="dnnMENU" Display="Horizontal" usearrows="false" userootbreadcrumbarrow="false" usesubmenubreadcrumbarrow="true" rootmenuitemcssclass="rootmenuitem" rootmenuitemselectedcssclass="rootmenuitemselected" rootmenuitembreadcrumbcssclass="rootmenuitembreadcrumb" submenucssclass="submenu" submenuitemselectedcssclass="submenuitemselected" submenuitembreadcrumbcssclass="submenuitembreadcrumb" rootmenuitemlefthtml="&nbsp;&nbsp;<span class=&quot;menuimg&quot;>&nbsp;&nbsp;&nbsp;</span>&nbsp;" /></td></tr>
<tr><td class="a3"></td><td class="b3"><dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB" />&nbsp;</td></tr>
<tr><td class="a4" valign=top id="InfoPane" runat="server"></td><td valign=top>
<table class="contentpane">
<tr><td id="ContentPane" runat="server" visible="true" valign="top" align="middle" height="100%" width="33%></td></tr>
</table>
</td></tr>
</
table>
</
div>
</
div>

Regards,

Ivo Schoutsen (NL)

 

 
New Post
2/11/2006 3:23 PM
 

Is there a site we can look at, because generally there is no problem to generate a scroll bar to the right of the content pane. Have you tested it with a fixed height setting instead of 100%?

Peter


Peter Schotman
Cestus Websites voor DotNetNuke oplossingen in Nederland
Contact us for your custom design and skinning work.
 
New Post
2/11/2006 6:30 PM
 

I created a site a while ago - and it was fixed in the centre of the screen  - like a postcard site - It was a completely tableless skin but I wasn't 100% happy with the behaviour cross browser so added a couple of adjustments to it.

This is the way the content pane was laid out in the page and the css code that held it together.

in the ascx file -
<div class="contentpane"><div id="ContentPane" runat="server" visible="false"></div></div>

in the CSS file -


div.contentpane {
position: absolute;
top: 50px;
left: 230px;
width: 450px;
height: 400px;
text-align: left;
border: #ffffff 1px solid;
background-color: #3f4543;
padding: 5px;
overflow: auto;
scrollbar-face-color:#3f4543;
scrollbar-arrow-color:#ffffff;
scrollbar-track-color:#3f4543;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#535957;
scrollbar-darkshadow-color:#2d3331;
}

You would still be required to tweak it further, but this is an example one that works, and I've included the scrollbar attributes which are not necessarily cross browser compatible.

Hope this helps you get pointed in the right direction.  Peter was correct - you can't have 100% in your pane because it will force the pane to stretch to full height of browser page.

Nina Meiers


Nina Meiers My Little Website
If it's on DNN, I fix, build, deploy, support,skin, host, design, consult, implement, integrate and done since 2003.
Who am I? Just a city chic, having a crack at organic berry farming.. and creating awesome websites.
 
New Post
2/14/2006 6:55 AM
 

Peter, Nina,

thanks for your replies. Nina I took your code and it worked out. What I wanted was a design that filled out the browser in the bottom. So I set height on 100 %. It worked. If text was larger than screenheight it overflowed with a scrollbar. So far so good. 2 new problems appeared. When I wanted to edit a page by generating the menu by moving over the blue triangle, the contentpane and infopane began to flicker. When I set the height to a fixed value, for example 400px it didn't flicker. But I didn't want to have a fixed height for the contentpane.

Second problem was the fact that if I do want to have a scrollbar in the contentpane, I don't want a scrollbar for the body. So I set 'overflow:hidden' as bodystyle. Scrollbar for the body is gone. Perfect. Butttt.......also the scrolbar in my texteditor Cute Editor disappeared. Now I'm back to where I started. A full scrollable skin.   

Nina, I tweaked your examplecode. You must have had a similar problem, I think. If so, what was your solution for the missing scrollbar in the editor. Further I want to develop a tableless skin. Can you send me your tableless skin for example and inspiration, if you do agree with this?

Ivo Schoutsen

 

 

 

 
New Post
2/14/2006 1:56 PM
 
kranenburg wrote

 Further I want to develop a tableless skin. Can you send me your tableless skin for example and inspiration, if you do agree with this?

Ivo,
I don't want to temper your enthousiam or learning experience, but why do you want to design a tableless skin. Please keep in mind that a number of modules have talbes in their control .aspx files also the standard solpartmenu is full of tables. So tableless is a very big word in the DNN world. I don't say you can't but are you doing it for the right reasons...

Peter


Peter Schotman
Cestus Websites voor DotNetNuke oplossingen in Nederland
Contact us for your custom design and skinning work.
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...css overflow contentpane css overflow contentpane


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