JennyScoth0109 — Wed, 31 Oct 2007 07:44:35 +0000

robfenn;224603 wrote: I thought i'd try another site in CSS, my company's one ([url]www.sixthsense-esp.co.uk)[/url].

My rather lame start!
http://www.sixthsense-esp.co.uk/CSSVersion/index.htm

I can't find out how to make the div centered to the page? Presumably, once this is done, i guess i will have to position all other divs with % otherwise they won't line up with the centered div once users resize their browser?

Thanks

-Rob

set your left and right margin to auto.

margin-left:auto; margin-right:auto;'

works good in both IE and Mozilla

webwiz — Wed, 03 Oct 2007 23:58:02 +0000

As you add content to the DIV, it will automatically stretch downwards. No need to set a height - in fact, I recommend you avoid heights where possible.

Greg said:

Quote: position: absolute ; is very useful if you understand it fully and its affects on other element positioning

if, however, you don't FULLY understand it you will have problems

Well, yes. But it is hard to understand, and the myriad browser bugs don't help.

I'd use it for putting corner images on elements and such, but nothing more complex, if I were you.

robfenn — Wed, 03 Oct 2007 09:15:23 +0000

Thanks for the advice guys.

I think one thing i need to do is make the top div (banner) stretch downwards to form a background. Problem is, if i set a height, it does nothing. Any way round this?

greg — Wed, 03 Oct 2007 01:13:33 +0000

position: absolute ; is very useful if you understand it fully and its affects on other element positioning

if, however, you don't FULLY understand it you will have problems

it's worth playing with it a bit to see what it does, as sometimes it can be vital to save the alternative being a headache of positioning
just change some items in a test page to position: absolute and see what it does. that and reading about it is the best way to see whats going on

webwiz — Tue, 02 Oct 2007 22:34:00 +0000

Block elements, such as DIVs, have so-called "static" positioning by default. This simply means the browser will put them one after the other, top to bottom, in the order you have in the HTML.

No further positioning required.

FWIW - you can position elements using margins as well as by positioning (absolute or relative).
You can even use negative margins to good effect. See this CommunityMX tutorial for ideas.

robfenn — Tue, 02 Oct 2007 11:39:19 +0000

Thanks for that, now centered! So if i should avoid absolute positioning, how shall i be positioning it? Just have 'auto' as Megan has put?

Is it actually possible to put divs on top of each other as i'm not sure how i'm going to get the menu working otherwise?

webwiz — Fri, 28 Sep 2007 18:55:00 +0000

Rob,
Take out the absolute positioning and you are good to go:

#top {
position: absolute; top: 0px; left: 0px; /* <- Take this out */

I suggest avoiding absolute positioning of structural elements anyway -- too many bugs!

If you want to center it in Internet Explorer 5.x Windows, add these rules:

body {text-align: center;}
#top {text-align: left;}

Megan — Thu, 27 Sep 2007 15:49:31 +0000

Put margin: auto on the container div to center it.

How you'd handle everything else would depend on what you're using for layout. Floats would just float within that div. If you're positioning elements within that div, put a position: relative on the container. Then anything with position: absolute will be positioned relative to the containing div.

You'd have something like this:

#top {margin: 0px auto; position: relative;}
#innerdiv {position: absolute; top: 50px; left: 30px;}

Now innerdiv will be positioned 50px from the top and 30px from the left of he #top div.

Hope that makes sense! I can't test that code right now because our networks are down and I'm on a different computer...