Layout problem

Hi everyone,

I’ve created a small website which I’m quite pleased with but have a niggling issue with the layout of one of the pages.

I’m not sure how best to describe the problem so I’ll just dive in.

I’ve used pictures as the background for most of the content and used relative positioning to place the whole lot where I want it on the page. This was a nightmare to figure out and while it is working as I envisaged, I’m still not sure how it all works. However, my question really relates to the contact page.

I want the form to be placed on top of the picture the same as the other pages and while I have succeeded to a degree it has left a large area of white space below the picture. The space is where the form is positioned when I view the file in Dreamweaver (I’m using CS3).

I don’t know if that lot makes sense but you can see for yourself if you look at the pages which I’ve temporarily placed here.

Does anyone have an (hopefully simple) answer to this?

regards

Brian

To hide the white empty space you will have to make its postion absolute instead of relative. and set its parent div to relative

replace this code


.thrColFixHdr #container #mainContent table {
    left: 83px;
    position: absolute;
    top: -510px;
}

and give the form tag this style

position: relative;

I have tested this in firefox and its working perfectly fine

Hi ryanqm, thanks for that, it’s been driving me mad.

It’s working fine now but I did have to change the top position from -510px to 175px but playing with those numbers is easy. It’s understanding positioning that’s not so easy, although I’m getting there I[/I].

This is the first time I’ve used positioning at all and it’s been a very useful lesson, once again, thank you.

regards

Brian

you welcome. actually the combination of position:relative and position:absolute is a tricky thing and almost everyone get to know this solution only after creating some mess for the first time :slight_smile: