More CSS Help
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
Megan posted this at 15:49 — 27th September 2007.
She has: 11,421 posts
Joined: Jun 1999
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...
Megan
Connect with us on Facebook!
webwiz posted this at 18:55 — 28th September 2007.
He has: 629 posts
Joined: May 2007
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;}
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
robfenn posted this at 11:39 — 2nd October 2007.
He has: 471 posts
Joined: Jun 2005
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 posted this at 22:34 — 2nd October 2007.
He has: 629 posts
Joined: May 2007
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.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
greg posted this at 01:13 — 3rd October 2007.
He has: 1,581 posts
Joined: Nov 2005
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
robfenn posted this at 09:15 — 3rd October 2007.
He has: 471 posts
Joined: Jun 2005
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?
webwiz posted this at 23:58 — 3rd October 2007.
He has: 629 posts
Joined: May 2007
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:
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.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
JennyScoth0109 posted this at 07:44 — 31st October 2007.
They have: 29 posts
Joined: Oct 2007
set your left and right margin to auto.
margin-left:auto; margin-right:auto;'works good in both IE and Mozilla
Ontario Mortgage
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.