1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

You might want to bookmark this page.

There is no link to this page

in the gallery of doodads.

 

How to Make

A Doodad

I don't want instructions.

Show me the graphics.

Shortest Explanation

Easy to Resize

Use many copies of one animated line to create a layout as seen above.  Set the width of each line in pixels or percents.  You might want to use the code below.  You might want to change the red code.

<p style="margin-top: 0; margin-bottom: 6

" align="center">

<img border="0"

src="major_001.gif" width="40%" height="2"></p>

The code above establishes the topmost line at 40% wide and 2 pixels high with a space of 6 pixels between it and the next line down.

And so forth.

For more detail (and CSS) read the explanation below.

 

Visit Doodad Gallery 1

 

Full Explanation

Easy to Resize

Step 1: Build your doodad inside of a table or division.  By resizing the width of your table, you can resize the width of your doodad in seconds without resizing each line.  Set a width for the table, either in pixels or percent.

Easy to Resize

Step 2:  Paste the following code between the two head tags of your page for web.  The code in red can be changed to meet your needs.

<style type="text/css">

.style1 {

text-align: center;

}

</style>

Step 3:  Use many copies of ONE animated line.  Use the following code for each copy of the animated line that you place on your page.

<p class="style1">

<img alt="doodad" src="name_of_the_line.gif

" width="50" height="1"

style="padding: 0px; margin: 2px 0px 2px 0px;

width: 80%; height: 2px" class="style1" /></p>

Change the code in red to suit your needs.  For instance, the topmost animated  line might be 40% wide and the next line down might be 50% wide, then 60%, 70%, etc.  You can set widths in pixels if you prefer.

Each line can APPEAR TO BE of any size you like -- of any height and width -- thanks to the magic of CSS.

DONE

 

Visit Doodad Gallery 1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16