Improve company productivity with a Business Account.Sign Up

x
?
Solved

Help with HTML

Posted on 2016-11-04
7
Medium Priority
?
73 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 62

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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 62

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 62

Expert Comment

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

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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 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…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

585 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