Chris said:
I had the same question about a month ago and figured it out by using
examples from other people's websites.
Pity you picked bad web sites to copy...
<!-- Eliminate the left and top margin in the body -->
<BODY topmargin=0 leftmargin=0>
Only works in some browsers and is non-standard HTML. Use CSS instead.
Set margin: 0; and padding: 0; for he body element in your stylesheet,
<!-- Create a table that has no margin and no padding -->
<TABLE style="position:relative; left:0; top:0; z-index:0;" border=0
cellspacing=0 cellpadding=0>
position: relative; left: 0; top: 0; is the same as doing nothing at
all. It says "position this box relative to its natural position by
moving it zero pixels from the left and zero pixels from the top". The
left and top properties can always be dropped in this case. The
position property can also be dropped if you have no positioned child
elements.
z-index: 0; is also probably useless in most cases.
You can avoid using tables by using div combinations like this:
Depends on what he's doing with his tables. Yes, tables for layout can
be replaced by more semantically neutral elements, but div soup plus
absolute positioning is rarely the best way to do it.
<div style="position:relative; left:0 top:0; z-index:0;">
<div style="position:absolute; left:x top:y; z-index:1;">
[stuff you want to place exactly in x,y position]
</div>
</div>
The first div tag establishes a box within the body inside which the
The first div element does nothing at all except provide a basis for
the positioning of any child elements. The left and top elements can be
removed. If this div is the first child of the body then it's useless
as all its doing is creating a basis for positioning that's identical
the default basis anyway.
second div tag is used to place stuff exactly where you want it.
And would work exactly the same without the presence of the first div
element. Absolute positioning is a very powerful tool and should be
used with caution as it is very easy to create pages that are totally
unreadable when the user has an browser window size and/or text size
that differs from yours by even a small amount.
You can also check out the source from my website below for
examples of what I did.
A prime example. Is the "e-gold" box supposed to overlap the "Dynamic
Masterpiece" heading like that? If the nav buttons are supposed to half
overlap the light-grey background then wouldn't it be better to make
the bottom corners light-grey or transparent rather than the same
dark-grey as the page background? I cant read the 'commissions paid'
line because it's the same colour as the light-grey background.
Steve
