@webprutser - you have been busy - and good spotting this thread didn't have a response :)
also second/third/fourth .. your suggestions to try the developers bar and fire-bug - especially firebug!
@Baelavay,
welcome to WebmasterWorld [webmasterworld.com] :)
There is a lot going on in the page, which means lots of code to work through - one of the reasons for asking for a simplified code sample to make it easier to see where the problem is and help. But I've spotted a couple of things that may help:
The JavaScript is throwing a large number of errors and I had to step over each line to get the page to display, so you'll want to look at that separately.
There are two reasons your images aren't being positioned as you want: The first is that the second div containing the second image has no positioning applied to it - so it is just being drawn in the normal flow.
The second is the way top/left work. Basically left:50% means the browser scoots across 50% of the viewport, then starts to draw the element. So in your case the left edge of #index_welcomer-logo
starts 1/2 way across - which means that most of the div - and the image is drawn further to the right. The easy fix is to drag the div back 1/2 its width using a negative margin-left. However, that means you have to state a width for the div or the image. You haven;t done that, but its good parctise anyway as it helps the browser lay out the page faster.
I've provided a code sample similar to what you have on your page, and a solution, but I'm a bit confused about why you want the second image stacked higher than the first image if it is to be a background, and there are other solutions that would work even better.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Title</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
/*Give the html/body dimensions so the positioned elements have something to measure from*/
html, body {
height:100%;
}
/*I've made the table 100% to demonstrate how the images are being stacked underneath */
table {
width:100%;
height:100%;
/* a background-color plus opacity (which will only work in browsers other than ie) so you can see the images being stacked underneath*/
background-color:blue;
opacity:0.6;
}
/*Positioning the images.
As you want them in the same position you can use the same code, and the one last in the html will be stacked "on top" of the one before. Make sure you give them a width and a height though*/
div img {
position:absolute;
z-index:-1; /* this stacks the images under the the table without having to position and stack the table itself */
left:50%;
top:50%;
/*the trick to getting the images visually centered - note it is 1/2 the width/height of the images in the html */
margin-top:-100px;
margin-left:-100px;
}
</style>
</head>
<body>
<div>
<img src="index_welcomer-logo.jpg" width="200" height="200" alt="logo " >
<img src="index_welcomer-color.gif" width="200" height="200" alt="logo colour" >
</div>
<table>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</body>
</html>
@webprutuser. Absolute positioning can be handy, so a couple of points - applying absolute to an element converts the display to a form of block, so it behaves a bit like a block element without explicitly setting display:block, and even if originally inline (like a span or image) Rather than "having" to specify a width, this means the element will obey a width/height if it is explicitly set. You can see how I've taken advantage of that in the code sample.
Also, as you can see, there is no requirement to id the images as they can be accessed via the div. In this case it isn't even necessary to wrap them in a div - they could be coded directly into body - but that would be invalid html, so of course they are wrapped - and as I want block-ish behaviour, I've used a div as you explained.
