Solved

Help with HTML

Posted on 2016-11-04
7
38 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
  • 4
  • 3
7 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
Comment Utility
ah, got it.   understand.
0
 
LVL 1

Author Closing Comment

by:HLRosenberger
Comment Utility
Thanks!
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now