how do I move my menu items??

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

Threaded View
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"
" ">
<html xmlns=" ">
<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%;


<div style="text-align: center;"><img
<hr size="4" color="FF0000" width="45%" align="center"
noshade="noshade" />

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

  <td width="15%" height="158" valign="top" class="style6"><p><span
class="style1"><a href="/AboutUs.html">About Us </a><br />
    <br />
          <br />
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"
alt="bottle opener" /></div></span>
<div align="right"><img
src=" " alt="Hit Counter"
width="87" height="32" align="center"/>

Re: how do I move my menu items??

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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.

Quoted text here. Click to load it

Site Timeline