HTMLHelp Forums > Picture will not stay in one place

Full Version: Picture will not stay in one place

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

MxV13

Oct 18 2009, 09:55 PM

http://disinclineddiscovery.webs.com/index.html

Follow that to my page, you'll see what i'm talking about. If you click the navigation links, that picture moves up an down. How do I get it to stay in one place?

HTML: (probably not all perfect, but works except for the picture.)

<head><title>Disinclined Discovery - Home</title></head>

<center><table cellspacing="1" cellpadding="0" border="0"
bgcolor="" id="shell" height="250" width="600">

<tr height="200"><td bgcolor="white">
<table id="banner" title="" border="0" width="168">

<tr><td><img src="http://i830.photobucket.com/albums/zz222/BloodCurdlingScreams/Mibba%20Profiles/2czor2p.jpg" border="0" alt="Photobucket"></a>

<tr height="10"><td bgcolor="black">
<table id="" title="" border="0" width="168">

<tr><td></td></tr>

</table>
</td>

</td></tr>
</table>
</td>

<td bgcolor="white">
<table title="" id="navigation" border="0" width="432">
<tr height="200"><td bgcolor="white">
<table id="navigation" title="" border="0" width="432">

<tr><td><style type="text/css">
a:link {
color: black;
background-color: white;
text-decoration: underline;
border: 0px solid white;

}
a:visited {
color: black;
background-color: white;
text-decoration: underline;
border: 0px solid white;

}
a:hover {
color: black;
background-color: white;
text-decoration: overline underline;
border: 0px solid black;
letter-spacing: 2px;

}

</style>
<p align="right"><font color="#D50000" size="5">N</font><i>avigation .</p></i>

<p><a href="http://disinclineddiscovery.webs.com/index.html"><b>H</b>ome</a><br><br>

<a href="http://disinclineddiscovery.webs.com/terms.htm"><b>T</b>erms</a><br><br>

<a href="http://disinclineddiscovery.webs.com/layoutgallery.htm"><b>L</b>ayout <b>G</b>allery</a><br><br>

<a href="http://disinclineddiscovery.webs.com/avatargallery.htm"><b>A</b>vatar <b>G</b>allery</a><br><br>

<a href="http://disinclineddiscovery.webs.com/requestcalendar.htm"><b>R</b>equest <b>C</b>alendar </a><br><br>

<a href="http://disinclineddiscovery.webs.com/contact.htm"><b>C</b>ontact <b>M</b>e</a></p>

</td></tr>

</table>
</td><br><br>

<tr><td><style type="text/css">
h4 { color: black; background: white; align: left; }
h3 { color: black; background: white; algin: right; text-decoration: overline; }
p { color: black; font-family: times new roman; }

</style>

<p align="right"><font color="#D50000" size="5">W</font><i>elcome .</i> </p>

</td></tr>

</table>
</td></tr></table>

<style type="text/css">
p { cursor: default }
h5 { cursor: default }
h6 { cursor: default }
a{ cursor: crosshair }
body {cursor: default }
</style>

<center><br><br><br>Copyright © 2009


<a href="http://www.quick-counter.net/" title="HTML hit counter - Quick-counter.net"><img src="http://www.quick-counter.net/aip.php?tp=di&tz=US%2FEastern" alt="HTML hit counter - Quick-counter.net" border="0" /></a>


Thanks for any help.

pandy

Oct 18 2009, 10:31 PM

You could align the image to the top of the table cell with the valign attribute. The table has different hight on different pages and that left cell stretches with it. The default value for valign is 'middle'. That's why the guy seems to move.

http://htmlhelp.com/reference/html40/tables/td.html

MxV13

Oct 19 2009, 08:50 PM

QUOTE(pandy @ Oct 18 2009, 11:31 PM)

I tried it, but it doesn't seem to work with the website.

Is there any way I can shorten just the column the the picture is in, without it changing sizes on each page? I think that should work.

pandy

Oct 19 2009, 09:22 PM

Yes, it works. Maybe you put it in the wrong TD? I see you have style="vertical-align" in the TD of the inner table. Is that what you tried? That won't do anything because that table isn't higher than the image. You must put it in the outer TD. That will align the whole nested table with the image to the top of it.

You don't need that nested table. It does nothing. You also have a bunch of broken table code in there. And TR can't have a hight... You have scattered table code in the right column too and a style block that should be in HEAD. Use the validator (link at the top of the page) to help you clean that up.

But for the left column, all you need is this.

HTML

...
<tr>
<td bgcolor="white" valign="top">
<img src="http://i830.photobucket.com/albums/zz222/BloodCurdlingScreams/Mibba%20Profiles/2czor2p.jpg" border="0" alt="Photobucket">
</td>
...

pandy

Oct 19 2009, 09:23 PM

Forgot - no, you can't shorten one column in a table. A table is a grid and it must "fill up".

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.