Skip navigation
shhQuiet
shhQuiet Calculating status...
Currently Being Moderated

Problem with Absolute Positioning

Jun 13, 2012 7:49 AM

     I have a LARGE number of web pages (>1500) that have fields that are absolutely positioned.  I have to process these pages (JSPs) and create a temporary HTML file that will be edited in Dreamweaver.  The editing will only modify the CSS file: the temporary HTML is throw-away.

 

The goal is to use Dreamweaver to organize fields on the screen and have it modify only the position in the CSS.

 

My problem is that when I create the temporary HTML, it looks fine in the browser, but Dreamweaver displays the elements using a normal flow, and not using the absolute position.  I have checked the "AP Elements" tab in DW, and it shows all my fields and the "Prevent overlaps" checkbox is UNCHECKED.

 

Any guidance will be appreciated...

 

Here is a small HTML example (CSS below that):

 

<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>CL0350</title>
          <link rel="stylesheet" href="example.css">
          <style type="text/css">
body {
     background-color: #efe;
}


#formContainer {
     width: 802px;
     height: 564px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold;
     border: 3px #444 solid;
     background-color: white;
     position: relative;
}
</style>
     </head>
     <body>

          <div id="formContainer">
               <div id="lblEPP_MEMBER_NBR">Member#</div>
               <div id="lblEPP_YMDRCVD">Recv Dt</div>
<input id="txtEPP_MEMBER_NBR"><input id="txtEPP_YMDRCVD"></div>
     </body>
</html>

 

And finally, the CSS:

#lblEPP_MEMBER_NBR
{
white-space:nowrap;
POSITION:absolute;
left:17px;
top:43px;
}
#txtEPP_MEMBER_NBR
{
POSITION:absolute;
LEFT:17px;
TOP:62px;
WIDTH:110px;
}
#lblEPP_YMDRCVD
{
white-space:nowrap;
POSITION:absolute;
LEFT:542px;
TOP:43px;
}
#txtEPP_YMDRCVD
{
POSITION:absolute;
LEFT:542px;
TOP:62px;
WIDTH:92px;
}
653 Views   6 Replies   Latest reply: MurraySummers, Jun 13, 2012 11:29 AM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    Jun 13, 2012 7:51 AM   in reply to shhQuiet
    Report

    Any chance you could upload one of these temporary pages with its dependent files and give us a link?  That would make our efforts much simpler.

     

    Also, how do you want these fields arranged on the screen, and why is absolute positioning used at all for that purpose?  I must admit I have never seen form fields managed that way. I usually do forms as ordered lists, with labels and fields floated into place within their parent <li> element.  Either way, though, the placement on the page is exclusively a function of the CSS, and it should be easy to change that.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    2. MurraySummers,
    Jun 13, 2012 7:57 AM   in reply to MurraySummers
    Report

    Ahh - nevermind.  I see you fixed your code....  Now I'll take a look.

     

    On this page in DW, the fields seem to be placed using the absolute positioning, not the normal flow.  Is the additional CSS contained in the externally linked CSS file?

     

    <html>

         <head>

              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

              <title>CL0350</title>

              <link rel="stylesheet" href="example.css">

              <style type="text/css">

    body {

         background-color: #efe;

    }

     

     

     

     

    #formContainer {

         width: 802px;

         height: 564px;

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

         font-size: 11px;

         font-weight: bold;

         border: 3px #444 solid;

         background-color: white;

         position: relative;

    }

    #lblEPP_MEMBER_NBR

    {

    white-space:nowrap;

    POSITION:absolute;

    left:17px;

    top:43px;

    }

    #txtEPP_MEMBER_NBR

    {

    POSITION:absolute;

    LEFT:17px;

    TOP:62px;

    WIDTH:110px;

    }

    #lblEPP_YMDRCVD

    {

    white-space:nowrap;

    POSITION:absolute;

    LEFT:542px;

    TOP:43px;

    }

    #txtEPP_YMDRCVD

    {

    POSITION:absolute;

    LEFT:542px;

    TOP:62px;

    WIDTH:92px;

    }</style>

         </head>

         <body>

     

     

              <div id="formContainer">

                   <div id="lblEPP_MEMBER_NBR">Member#</div>

                   <div id="lblEPP_YMDRCVD">Recv Dt</div>

    <input id="txtEPP_MEMBER_NBR"><input id="txtEPP_YMDRCVD"></div>

         </body>

    </html>

     
    |
    Mark as:
  • shhQuiet
    Currently Being Moderated
    3. shhQuiet,
    Jun 13, 2012 8:24 AM   in reply to MurraySummers
    Report

    Sorry for the false start- this is my first post to Adobe forums...

     

    Yes, it is unusual, but I have inherited this task

     

    You can see a working demo here:

     

    http://jsfiddle.net/5Edkf/

     

    The pane in the lower right shows the output, which looks fine (in my browser: Chrome)

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    4. MurraySummers,
    Jun 13, 2012 8:30 AM   in reply to shhQuiet
    Report

    Tell me again what the problem is, please?  And which DW version are you using?

     
    |
    Mark as:
  • shhQuiet
    Currently Being Moderated
    5. shhQuiet,
    Jun 13, 2012 11:28 AM   in reply to MurraySummers
    Report

    I am using DW CS6.

     

    I think I have isolated the problem:  Since this will be a locally-edited file, I had the URL for the stylesheet specified as a normal Windows file path (except with forward-leaning slashes ) and it was working in Chrome.  When I added "file:///", it started working in DW, even though DW would load the CSS and show it in a tab, it was not processing it.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    6. MurraySummers,
    Jun 13, 2012 11:29 AM   in reply to shhQuiet
    Report

    Yep - that would do it.  If the link isn't right, the file will not be properly located.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points