newbie: ? valign top how ?

Discussion in 'HTML' started by Darren & Linda Ingall, Dec 31, 2005.

  1. 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
    Darren & Linda Ingall, Dec 31, 2005
    #1
    1. Advertising

  2. 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
    David Dorward, Dec 31, 2005
    #2
    1. Advertising

  3. 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: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
    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
    Chris Vancouver, Jan 2, 2006
    #3
  4. Darren & Linda Ingall

    Steve Pugh Guest

    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
    Steve Pugh, Jan 2, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Cezar

    valign in DataGrid Column

    Cezar, Dec 2, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    954
    g pavlov
    Dec 3, 2003
  2. =?Utf-8?B?QXJuZQ==?=

    valign=top doesn't always work

    =?Utf-8?B?QXJuZQ==?=, Dec 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    413
    =?Utf-8?B?QXJuZQ==?=
    Dec 6, 2004
  3. =?Utf-8?B?QXJuZQ==?=

    valign=top how does it work

    =?Utf-8?B?QXJuZQ==?=, Dec 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    414
    =?Utf-8?B?QXJuZQ==?=
    Dec 7, 2004
  4. =?Utf-8?B?QXJuZQ==?=

    Valign=top doesn't always work

    =?Utf-8?B?QXJuZQ==?=, Dec 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    581
    Dave Fancher
    Dec 7, 2004
  5. VB Programmer

    vAlign won't work

    VB Programmer, Apr 11, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    827
    VB Programmer
    Apr 12, 2005
Loading...

Share This Page