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, ...Div positioning within HTML moduleDiv positioning within HTML module
Previous
 
Next
New Post
4/7/2011 5:45 AM
 
I've got what seemed a fairly simple problem -- replace a table with divs, because I couldn't get the table cells to expand and shrink across browsers the way I wanted. (Worked in Chrome & Firefox, bombed in IE.) So I went to divs with absolute positioning -- worked a charm. Here's what the css looked like on my mockup html page:

       #LeftCol
        {
            padding-top: 10px;
            width: 15%;
        }
        #MidCol
        {
            top:10px;
            padding-left: 20%;
            position: absolute;
            width: 40%;
        }
        #RightCol
        {
            top:10px;
            padding-left: 65%;
            position: absolute;
            width: 35%;
        }
        #StoverBlock
        {
            padding-left: 25%;
            position: absolute;
            top: 720px;
            width: 70%;
        }

... renders beautifully in an empty HTML page. Chrome, Firefox, IE, no problems.

You know where this is going. I paste the same code within DNN's HTML module ... still looks great inside the FSCK preview. Then I save, or preview, and blammo. Text all over the place, doesn't seem to be aware of the existence of the containing HTML module.

Been at this about 5 hours at this point with no luck. Any suggestions would be deeply appreciated. 
 
New Post
4/7/2011 8:49 AM
 
Kind of hard to tell exactly w/ out seeing the HTML, but my first thought is that you should wrap the whole section in a div w/ a position:relative. This gives the absolute positioned items something to "attach" to.


Ralph Williams, Jr.
UX Designer / Front-End Web Developer
www.RalphWilliams.com
Ralph Williams Consulting
Twitter: twitter.com/ralphwilliams

Professional DNN7: Open Source .NET CMS Platform
 
New Post
4/7/2011 12:38 PM
 
Thanks -- the following actually worked OK:

#LeftCol
        {
            float: left;
            top: 10px;
            width: 25%;
        }
        #MidCol
        {
            top: 10px;
            float: left;
            width: 40%;
        }
        #RightCol
        {
            top: 10px;
            float: right;
            width: 35%;
        }
        #StoverBox
        {
            padding-left: 30%;
            float: none;
            width: 60%;
        }

Not ideal, but functional. I'll give your div-within-div idea a try, though -- it's closer to what I was actually looking for, if it works. Thanks. 
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Div positioning within HTML moduleDiv positioning within HTML module


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