|
|
Posted by Steve Pugh on 01/02/06 13:32
Chris Vancouver wrote:
> Darren & Linda Ingall wrote:
> > I have seen on lots of sites with a menu on top of page.
> > Home LINK LINK LINK etc...in a cell with a background
> > putting a cell in with a background is simple.
> > how can you align it with the absolute top of the page everything I try
> > leaves a 5 - 10 pixel gap at the top
> > an example would be great.
>
> 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.
> http://www.dynamicmasterpiece.com
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
Navigation:
[Reply to this message]
|