how do I move my menu items??

Discussion in 'HTML' started by Mike, Nov 11, 2006.

  1. Mike

    Mike Guest

    Hi folks, I'm a novice, I have a simple website and would like to move
    my three menu items, About Us, Contact, and Buy Now both downward to be
    centered with the picture in the middle and to the right to be closer
    to this image. Any input would be greatly appreciated. Also, if you
    see any flaws in coding feel free to comment. It's strict xhtml and
    another thing I'm wondering is if it should be transitional. I've
    posted the source code below, thanks much for any comments, I read them
    all and appreciate them much even if I don't get a chance to thank you.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    />
    <title>Bottlepal - the fun gadget!</title>

    <style type="text/css">
    <!--
    ..style1 {font-family: "Comic Sans MS"}
    ..style6 {font-size: 18px}
    ..offset {
    margin-right: 15%;
    }
    -->
    </style>

    </head>

    <body>
    <div style="text-align: center;"><img
    src="http://i100.photobucket.com/albums/m16/mikesal3731/57b9272a.jpg"
    alt="logo"/></div>
    <hr size="4" color="FF0000" width="45%" align="center"
    noshade="noshade" />

    <table width="100%" border="0" cellpadding="0" cellspacing="0">

    <tr>
    <td width="15%" height="158" valign="top" class="style6"><p><span
    class="style1"><a href="/AboutUs.html">About Us </a><br />
    <br />
    <a href="mailto:">Contact</a><br />
    <br />
    <a
    href="http://ww6.aitsafe.com/cf/add.cfm?userid=88190363&product=Bottlepal
    bottle opener&price=4.99"><strong>Buy Now</strong></a></span></p>
    <p align="center">&nbsp;</p></td>
    <td width="85%" valign="top" class="style6"> <span
    style="text-align: center;"><div align="center"><img class="offset"
    src="http://i100.photobucket.com/albums/m16/mikesal3731/bottlepalRED.jpg"
    alt="bottle opener" /></div></span>
    <div align="right"><img
    src="http://www.bottlepal.com/tinc?key=hQRG3RlG" alt="Hit Counter"
    width="87" height="32" align="center"/>
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
     
    Mike, Nov 11, 2006
    #1
    1. Advertising

  2. Mike

    Ben C Guest

    On 2006-11-11, Mike <> wrote:
    > Hi folks, I'm a novice, I have a simple website and would like to move
    > my three menu items, About Us, Contact, and Buy Now both downward to be
    > centered with the picture in the middle


    Where it says 'valign="top"' on the <td> with the links in, change "top"
    to "middle".

    > and to the right to be closer to this image.


    You've set the width of the whole table to 100%, and the widths of the
    two cells to 15% and 85%.

    This is what's defining how close the text is to the image.

    First thing, you don't need to set all three values. Leave the table as
    width 100%, and only set a percentage on one of the two cells. The
    browser will work out the rest.

    If you want the text closer to the image, make the table a bit narrower
    (90% or 80% rather than 100%) and centre the table in the page (now that
    it doesn't take up all its width) by giving it margin: 0 auto.

    It depends what effect you want. The width of the image is given, it
    doesn't change with browser window size, so if you give the cell it's in
    a width in pixels rather than as a percentage, and just leave both the
    table and the other cell with automatic widths, you should always get
    the bottle in the middle of the page and the menu a constant offset from
    its left.

    > Any input would be greatly appreciated. Also, if you
    > see any flaws in coding feel free to comment.
    > It's strict xhtml and
    > another thing I'm wondering is if it should be transitional. I've
    > posted the source code below, thanks much for any comments, I read them
    > all and appreciate them much even if I don't get a chance to thank you.
    >
    ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    ><html xmlns="http://www.w3.org/1999/xhtml">
    ><head>
    ><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    > />
    ><title>Bottlepal - the fun gadget!</title>
    >
    ><style type="text/css">
    ><!--
    > .style1 {font-family: "Comic Sans MS"}
    > .style6 {font-size: 18px}
    > .offset {
    > margin-right: 15%;
    > }
    > -->
    ></style>
    >
    ></head>
    >
    ><body>
    ><div style="text-align: center;"><img
    > src="http://i100.photobucket.com/albums/m16/mikesal3731/57b9272a.jpg"
    > alt="logo"/></div>
    ><hr size="4" color="FF0000" width="45%" align="center"
    > noshade="noshade" />
    >
    ><table width="100%" border="0" cellpadding="0" cellspacing="0">
    >
    ><tr>
    > <td width="15%" height="158" valign="top" class="style6"><p><span
    > class="style1"><a href="/AboutUs.html">About Us </a><br />
    > <br />
    > <a href="mailto:">Contact</a><br />
    > <br />
    > <a
    > href="http://ww6.aitsafe.com/cf/add.cfm?userid=88190363&product=Bottlepal
    > bottle opener&price=4.99"><strong>Buy Now</strong></a></span></p>
    > <p align="center">&nbsp;</p></td>
    ><td width="85%" valign="top" class="style6"> <span
    > style="text-align: center;"><div align="center"><img class="offset"
    > src="http://i100.photobucket.com/albums/m16/mikesal3731/bottlepalRED.jpg"
    > alt="bottle opener" /></div></span>
    ><div align="right"><img
    > src="http://www.bottlepal.com/tinc?key=hQRG3RlG" alt="Hit Counter"
    > width="87" height="32" align="center"/>
    ></div>
    ></td>
    > </tr>
    ></table>
    ></body>
    ></html>
    >
     
    Ben C, Nov 11, 2006
    #2
    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. Bryan
    Replies:
    1
    Views:
    787
    Steven Cheng[MSFT]
    Mar 1, 2006
  2. gino
    Replies:
    12
    Views:
    1,066
    Keith Wansbrough
    Sep 1, 2004
  3. Tina Li
    Replies:
    0
    Views:
    309
    Tina Li
    Sep 18, 2003
  4. Larry Bud
    Replies:
    13
    Views:
    7,714
    Larry Bud
    Jan 7, 2008
  5. Microsoft Newsserver

    ASP.NET Menu Items - Dynamic Items Disapearing

    Microsoft Newsserver, Feb 22, 2008, in forum: ASP .Net
    Replies:
    1
    Views:
    399
    bruce barker
    Feb 22, 2008
Loading...

Share This Page