Help with HTML

Posted on 2016-11-04
Last Modified: 2016-11-08
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>
Question by:HLRosenberger
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
  • 4
  • 3
LVL 56

Expert Comment

by:Julian Hansen
ID: 41874234
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.

Author Comment

ID: 41874391
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>

Author Comment

ID: 41874433
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;"   ??
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 56

Accepted Solution

Julian Hansen earned 500 total points
ID: 41874478
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.

Author Comment

ID: 41874532
ah, got it.   understand.

Author Closing Comment

ID: 41879446
LVL 56

Expert Comment

by:Julian Hansen
ID: 41879907
You are welcome.

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
href return to normal window 5 31
What cart is this? 2 37
html form layout 4 36
CSS question 4 27
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

733 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