Solved

Problems adapting HTML page code to work in a pane in a DotNetNuke site

Posted on 2007-11-16
5
195 Views
Last Modified: 2010-04-07
For some reason, when I enter this code in the edit module of a pane in DotNetNuke, while it looks great in the edit window, when you go to view it, the resulting content goes to the upper left hand corner rather than staying within its pane. Please take a look at the code, and let me know if there's a way to fix it so that the content stays within its area of the page. I created the code in Dreamweaver, and it works fine in a normal html page. Please let me know if there's another area where I might want to post htis.

Thanks!

John
<table width="696" border="0">
    <tbody>
        <tr>
            <td>
            <div id="Layer1" style="z-index: 3; left: 0px; width: 200px; position: absolute; top: 0px; height: 115px"><img height="813" alt="" width="696" src="/Portals/0/HTMLBody/MPlx_bkgrnd7_Feather_wLogo.jpg" /></div>
            <div class="style4" id="Layer3" style="z-index: 4; left: 98px; width: 529px; position: absolute; top: 415px; height: 115px">The MicroPlex Coil System (MCS) consists of an implantable platinum detachable coil attached to a fluid injection delivery system called a Delivery Pusher. The delivery system consists of a variable stiffness tube with a retention sleeve that attaches the Delivery Pusher tot the implantable coil. An introducer sheath assists in the delivery of the implantable coil into the microcatheter.<br />
            <br />
            The MCS is available in 18- and 10-compatible systems that are compatible with various microcatheters. There are two basic configurations, Complex<br />
            (3-dimensional) coils in various diameters and lengths to establish the initial framework, and Helical coils in various diameters and lengths for filling.</div>
            <div id="Layer2" style="z-index: 5; left: 0px; width: 696px; position: absolute; top: 131px; height: 115px"><img height="240" alt="" width="696" src="/Portals/0/HTMLBody/MPlx_img6.jpg" /></div>
            <div id="Layer4" style="z-index: 6; left: 98px; width: 518px; position: absolute; top: 647px; height: 115px"><span class="style4">Framing: A complex coil with unmatched conformability<br />
            Filling: A full line of 10 and 18 sized helical coils offering superior deliverability <br />
            Finishing: The HyperSoft finishing coil is the softest and most flexible finishing coil available </span>
            <p class="style8">Refer to the Instructions For Use supplied with each product for additional information.</p>
            </div>
            =</td>
        </tr>
    </tbody>
</table>

Open in new window

0
Comment
Question by:gabrielPennyback
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 6

Expert Comment

by:ErikVB
ID: 20437180
the problem is that you are using fixed positioning inside the html. The text/html module can only be used for basic html, and if you are using positioning, then only relative positioning should be used. Any other kind of design should be done in the container definition, or in the skin
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 20442944
Hi Erik,
Thanks for getting back to me. Are you saying that as long as I put everything in a container, then I'll be able to do it? That woulf be great.

John
0
 
LVL 6

Accepted Solution

by:
ErikVB earned 500 total points
ID: 20443009
well.. yes and no

It would be beneficial to you to brush up on DNN skinning. There is some documentation available on the dotnetnuke.com  website, and recently a book on dnn skinning was released.

The problem is that absolute positioning really doesn't work very well in DNN, because page layout is very dynamic (you can select another skin and the page will look completely different). So while you can put your stuff inside a container, i would advise against that, and only do that if you know what you are doing ;)

Is there a reason why you want to use absolute positioning in the first place? Could you use a table as an alternative?
Also: you might consider creating a custom skin that resembles the absolute positioning you are trying to achieve, and put the html content in more than one module
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 20445063
Hi Erik,
Re: "Is there a reason why you want to use absolute positioning in the first place?"
     No not at all. How would I code it to get relative positioning?  

Thanks,

John

0
 
LVL 6

Assisted Solution

by:ErikVB
ErikVB earned 500 total points
ID: 20447790
with the risk of sounding shmuck, please read up on your html and xhtml and css. Also, reading up on dnn skinning would not hurt you. DNN offers very advanced layout options.

From your code, i see you want to use a background image. Normally, you would either define that in your skin, or in the container, both from css though.

I am sorry if i cannot help you much further, i am not really a skinning expert. Mind you: you are asking this question in a software development forum.. ;). Have you tried the DNN skinning forum? There are some very knowledgable people around there...
0

Featured Post

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

751 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