newbie: ? valign top how ?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I have seen on lots of sites with a menu on top of page.
Home LINK LINK LINK 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.

thanks darren

Re: newbie: ? valign top how ?

Darren & Linda Ingall wrote:

Quoted text here. Click to load it

A cell? Have a read of

Quoted text here. Click to load it

Alter the margin and padding of the body element with CSS.

David Dorward       < <
                     Home is where the ~/.bashrc is

Re: newbie: ? valign top how ?

Darren & Linda Ingall wrote:
Quoted text here. Click to load it

I had the same question about a month ago and figured it out by using
examples from other people's websites.  Here's what I did:

<!-- Eliminate the left and top margin in the body -->
<BODY topmargin=0 leftmargin=0>
<!-- 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>

You can avoid using tables by using div combinations like this:

<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]

The first div tag establishes a box within the body inside which the
second div tag is used to place stuff exactly where you want it.  Do a
Google search on "style position css" and you'll get all kinds of good
info.  You can also check out the source from my website below for
examples of what I did.

Happy New Year!

Chris Vancouver

Increase hits to your website and earn e-gold - place
your ad image in the Dynamic Masterpiece today!

Re: newbie: ? valign top how ?

Chris Vancouver wrote:
Quoted text here. Click to load it

Pity you picked bad web sites to copy...

Quoted text here. Click to load it

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,

Quoted text here. Click to load it

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
z-index: 0; is also probably useless in most cases.

Quoted text here. Click to load it

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.

Quoted text here. Click to load it

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.

Quoted text here. Click to load 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.

Quoted text here. Click to load it

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.


Site Timeline