Author | Topic: Cheap trick | |
---|---|---|
Bruce Anderson | Cheap trick on Wed, 22 Apr 2009 11:47:19 -0500 Tasteful design often employs a horizontal rule with a title inserted in the middle of it as a way to set off a section of a form. However, the <hr /> tag does not accommodate inserting the text, and trying to do it with two <hr /> tags is clumsy. Here is a fake. Use the <img> tag to make the lines by giving it no image file for the source. Make the title attribute an empty string. Use background color for the line color and height for thickness. Presto, you have a stylish divider on your form. Example follows: <table> <tr> <td colspan=2 style="text-align:center; color:#ff0000;" > <img style="vertical-align:middle; background-color:#0000ff;" alt="--" title="" src="" width="100" height="3" > MY TITLE <img style="vertical-align:middle; background-color:#0000ff;" alt="--" title="" src="" width="100" height="3" > </td> </tr> <tr> <td style="text-align:center; color:#000000;" >Cell 1 text</td> <td style="text-align:center; color:#000000;" >Cell 2 text</td> </tr> </table> Of course, you can stick an actual image in, say, a rainbow slice, and your horizontal rule fitted to the height and width attributes will be double groovy. But then, that means you have to come up with the image, rather than the cheap promise of an image to be named at a later date like this fake is. | |
Les C. Cseh (ASAP Checks) | Re: Cheap trick on Mon, 21 Dec 2009 21:51:19 -0500 Thanks, Bruce! Les "Bruce Anderson" <banderson@graphical-db.com> wrote in message news:4c36a5b9$2565d40a$995@news.alaska-software.com... > Tasteful design often employs a horizontal rule with a title inserted in > the middle of it as a way to set off a section of a form. However, the > <hr /> tag does not accommodate inserting the text, and trying to do it > with two <hr /> tags is clumsy. Here is a fake. > > Use the <img> tag to make the lines by giving it no image file for the > source. Make the title attribute an empty string. Use background color > for the line color and height for thickness. Presto, you have a stylish > divider on your form. Example follows: > > <table> > <tr> > <td colspan=2 style="text-align:center; color:#ff0000;" > > <img style="vertical-align:middle; background-color:#0000ff;" > alt="--" title="" src="" width="100" height="3" > > MY TITLE > <img style="vertical-align:middle; background-color:#0000ff;" > alt="--" title="" src="" width="100" height="3" > > </td> > </tr> > > <tr> > <td style="text-align:center; color:#000000;" >Cell 1 text</td> > <td style="text-align:center; color:#000000;" >Cell 2 text</td> > </tr> > </table> > > Of course, you can stick an actual image in, say, a rainbow slice, and > your horizontal rule fitted to the height and width attributes will be > double groovy. But then, that means you have to come up with the image, > rather than the cheap promise of an image to be named at a later date like > this fake is. |