?
Solved

Help with HTML

Posted on 2016-11-04
7
Medium Priority
?
56 Views
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>
0
Comment
Question by:HLRosenberger
[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
  • 4
  • 3
7 Comments
 
LVL 58

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.
0
 
LVL 1

Author Comment

by:HLRosenberger
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>
0
 
LVL 1

Author Comment

by:HLRosenberger
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;"   ??
0
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 58

Accepted Solution

by:
Julian Hansen earned 2000 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.
0
 
LVL 1

Author Comment

by:HLRosenberger
ID: 41874532
ah, got it.   understand.
0
 
LVL 1

Author Closing Comment

by:HLRosenberger
ID: 41879446
Thanks!
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41879907
You are welcome.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

765 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