How to make certain elements stand out in your web site
I've just been trawling through my old newsletters and found a few tips worth passing on.
How to make certain elements stand out in your web site.
1. Using the pre tags.
If you use <pre> text</pre> your text will be different from your HTML text and therefore stand out.
2. You can use a Vertical graphic bar next to a table to make that stand out.
Make that graphic in a graphic editor.
Make a new gif 2 pixels wide and 400 pixels in height. Fill it with the
colour you prefer.
Call it vertbar.gif or whatever.
Enter that gif in your HTML document as so:
<IMG SRC="images/vertbar.gif" width=2 height=770 align="left">
That will make the gif left of your text.
If you want it to be right of yout text make it align="right"
You will need to adjust the gif height according to the page size.
3. Make a transparent gif to separate pictures from text.
Once again use your graphic editor to make a gif with a transparent background.
In Paint shop pro your new image can be set to transparent when you open
it.
Make the size about 8 pixels in width and 8 in height.
Call it transparent.gif or whatever.
Insert it into your HTML page like the other gif
<img src="images/transparent.gif" width="16" height="16"align="left">
Change the align factor if need be.
You can stretch the length according to the page later.
4. Place a coloured line next to a paragraph.
| <div style="border-left:4px solid #ff0000;font:11px verdana;padding-left:5px;">paragraph here </div> |
Change colours and font to suit
5. Have a line with a yellow background.
Place in BODY
| <span style="font-family:verdana,helvetica; font-size:12px; color:000000; background:dddddd;"><b>From <u style="background:ffffaa;">Oz Web Hub.</u></b></span> |
Change colours and font to suit.
6. Place a box around a paragraph
Place in BODY
You can alter this to suit: eg change width, font, border etc.
| <p style="border:1px solid #000000;padding:5px;font:11px verdana;width : 200px">your paragraph text here<p> |