positioning a link

i'm having trouble positioning a link(fbhome5.gif) which appears when you click on the question mark image. i tried to put the absolute positioning, but it doesn't seem to work. i want the link image to appear more to the left. does anyone know how to do this?

here's the html page code and the link to see it - <!-- m --><a class="postlink" href="http://powow.com/bluesrock/0003.html">http://powow.com/bluesrock/0003.html</a><!-- m -->


<body bgcolor=black>


<style type="text/css">
<!--
.guess { color:white; cursor:pointer; font:bold 38pt 'Times New Roman';
width:310px; height:255px; text-align:center; }
-->
</style>


<div style="text-align:center;">
<IMG src=http://www.webdeveloper.com/forum/archive/index.php/"http://powow.com/bluesrock/fblogo.gif">
</div>

<div style="float:left; width:340px; height:490px;">
<IMG style="position:absolute; top:152px; left:33px" src=http://www.webdeveloper.com/forum/archive/index.php/"http://powow.com/bluesrock/interfacey.gif">
</div>


<DIV style="text-align:center;">
<table style="height:490px;">
<tr>
<td valign="middle">
<DIV id="guessbox">
<TABLE>
<TR>
<TD><IMG style="position:absolute; top:263px; left:314px" src=http://www.webdeveloper.com/forum/archive/index.php/"http://powow.com/bluesrock/fbhome10.gif">

<TD class="guess" onclick="javascript:
var str1 = '<img border=0 src=http://powow.com/bluesrock/fbhome5.gif width=576 height=297>';

document.getElementById('guessbox').innerHTML = str1;
return true;"><img style="position:absolute; top:394px; left:766px" src=http://powow.com/bluesrock/8.gif></TD>
</TR>
</TABLE>
</DIV>
</td>
</tr>
</table>
</DIV>I am sorry but,,, you really have a screwed up code there.. just tossing a bit of everything here and there.

The reason why that image appears below when clicking the "?" is because the tree image is occupying the space. You will see this if you expand your window size just enough so the image would fitt, then it will appear next to the tree.

but you really should take a look at the standards firsthere ya go. Here is a helping hand to get you started using Css and not tables, inline styles and css mixed up together

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FatBottoms</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
BODY {background:#000}
#Main {width:100%; text-align:center}
#Header {display:block; width:539px; height:109px; clear:both; background:url(fblogo.gif)}
#nav {float:left; height:501px; background:url(interfacey.gif) no-repeat top left}
#middle{margin-left:200px; margin-top:100px}
</style>
</head>

<body>
<div id="Main">
<div id="Header"></div>
<div id="nav">
<div id="middle">

<DIV id="guessbox">
<IMG src=http://www.webdeveloper.com/forum/archive/index.php/"fbhome10.gif">
<a onclick="javascript:
var str1 = '<img src=http://www.webdeveloper.com/forum/archive/index.php/fbhome5.gif>';
document.getElementById('guessbox').innerHTML = str1;
return true;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"8.gif"></a>
</DIV>

</div> <!-- middle -->
</div> <!-- nav -->
</div> <!-- Main -->
</body>
</html>


the Question remains how you will fix the navigation menu, though
 
Back
Top