Adobe Community: Background with multiple vertical lines

Currently Being Moderated

Background with multiple vertical lines

May 6, 2012 10:18 AM

How do I accomplish a background with multiple vertical lines (and also very limited text) in a .htm file? Here is the example:

The background image is fixed position so it will not scroll.

The example shown was created using PowerPoint, using a textured background, then drawing vertical lines. I then created a narrow horizontal stripe (without the lines) and put the numbers over it so the lines would not run through the numbers.

The problem is that the x-positioning of the vertical lines is very crude (as you can see) and I want it precise. How could I do this using CSS? In searching the web I find examples of people saying use tables or borders for vertical lines. I don't think it is practical here. The webpages (there are over 100 of them) are thousands of lines long.

The vertical lines and numbers are helpful to the visitor following genealogy information with varying degrees of indenting. But I want the lines to line up with the indenting.

Alternatively if there is a way I can create the image with precision using a free application and then save it as a .jpg, I could solve the problem that way. Just don't know of such an application.

Thanks for your help.

1058 Views 10 Replies Latest reply: hans-g., May 7, 2012 6:13 PM

Replies

Currently Being Moderated

1. hans-g.,

May 6, 2012 11:00 AM in reply to jds zigzag

Report

Hello Jim,

"use tables" it's not perfectly a solution which you will give priority, but let's talk about it. I can show you this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabellen mit definierter Höhe und Breite</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
</tr>
<tr>
 <td width="4%" colspan="2" valign="top">3</td>
 <td width="4%" colspan="2">5</td>
 <td width="4%" colspan="2" valign="top">7</td>
 <td width="4%" colspan="2" valign="top">9</td>
 <td width="4%" colspan="2" valign="top">11</td>
 <td width="4%" colspan="2" valign="top">13</td>
 <td width="4%" colspan="2" valign="top">15</td>
 <td width="4%" colspan="2" valign="top">17</td>
 <td width="4%" colspan="2" valign="top">19</td>
 <td width="4%" colspan="2" valign="top">21</td>
 <td width="4%" colspan="2" valign="top">23</td>
 <td width="4%" colspan="2" valign="top">25</td>
 <td width="4%" colspan="2" valign="top">27</td>
 <td width="4%" colspan="2" valign="top">29</td>
 <td width="4%" colspan="2" valign="top">31</td>
 <td width="4%" colspan="2" valign="top">33</td>
 <td width="4%" colspan="2" valign="top">35</td>
 <td width="4%" colspan="2" valign="top">37</td>
 <td width="4%" colspan="2" valign="top">39</td>
 <td width="4%" colspan="2" valign="top">41</td>
 <td width="4%" colspan="2" valign="top">43</td>
</tr>
<tr>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
</tr>
</table>
</body>
</html>

Let's see us again!
Hans-Günter

|
Mark as:
Currently Being Moderated

2. jds zigzag,

May 6, 2012 2:59 PM in reply to hans-g.

Report

Thanks, Hans-Günter for the speedy suggestion.

Since my original posting I did discover how to control the line spacing in PowerPoint and therefore solved one of the problems. But the specification in PowerPoint is in inches and I want it in pixels so the vertical lines are in the correct x-axis positions on all monitors. My indents of the text (content) are in increments of 40px.

I have played with your proposed script and have a few questions. I deleted the width="100%" so I did not get lines all the way to the right edge and then could specify position in pixels. But I have not figured out how to have my content on top of the table, in ortherwords have the table of verticle lines as a background. Would I not need to have the table in a style? Or can I accomplish that with a z-axis callout?

Jim

|
Mark as:
Currently Being Moderated

3. Nancy O.,

May 6, 2012 3:26 PM in reply to jds zigzag

Report

Your design concept is flawed. Trying to align text over a background image with pixel perfect precision is impossible It's like trying to nail Jell-O to the ceiling. It won't stick. You can't control which browser settings and text sizes people use. So while you may get it to temporarily look right on your system, it will never be exactly the same for everyone.

Hans suggestion of using a table is probably the best you can do.

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

|
Mark as:
Currently Being Moderated

4. jds zigzag,

May 7, 2012 9:33 AM in reply to Nancy O.

Report

Nancy, I know I don't have a great understanding of much of this but please help me with this one. If the background has vertical lines at 50px, 100px, 150px, etc from the left margin, and the content has various levels of padding-left, some at 50px, 100px, etc. should they not line up reasonably well regardless of browser?

Thanks for your help.

Jim

|
Mark as:
Currently Being Moderated

5. Nancy O.,

May 7, 2012 11:00 AM in reply to jds zigzag

Report

For something like this on the web, it just makes more sense to use tables. See screenshot.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tables</title>

<style type="text/css">

body {background:#FFFFCC;}

table {
padding:0 150px 0 12px;
color:#663300;
width: 400px;
border-bottom:3px solid #993300;
border-collapse::collapse;
}

tr,td {
border-right: 1px dotted #996600;
height: 45px;
width: 50px}

td {width:50px; font-size: 11px;}

tr.bottom {
vertical-align:bottom;
text-align:right;
color: #336699;
font-size:14px;
font-weight:bold;}

</style>
</head>

<body>
<table cellpadding="5" cellspacing="0">
<tr>
<th colspan="10">Table heading</th>
</tr>
<tr>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
</tr>
<tr>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
</tr>
<tr class="bottom">
 <td>50</td>
 <td>100</td>
 <td>150</td>
 <td>200</td>
 <td>250</td>
 <td>300</td>
 <td>350</td>
 <td>400</td>
 <td>450</td>
 <td>500</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0">
<tr>
<th colspan="10">Table heading</th>
</tr>
<tr>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
</tr>
<tr>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
 <td>some text</td>
</tr>
<tr class="bottom">
 <td>50</td>
 <td>100</td>
 <td>150</td>
 <td>200</td>
 <td>250</td>
 <td>300</td>
 <td>350</td>
 <td>400</td>
 <td>450</td>
 <td>500</td>
</tr>
</table>
</body>
</html>

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

|
Mark as:
Currently Being Moderated

6. hans-g.,

May 7, 2012 1:07 PM in reply to jds zigzag

Report

Hello Jim,

may I complete Nancy's answer. Looking to your screenshot above, I note that you want to group two columns to a single one. That's what I considered in my suggestion. To make it more clear here a screenshot where I filled some columns with text:

here I my modified source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabellen mit definierter Höhe und Breite</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
 <td width="2%" height="250" valign="top">some
 text(3a)</td>
 <td width="2%" valign="top">some
 text(3b)</td>
 <td width="2%" valign="top">some
 text(5a)</td>
 <td width="2%" valign="top">some
 text(5b)</td>
 <td width="2%" valign="top">some
 text(7a)</td>
 <td width="2%" valign="top">some
 text(7b)</td>
 <td width="2%" valign="top">aso</td>
 <td width="2%" valign="top">aso</td>
 <td width="2%" valign="top">aso</td>
 <td width="2%" valign="top">aso</td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
 <td width="2%" valign="top"> </td>
</tr>
<tr>
 <td width="4%" colspan="2" valign="top">3</td>
 <td width="4%" colspan="2">5</td>
 <td width="4%" colspan="2" valign="top">7</td>
 <td width="4%" colspan="2" valign="top">9</td>
 <td width="4%" colspan="2" valign="top">11</td>
 <td width="4%" colspan="2" valign="top">13</td>
 <td width="4%" colspan="2" valign="top">15</td>
 <td width="4%" colspan="2" valign="top">17</td>
 <td width="4%" colspan="2" valign="top">19</td>
 <td width="4%" colspan="2" valign="top">21</td>
 <td width="4%" colspan="2" valign="top">23</td>
 <td width="4%" colspan="2" valign="top">25</td>
 <td width="4%" colspan="2" valign="top">27</td>
 <td width="4%" colspan="2" valign="top">29</td>
 <td width="4%" colspan="2" valign="top">31</td>
 <td width="4%" colspan="2" valign="top">33</td>
 <td width="4%" colspan="2" valign="top">35</td>
 <td width="4%" colspan="2" valign="top">37</td>
 <td width="4%" colspan="2" valign="top">39</td>
 <td width="4%" colspan="2" valign="top">41</td>
 <td width="4%" colspan="2" valign="top">43</td>
</tr>
<tr>
 <td width="2%" height="250" valign="top">some
 text(3c)</td>
 <td width="2%" height="250" valign="top">some
 text(3d)</td>
 <td width="2%" height="250" valign="top">some
 text(5c)</td>
 <td width="2%" height="250" valign="top">some
 text(5d)</td>
 <td width="2%" height="250" valign="top">some
 text(7c)</td>
 <td width="2%" height="250" valign="top">some
 text(7d)</td>
 <td width="2%" height="250" valign="top">aso</td>
 <td width="2%" height="250" valign="top">aso</td>
 <td width="2%" height="250" valign="top">aso</td>
 <td width="2%" height="250" valign="top">aso</td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
 <td width="2%" height="250" valign="top"> </td>
</tr>
</table>
</body>
</html>

Hans-Günter

P.S.
Couldn't answer earlier because of Adobes Forum Update.

|
Mark as:
Currently Being Moderated

7. jds zigzag,

May 7, 2012 4:35 PM in reply to hans-g.

Report

I am sorry. I now realize the misunderstanding that we apparently have. In my original post I said I needed a background with limited text. The screenshot I gave was the background only. The limited text was the numbers 5, 7, 9, etc.

The content of the webpage is then paragraphs with varying degrees of indent. Here is a screenshot showing the background with the content on top:

I put a little extra vertical space in on the example to clearly show the relationship of the numbers with the vertical lines. As the content scrolls (and the background does not) the content scrolls over the numbers.

A webpage, if printed, might be 30 pages long. The vertical lines and numbers are helpful in the reader understanding and following generations.

The content is indented with padding-left callouts, eg. padding-left="40px", padding-left="80px", etc.

Hence my thought that if the vertical lines were at 40px points along the x-axis and the content was called out in similar 40px increments then the paragraphs should line up with the vertical lines. Is this not correct?

And also for needing the vertical lines in a background image.

Hopefully you will continue to respond. I appreciate all the effort you have already put into this.

Jim

|
Mark as:
Currently Being Moderated

8. Nancy O.,

May 7, 2012 4:47 PM in reply to jds zigzag

Report

By default, background images don't print from browsers. So that idea may fizzle. But now that we understand what you're trying to do, I think you just need to run with it and experiment a little.

Make a basic page with your background-image and use definition lists for your content.
http://www.maxdesign.com.au/articles/definition/

Test in all browsers/devices with various settings. It should work OK.

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

|
Mark as:
Currently Being Moderated

9. hans-g.,

May 7, 2012 6:11 PM in reply to jds zigzag

Report

Hallo Jim, ach sooo!

Here it's bedtime long ago BUT now I for my part wanted to find (in addition to Nancy) a possible solution within DW. In doing so, I casually discovered "white-space" and its various parameters. The result was:

You can have a look here: http://hansgd.de/AdobTest/Tabulator/TabulatorNur.php.

The advantage of this solution is in my eyes that you can position the distances very accurately with the spacebar.

Good luck!
Hans-Günter

|
Mark as:
Currently Being Moderated

10. hans-g.,

May 7, 2012 6:13 PM in reply to jds zigzag

Report

Hi Jim,

and in addition, here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>white-space</title>
<style type="text/css">
#editor { white-space:pre; }
body {
background-image: url(TabSpalten.jpg);
background-repeat: no-repeat;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>



 The paragraph you are reading here,
 was defined as pre-defined.

 Line breaks should be interpreted in such a manner
 as you entered them in the code view editor.

 Der Absatz, den Sie gerade lesen,
 wurde als predefiniert definiert.

 Zeilenumbrüche sollten dabei so interpretiert
 werden, wie sie in der Code-Ansicht eingegeben wurden.

</body>
</html>

Hans-Günter

|
Mark as: