PDA

View Full Version : Having Problems with CSS Positioning



kirstybandm
13 Jan 2006, 08:09 AM
Hi,
I've set up a new website for the company I work for and have tried a lot of new things with it (You may have noticed a lot of posts from me in the last few months).

Anyway, I'm using CSS now to define the look of my site and have taught myself alot but have hit a stumbling block. When previewing my work I have a 15" monitor and everything is as I want it. However when viewing my site on a 17" monitor there are large spaces which I can't get rid of without everything overlapping on the 15". There must be a way to set universal sizes as other websites manage it but I don't seem to be able to find a way.

You can see the page I'm having problems with at www.bandm.co.uk/Index.asp

and the CSS file is
www.bandm.co.uk/Bandm.CSS

I'm happy with columns around the edge I just want to get the spacing between '.toprow' '.middlerow' and '.bottomrow' correct.

Am I missing something obvious? I've tried changing the positioning to relative but, while the top two appear correctly, I lose the '.bottomrow' completely.

This CSS file is set to display correctly in Explorer I have other files for Opera and Firefox. I'm using Dreamweaver MX2004 with an Access Database on PC.

I hope I'm missing something obvious.

Thanks

Kirsty

Rincewind
13 Jan 2006, 10:28 AM
Over use of positioning is your problem. To get your News story etc to sit one above the other, you need do nothing. They will naturally sit one above the other without you telling them to be in a particular position.

You only need to position the central section of the site. The put the top, middle and bottom into the central section. With no css applied to them, they will naturally take up the vertical alignment you want. Then just use the css to add the borders and margins between the items.

I can tell form your class names "toprrow" etc that you are from a table based background. You need to stop thinking about tows and columns. That sort of though only exists in tables. They are no rows or columns. There are just "area" that contain stuff.

When coding your site. Keep the code and CSS to a minimum. Often when you can't get CSS to do what you want, its because you didn't need any of the css there in the first place. Try to think, before reaching for the style sheet, "can I do this using just html on it's own?" Only when you have exhausted what the html can do, should your turn to the css for assistance.