Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > newbie: ? valign top how ?

Reply
Thread Tools

newbie: ? valign top how ?

 
 
Darren & Linda Ingall
Guest
Posts: n/a
 
      12-31-2005
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.

thanks darren


 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      12-31-2005
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.


A cell? Have a read of http://allmyfaqs.net/faq.pl?Tableless_layouts

> how can you align it with the absolute top of the page everything I try
> leaves a 5 - 10 pixel gap at the top


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

http://www.w3.org/TR/CSS2/box.html#propdef-margin
http://www.w3.org/TR/CSS2/box.html#propdef-padding

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
 
 
 
Chris Vancouver
Guest
Posts: n/a
 
      01-02-2006
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.
>
> thanks darren
>
>


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

http://www.dynamicmasterpiece.com
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      01-02-2006
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 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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
vAlign won't work VB Programmer ASP .Net 2 04-12-2005 10:31 PM
valign=top how does it work =?Utf-8?B?QXJuZQ==?= ASP .Net 2 12-07-2004 12:33 PM
Valign=top doesn't always work =?Utf-8?B?QXJuZQ==?= ASP .Net 2 12-07-2004 01:44 AM
valign=top doesn't always work =?Utf-8?B?QXJuZQ==?= ASP .Net 2 12-06-2004 10:21 PM
valign in DataGrid Column Cezar ASP .Net 1 12-03-2003 10:08 PM



Advertisments