Layer Positioning

Ugh sorry yet another stupid question from a newbie... :) Well ok so I want a layer to become visible when the user rolls over an image, but I want the layer to stay in place. You'll see what I mean here:<br />
<br />
<!-- w --><a class="postlink" href="http://www.johnmai.com/wco">www.johnmai.com/wco</a><!-- w --><br />
<br />
Roll over to "1400s" and you see the text appear in diffrent place if you resize the window. Im sure someone else has the same problem! :D<br />
<br />
-john<!--content-->anyone?<!--content-->You have postitioned your layer absolutely in the page. It will always appear at those coords irrespective of whether you resize the window. You are also combining a table layout with positioning elements. To my knowledge you will not be able to control the layout in the way you are trying to do so. I would suggest either using tables to position the layout or positioning elements, but not both.<br />
<br />
If you should find an answer to this that contradicts what I am saying then let me know as I'd be interested in it as well.<!--content-->Well I just got it to appear in the same spot regardless of window size, but it doesnt want to stay in the right place... I want to use layers so I can make it appear when a rollover occurs on the buttons...<br />
<br />
-john<!--content-->Get rid of the DreamWeaver function and use CSS to do your positioning. If you are going to use a table and a static layout, then you are never going to get floating layres to correctly position for multple resolutions and screen sizes, and every time you make a chnge you will end up having to re-calculate the correct location of everything.<br />
<br />
I have no doubt that if you invest ten times as much effort as should be required, you can figure out a way to make it work that way, but the page will still becripled and the code will be an unimpressive mess.<!--content-->why not use CSS to place a div in percentages.... lets say 10% from the top, 10% from the left... and place your tabled layout inside of that? <br />
<br />
I am having great luck doing this such thing, and as coboldino mentioned, the coding is simple, effective, and scales to fit larger/ smaller resolutions. And yes, it even works in Netscape4.7 :D<!--content-->here is an example of how I am using it right now. This page is trimmed down to show you ONE dive, with tabled cointents inside... however, I have a few on the page working with no conflict. It should be very easy to figure out. <br />
<br />
***Side note, I am also using divs which are set to percentage width's and height's. This allows the page to be more 'fluid' in different resolutions.<br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br />
<html><br />
<head><br />
<title>medium-rare <cfoutput>#page#&nbsp;#space#</cfoutput></title><br />
<style type="text/css"><br />
#arrows {position:absolute; z-index:11; <cfif #http.user_agent# contains "MSIE">right: 0px; top: 14%;<cfelse>left: 83%; top: 7%;</cfif> width:146px; height: 20px;}<br />
</style><br />
<script language="JavaScript" type="text/javascript" src=http://www.htmlforums.com/archive/index.php/"/medium/scripts/slide.js"></script><br />
</head><br />
<body bgcolor=#2F67AF background="images/top2.gif" bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" marginheight=0 marginwidth=0><br />
<div id="arrows"><br />
<table height=100% width=100% cellpadding=0 cellspacing=0 border=0><br />
<tr valign=top align=right><br />
<td align=left><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="1" border="0" alt=""><img src="images/nav/scroll.gif" width="46" height="12" border="0" alt=""><br />
<a href=http://www.htmlforums.com/archive/index.php/"#" onmouseover="scroll(6);" onclick="scroll(6); return false;" onmousedown="scroll(25)" onmouseout="stopScroll();"><img src="/medium/images/nav/arrowUp.gif" alt="" border="0" onMouseOver="this.src='/medium/images/nav/arrowUpOver.gif'" OnMouseOut="this.src='http://www.htmlforums.com/medium/images/nav/arrowUp.gif'"></a><br />
<a href=http://www.htmlforums.com/archive/index.php/"#" onmouseover="scroll(-6);" onclick="scroll(-6); return false;" onmousedown="scroll(-25)" onmouseout="stopScroll();"><img src="/medium/images/nav/arrowdown.gif" alt="" border="0" onMouseOver="this.src='/medium/images/nav/arrowDownOver.gif'" OnMouseOut="this.src='http://www.htmlforums.com/medium/images/nav/arrowDown.gif'"></a><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="50" height="1" border="0" alt=""><br />
</td><br />
</tr><br />
<tr> <br />
<td><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="21" border="0" alt=""></td><br />
</tr><br />
</table><br />
</div><br />
</body><br />
</html><!--content-->Thanks all for the help, but the problem is not the layout... its just a little issue with a layer not appearing in the right place when a rollover occurs on the buttonn next to it. <br />
<br />
I dont really understand what you mean by placin the layout in a layer.. I find it even more hard to position the layout correctly that way. Well a static, centered layout anyways... how would it help if I was using a percentage based layout? Wouldnt it be the same thing?<br />
<br />
Thanks again for the help, Im really learning alot here! <br />
<br />
-john<!--content-->
 
Back
Top