|
|
|
| ||
General tips: always check your pages in Netscape AND Internet Explorer for compatibility. Netscape puts more automatic space around the pages and is much less forgiving about little misspellings or omitted end tags. Please e-mail me if you ever need help with a compatibility issue. Both browsers have many proprietary tags as well.
Known bugs:
Style Sheets are fun - but not so much for Netscape (version 4.7).
There is one anchor you SHOULD NOT tell your browser about: the "top of page" anchor:
All you have to do is put these tags anywhere farther down on your page:
<A href="#top">Top of page</A>
Clicking on the link will get you to the very top of the page! With any other anchor you will have to use these additional tags:
<A name="chapter one">Chapter one</A>
I used to put those tags just below the "Body" tag for the "top of page" anchor. That will NOT get you to the very top!
The seldom used "Title" attribute (NOT recognized by Netscape Communicator browser):
Recently I discovered this great attribute for hyperlink tags:
<A href="flowers.html" Title=" click here for more info ">Roses are beautiful</A>
It looks like this:
Roses
are beautiful. Now move your pointer over the link...
It is the equivalent of the ALT tag for images and it gives me
the chance for extra info without wasting space on my pages.
I decided to work in a resolution of 800x600. To make pages look good on higher resolution screens, the best way is to center the content. Now, centering text like these paragraphs is not always nice. But I am using TABLES a lot and the text within a table can have any format. But I am centering the whole table like this:
<Table align="center">
Here is an example of a centered table with different text formatting within:
| Florian Keller Florian Keller and his wife and daughter |
Florian Keller and his wife Florian |
Now the same table without the border, which shows you the page formatting power of tables:
| Florian Keller Florian Keller and his wife and daughter |
Florian Keller and his wife Florian |
Nobody has to know that this is a table! Here are the HTML tags of the table above:
<TABLE cellpadding="3"
cellspacing="4" border="0"
align="center">
<TR><TD align="center"
valign="top">any text</TD><TD
align="left"
valign="middle">text</TD></TR></TABLE>
By putting a table inside a table you can achieve amazing effects. Two examples:
The picture frame:
| On the right: see the beautiful picture: |
|
Here are the tags:
<TABLE border="0"
align="center"><TR><TD>text</TD><TD>
<TABLE border="3"><TD><img
src="picturefile.gif"></TD></TABLE>
</TD></TR></TABLE>
The second line is the nested table. Not so complicated, really, but a great effect!
Simple layering with a background image:
| This picture depicts: |
|
The tags:
<TABLE border="3"
align="center"><TR><TD>This picture
depicts:</TD><TD>
<TABLE border="0" cellspacing="0"
cellpadding="0" width="50"
height="50" background="picturefile.gif">
<TD align="center" valign="bottom">your
subject</TD></TABLE>
</TD></TR></TABLE>
Make sure you set the width and height to the
exact dimensions of your picture.
Instead of an image you can set a different background color for
individual cells with this tag:
<TD bgcolor="color name"></TD>
You can use all these color names, also for the text color with this tag: <FONT color="color name">text</FONT>
Spacing Attributes:
If you want your pictures
and graphics to "breathe," there are two attributes for
the <img> tag:
HSPACE (space on the sides) and VSPACE (space above and below)
First example: HSPACE on the first line only, and the images touch with no VSPACE:
Download 
today
and tomorrow!
The tags:
text <img src="picturefile.gif" hspace="3" align="middle"> text<BR>text <img src="picturefile.gif" align="middle"> text
Now with VSPACE and same HSPACE for both images:
Download today
and tomorrow!
The tags:
text <img src="picturefile.gif" hspace="3" vspace="3" align="middle"> text<BR>text <img src="picturefile.gif" hspace="3" align="middle"> text
Remember that HTML only recognizes ONE space between entities (text or images). Using HSPACE and VSPACE gives you the most precise control over image spacing. Especially the vertical spacing.
For extra spaces in text, use the NON BREAKING SPACE entity, like so:
Florian Keller
which looks like this: Florian Keller
and you can add any number of the ( ) entity.
The Pixel Shim:
A pixel shim is a tiny
transparent gif image that is also used for spacing in many
situations. One example:
If you want to add extra space ONLY on any one side of an image
or text paragraph.
You should use it this way:
<img src="transparent.gif" width="1" height="1" hspace="3" vspace="4">
Only alter the values for HSPACE and VSPACE for browser compatibility.
Here is a transparent gif for your private collection:
Overlapping table cells (Netscape chokes on this when images or background colors are added):
| row 1/cell 1 | row 1/cell 2 |
| row 2/cell 1 | |
| row 1/cell 1 | row 1/cell 2 | ||
| |||
The lines of the cell borders demonstrate nicely how the cell contents overlaps.
The nested tables on the right give you even more design options.
By using any other table attribute of your choice you can tweak the display in many ways.
Look at the bottom of my German homepage
to see how I implemented this concept for totally hiding the banner exchange (IE users only).
|
<TABLE cellpadding=5 border=1
align=left> <TR> <TD>row 1/cell 1</TD> <TD rowspan=2>row 1/cell 2</TD></TR> <TR><TD colspan=2 align=center>row 2/cell 1 </TD></TR></TABLE> |
|
<TABLE cellpadding=5 border=1
align=right> <TR><TD>row 1/cell 1</TD> <TD rowspan=2>row 1/cell 2</TD></TR> <TR><TD colspan=2> <TABLE border=1 bordercolor=red><TR> <TD>row 2/cell 1</TD> <TD>row 2/cell 2</TD></TR></TABLE> </TD></TR></TABLE> |
The secret is to COMBINE the two table cell attributes ROWSPAN and COLSPAN.
back to top
