Use of Layers question

My site uses Layers to lay my logo over a table. www.webweever.net. The site is designed for 1024x768 resolution, I have margins from the left set to center the series of tables in the center of the page. My problem is I would like to make the site 800x600 friendly, I assume this would require removing the margins so the page shrinks to the 800x600 resolution. If I remove the margins the layer presents a problem, is there a way I can anchor the layer to the table so that it follows the table to keep the format it currently has?

The biggest problem here is going to be your use of tables to layout your page. They're very rigid for what you doing, and we can handle this much better with some CSS. We completely strip out the presentation from the html, and just use some simple div's for positioning.
Also, we can totally remove all the javscript code, the rollovers, and the images - since it's basic verdana text on a solid background.

In an effort to bring this layout more inline with current best-practice coding standards, I've done a quick mockup of an example for you. It may take some learning, but it is well worth it.

<div id="content">
<p>I am an independent design consultant providing web design and development services for small businesses, individuals and organizations throughout the country.</p>
<p>In the competitive world of internet advertising, my innovative designs and attention to detail will put your business in the limelight.</p>
<p>Whether you need a complete site or simply an update, I will design your site in a timely manner and at a reasonable rate.</p>
</div>

Sean is right. You created the cross-resolution problem, an probably a lot of others to do with uer prferences, because you build a rgid table based design. Using layers indicates you are trying to work outside of the two dimensional space of the typical table grid.

If you convert to the kind of layout Sean is giving you then maintaining any eleemnt relationship becomes child's play becaue you can manipulate and reposition elements dynamically at the DOM level, with very few restrictions.

Give all the elements an id so they all all be addressed directly through the DOM in scripting. You can reference any element property this way:
document.getElementById('elementID').property

For dynamic positioning and/or sizing the properties you need are:

offsetLeft that is the physical current position in pixels
offsetTop that is the physical current position in pixels
offsetWidth that is the current actual width in pixels
offsetHeight that is the current actual height in pixels

can create the relationship by modifying styles like this
<script type="text/javascript">
function positionOverlay()
{
Target = document.getElementById('target');
obj = document.getElementById('overlay');
toppos=Target.offTop+45;
leftpos=Target.offsetLeft+60;
obj.style.position=absolute;
obj.style.left=leftpos+'px';
obj.style.top=toppos+'px';
obj.style.zIndex=10;
}
onload=positionOverlay;
onresize=positionOverlay;
</script>
You insure the relationship works at all resolutions and screen sizes
with the onload and onresize events. Nomater where the target element ends up on the page, the overlay will always be on top of it 45 pixels inside its top boundary and 60 pixel inside of the left boundary. Changes in user preferences will not change the relationship either. That is not just fluid, that is dynamic flow, and you can change the relationship for other events as well to interact with the user.

A nice solution I saw and used a time ago involved having several different stylesheet and just two buttons to increase and decrease font-sizes. Because for every fontsize (level 1 to 5) there was a different stylesheet, it wouldn't be such a big deal to just create three stylesheets altering the whole layout to fit either 800x600, 1024x768, etc.

Featured Post

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Foreword (July, 2015)
Since I first wrote this article, years ago, a great many more people have begun using the internet. They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …

In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS
Create a new class by typing ".Ribbon": Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …