Sorry about the delay in replying, I hadn't forgotten!
I was trying to think of a good explanation how to learn how to position elements on a page but I can't think of one. The best I can come up with is to suggest you learn the differences between block and inline elements and how floating works.
Block elements are things which usually have a set width and height and can be positioned on the screen. Inline elements behave like characters in a line of text. IMG tags are an example of an inline element, if you add one in the middle of a sentence it will behave like a character (albeit usually a large one). If you make an IMG tag display as a block element by adding the following to your CSS:
Code:
IMG {display:block;}
The image will not display inline anymore and will behave like a rectangular block which can be positioned on screen.
When you float something, it automatically becomes a block element. Elements which are floated DO render in the flow of the page. For example, the absolutely positioned elements you are using at the moment do not flow with the page. If a box overflows, the box below it will not drop down to accommodate it. With floats, the boxes below WILL move to accommodate the other box. I won't go into the details of how and what floats are beyond this, but I suggest finding some tutorials on the subject of floating as it is an imperative skill to learn for web design as their behaviour affects how you create pages in a fundamental way.
Hopefully that has been of some help. Explaining these concepts in a single forum post is tricky (impossible?) and most people need quite a lot of practice before they get to grips with these concepts.
solution to mouseovers not working
Linear Mode
