0

I need to recreate the attached image in HTML so that it can be converted into a PDF dymanically using software that the client has.

I created a gif with a triangle-shaped transparency which lets the varying sizes of green, yellow, and red bars show through underneath. The bars vary in size based on survey results.

This technique worked great when using CSS to easily position the image layer on top of the three color rows but alas, I've been told this has to be done strictly in old school HTML (no CSS) because the PDF rendering software cannot handle CSS.

So, I finally get to my question...Is there any way to layer the transparent gif over the three rows using HTML with no CSS? The rows need to be table rows filled with color because they must change in height depending on the scores so I can't just create a single image out of them and stick them in the backround.

Any suggestions (that don't involve my mother and farm animals) are welcome.

Thanks!

Attachments sample.jpg 24.7 KB
4
Contributors
11
Replies
13
Views
8 Years
Discussion Span
Last Post by stymied2
0

I need to recreate the attached image in HTML so that it can be converted into a PDF dymanically using software that the client has.

I created a gif with a triangle-shaped transparency which lets the varying sizes of green, yellow, and red bars show through underneath. The bars vary in size based on survey results.

This technique worked great when using CSS to easily position the image layer on top of the three color rows but alas, I've been told this has to be done strictly in old school HTML (no CSS) because the PDF rendering software cannot handle CSS.

So, I finally get to my question...Is there any way to layer the transparent gif over the three rows using HTML with no CSS? The rows need to be table rows filled with color because they must change in height depending on the scores so I can't just create a single image out of them and stick them in the backround.

Any suggestions (that don't involve my mother and farm animals) are welcome.

Thanks!

Can you post your existing page code so we can judge if there is a possibility to emulate it?

0

Can you post your existing page code so we can judge if there is a possibility to emulate it?

I was still in sort of testing mode but here's the look that I going after...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
<body>
<table style="width:1000px;text-align:center" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="background-color:#547741;height:145px;width:1000px" align="center"><div style="position:absolute"><img src="triangle.gif" alt="" width="1000" height="145" /></div>
<table cellpadding="0" cellspacing="0" border="0">
<tr><td style="background-color:#741F18;width:1000px;height:20px"></td></tr>
<tr><td style="background-color:#E0C039;width:1000px;height:30px"></td></tr>
<tr><td style="background-color:#547741;width:1000px;height:95px"><div style="font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#ffffff;text-align:center">Engagement 78.1</div></td></tr>
</table>
</td>		
</tr>
</table>
</body>
</html>
Attachments triangle.gif 3.68 KB
0

Stymied,

Are you aware that with style="...." , you are using CSS?

If you need to avoid CSS completely (I'm not so sure whether you need to or not) then you would need to avoid inline style directives.

Airshow

0

Stymied,

Are you aware that with style="...." , you are using CSS?

If you need to avoid CSS completely (I'm not so sure whether you need to or not) then you would need to avoid inline style directives.

Airshow

Right. If I could use CSS I'd be done. What I need to do is recreate the look of the example code without CSS. I just posted that in response to a request.

0

I was still in sort of testing mode but here's the look that I going after...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
<body>
<table style="width:1000px;text-align:center" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="background-color:#547741;height:145px;width:1000px" align="center"><div style="position:absolute"><img src="triangle.gif" alt="" width="1000" height="145" /></div>
<table cellpadding="0" cellspacing="0" border="0">
<tr><td style="background-color:#741F18;width:1000px;height:20px"></td></tr>
<tr><td style="background-color:#E0C039;width:1000px;height:30px"></td></tr>
<tr><td style="background-color:#547741;width:1000px;height:95px"><div style="font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#ffffff;text-align:center">Engagement 78.1</div></td></tr>
</table>
</td>		
</tr>
</table>
</body>
</html>

Here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
      <body>
      <table width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
   <td bgcolor="#547741" height="145" width="1000" align="center"><div style="position:absolute"><img src="triangle.gif" alt="" width="1000" height="145" /></div>
   <table cellpadding="0" cellspacing="0" border="0">
   <tr><td bgcolor="#741F18" width="1000" height="20"></td></tr>
   <tr><td bgcolor="#E0C039" width="1000" height="30px"></td></tr>
   <tr><td bgcolor="#547741" width="1000" height="95"><div color="#ffffff" align="center"><font face="Arial, Helvetica, sans-serif" color="white" size="4" onclick="alert(window.getComputedStyle(this,null).fontSize)">Engagement 78.1</font></div></td></tr>
</table>
 </td>
  </tr>
</table>
</body>
</html>

this code is as primitive as it can get. I can't think of an absolute positioning emulator back than, so the overlaying of the image is impossible without style...

But!

I've just tested this code in this html to pdf creator and IT WORKS.
The only problem is the width you've given 1000px to it, and happen to use use a page format that is not wider than 800px.
check it out!

Edited by Troy III: n/a

0

I just tried the html to pdf on the link provided

xhtml strict
css3
reproduced the page perfectly

perhaps the probem is the type of conversion chosen
direct entered code rather than url

0

Here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
      <body>
      <table width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
   <td bgcolor="#547741" height="145" width="1000" align="center"><div style="position:absolute"><img src="triangle.gif" alt="" width="1000" height="145" /></div>
   <table cellpadding="0" cellspacing="0" border="0">
   <tr><td bgcolor="#741F18" width="1000" height="20"></td></tr>
   <tr><td bgcolor="#E0C039" width="1000" height="30px"></td></tr>
   <tr><td bgcolor="#547741" width="1000" height="95"><div color="#ffffff" align="center"><font face="Arial, Helvetica, sans-serif" color="white" size="4" onclick="alert(window.getComputedStyle(this,null).fontSize)">Engagement 78.1</font></div></td></tr>
</table>
 </td>
  </tr>
</table>
</body>
</html>

this code is as primitive as it can get. I can't think of an absolute positioning emulator back than, so the overlaying of the image is impossible without style...

But!

I've just tested this code in this html to pdf creator and IT WORKS.
The only problem is the width you've given 1000px to it, and happen to use use a page format that is not wider than 800px.
check it out!

The thing is, they use a specific pdf converter that is installed on their servers and works with their whole system. The thing won't accept any CSS at all so that's where it becomes, shall we say, challenging? I find myself doing all kinds of stuff using tables and such that a few simple div tags could handle. They are converting to a PDF system that accepts CSS but it's not ready for prime time quite yet.

0

The thing is, they use a specific pdf converter that is installed on their servers and works with their whole system. The thing won't accept any CSS at all so that's where it becomes, shall we say, challenging? I find myself doing all kinds of stuff using tables and such that a few simple div tags could handle. They are converting to a PDF system that accepts CSS but it's not ready for prime time quite yet.

You've asked about old school code, here it is. Atop of it, I even took my time and tested it against a good online converter and gave you other (to this forum section unrelated) information on where can you get your html converted into a correct pdf format. Almostbob, assured you that not only can it convert old time code correctly but xhtml strict using CSS3 too.

So I must add: there is one thing I can't do from here - I can't choose nor install a correct pdf converter on your system from here.

Regards.

Edited by Troy III: n/a

0

You've asked about old school code, here it is. Atop of it, I even took my time and tested it against a good online converter and gave you other (to this forum section unrelated) information on where can you get your html converted into a correct pdf format. Almostbob, assured you that not only can it convert old time code correctly but xhtml strict using CSS3 too.

So I must add: there is one thing I can't do from here - I can't choose nor install a correct pdf converter on your system from here.

Regards.

Thanks man, I truly appreciate the effort. As I stated from the beginning, I can't use any CSS on this one so I was wondering if anyone was aware of a way to accomplish the layering technique using the technology of a bygone era; no CSS, no JavaScript, etc.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.