|
|
Posted by Ben C on 11/11/06 22:08
On 2006-11-11, Mike <mikesal3731@hotmail.com> 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:inquiries@bottlepal.com">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"> </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>
>
Navigation:
[Reply to this message]
|