Page 2 3-Panel CSS layout doesn't work as skin

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

Home All Forums

Home

Using DNN Platf...

Skins, Themes, ...

3-Panel CSS layout doesn't work as skin

1/21/2008 5:23 AM

Armand Datema

Joined: 9/16/2003

Posts: 787

Re: 3-Panel CSS layout doesn't work as skin

John

Its not you its DNN, they are not implementing the panes correctly. Instead of replacing the divs with the pane code, they keep the divs and implemet the panes next to them ( this was in older 4.x versions and that gave me a lot of trouble as well)

In order to make it work you have to style you content and amke a 3 column div layout with css if thsi is working you need to insert the contentpane into a div and not have the column div be the contentpane

[div id="myleftpanel"]

[div id="leftpane" runat="server"][/div]

[/div]

here are a number of 3 or more colum skins

http://z.nu.nl ( 3 colums and some column have sub columns, all done with css no table )

http://www.schwingsoft.com ( also 3 columns no tables )

http://www.itbuzz.nl ( 3 columns with differnt top and footer panel )

Armand

Armand Datema

Get my new skin ( lots of design variations [18 headers, 30 titlebars, 30 breadcrumbs, 3 footers ], 50+ typography containers , 50+ page templates and an online theme builder for unlimited skin variations) Aura>

For all your skin conversions

2DNN

Follow me on Twitter

1/29/2008 10:33 AM

John Priest

Joined: 11/20/2007

Posts: 40

Re: 3-Panel CSS layout doesn't work as skin

Thanks for the suggestion and sorry for the delayed reply. Your suggestion worked great! I'm now using a full CSS skin for my test portal and it's rendering correctly in Firefox, IE7 and IE6. Whew...

I do have one more question if you don't mind... the internal div that actually holds the content pane... what is your suggestion or creating margins around the content? Right now, my modules have zero margin around them, so they take up the entire panel. I've been messing with some margin and padding settings on the internal div, but can't seem to create the margin around the modules. Do you use margins on the nested div or do you size the internal div smaller or something?

Also, do you have any idea on how to make the div sizes strict? Sometimes I get modules that break the div width, and I would rather the module break than the layout.

Thanks!
John

1/29/2008 11:29 AM

Armand Datema

Joined: 9/16/2003

Posts: 787

Re: 3-Panel CSS layout doesn't work as skin

Well I keep the completelayout margin and padding free this way im ot relying on what the skinning engine outputs in the code ( this has been wrong on almost all of the dnn versions , i havent double checked 4.8 yet but all the others gave issues

If I want room around the module i just make a very basic container set this as the default for the portal and apply the margins there ( margin is for spacing on outside of the elemnet you are in, padding is for spacing within )

If you want the module to break then thts ot that hard lets say you have div class="modulecontent"

then just style that as

div.modulecontent

{

width:250px;

overflow:hidden;

}

Armand Datema

For all your skin conversions

2DNN

Follow me on Twitter

1/29/2008 11:40 AM

John Priest

Joined: 11/20/2007

Posts: 40

Re: 3-Panel CSS layout doesn't work as skin

Perfect, again, thank you!

I did manage to get the "margins" set by adding padding to the outside div, but getting the padding to work right in IE and in Firefox was becoming problematic. I had to decrease the size of the pane to make up for the padding in IE, but Firefox obviously doesn't calculate the same way.

I'll work on adding margins to my containers and go from there. What about modules that I set to hide the container? Will the margins hold or do I need to create some kind of invisible container?

Thanks!
John

1/29/2008 1:54 PM

Armand Datema

Joined: 9/16/2003

Posts: 787

Re: 3-Panel CSS layout doesn't work as skin

margins should hold

altho thats how i do itt mostly

Armand Datema

For all your skin conversions

Page 2 of 2

3-Panel CSS layout doesn't work as skin

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:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
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.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)