[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 68
  • Last Modified:

Help with HTML

I have HTML that is a "template" for a "document".   It has "variables" that are identified, like "%variable_one%" in the HTML.   Text substitution is done on the variables.  There can be multiple pages of the "document" where, say each page is a job that contains job info.  I'm try to come up with a way to merge the "pages" of the HTML into one HTML file.  The problem is that the "template" has divs that are hardcoded as far as location.  (See below). So while in code I can easily build one big HTML file for all the pages, browsing obviously does not work correctly due to the absolute position of div elements and other elements.

How can I get around this? How can I use each instance of the template to create "pages" that are not displayed at the same absolute location?  Ultimately I want to turn this HTML into a multi-page PDF.


<div id="Element2" class="Label" style="position: absolute;  left: 0px;  top: 124px;  width: 98px;  height: 16px;  z-index: 1; background-color: rgb(255, 255, 255); border-style: none;  color: rgb(0, 0, 0);  font-weight: bold;  font-family: 'Arial';  font-size: 9pt;  text-decoration: none;  font-style: normal;  text-align: left; ">Manufacturer:</div>
0
HLRosenberger
Asked:
HLRosenberger
  • 4
  • 3
1 Solution
 
Julian HansenCommented:
Well the obvious answer is remove the absolute positioning from the <div>'s

It looks like the html was generated with one of those mockup tools like the ones Adobe and Apple have (can't remember the names now) where there idea of layout is to position everything absolutely even to the point of wrapping different parts of the same sentence in its own div.

That's what you get from machine generated markup. If that is the case the only way I know of to sort it is to recreate the template according to standard markup strategies.
0
 
HLRosenbergerAuthor Commented:
It was create by some code I've inherited.  So, say I remove the  absolute positioning  from the div.  Then what happens where there are two div like this:

<div id="Element2" class="Label" style="left: 0px;  top: 124px;  width: 98px;  height: 16px;  z-index: 1; background-color: rgb(255, 255, 255); border-style: none;  color: rgb(0, 0, 0);  font-weight: bold;  font-family: 'Arial';  font-size: 9pt;  text-decoration: none;  font-style: normal;  text-align: left; ">Manufacturer:</div>
0
 
HLRosenbergerAuthor Commented:
ok, so I removed all occurrences of "position: absolute;"   I now gets "pages" of data, which makes sense.   That's good. But now the formatting is all messed up.  What did I need to do to retain the formatting,  without using  "position: absolute;"   ??
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Julian HansenCommented:
That is what I was trying to explain.

When you design a page that has a layout designed around normal flow of an HTML document that is different from laying out a page where everything is absolutely positioned.

The latter is designed so specific elements go in predetermined places at predetermined sizes.

This is why I said in my earlier post - you will probably have to re-design the page with flow layout rather than positioned.

There is no short answer here. Each situation is going to be different - the only real solution is manual slog.

If you don't have the html / css skills to match the original design using default browser flow then you will probably need to hire a professional to do the re-markup for you.

You could try creating a Gig here on EE and see if someone can do it for you.
0
 
HLRosenbergerAuthor Commented:
ah, got it.   understand.
0
 
HLRosenbergerAuthor Commented:
Thanks!
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now