|
| |
|
|
brian32
Posts: 39
Joined: 4/7/2004
Status: offline
 |
Help - positioning divs - 6/28/2005 13:03:34
I am having trouble problems with my positioning in a new site.
The link is here
My stylesheet is here
I want it so that when a bigger screen views it the block is centered. I was told in the site critiques forum to use quote:
margin: 0 auto; . However I cannot get this to work. Maybe in trying something wrong but all my other layers are inside the main one.
So I should be able to put margin: 0 auto; on the main div and the others should move aswell. Doesn't work quite that nicely though, so wondering if anyone here can tell me what im doing wrong.
I haven't done it on the link but I took top: 0px; left: 0px; and put in margin: 0 auto;. Thats the change I was making.
Thanks for your help.
Brian
|
|
|
|
Tailslide
Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: Help - positioning divs - 6/28/2005 13:14:29
Hi Brian
You've got lots of position: absolutes in there - that basically takes whichever item it's applied to out of the flow of the page completely so nothing that happens to any other item affects it. You're nailing the divs to the page and it can't flow or change position.
To get the site to centre properly would take a fair bit of re-building. If I were doing it I'd start off like this:
body {padding: 0; margin: 0; text-align:center;}
#container {margin: 0 auto; width:762px;text-align:left;}
#navigation {float:left;}
#contents {float:right;}
#footer {clear:both;}
And add all the extra formatting in obviously. The text-align center in the body element is for IE which misbehaves otherwise - you put text-align left in the container div to put it right.
Then in the HTML I'd have (shortened for clarity):
<body>
<div id="container">
<div id="navigation> Your nav stuff goes here</div>
<div id="contents"> Your main contents goes here </div>
<div id="footer"> Footer stuff here</div>
</div>
</body>
Edited for c**p spelling!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
brian32
Posts: 39
Joined: 4/7/2004
Status: offline
|
RE: Help - positioning divs - 6/28/2005 16:58:29
Thanks a million for the reply as it has shed a bit more light on this for me.
I never really looked at the positioning in a lot of depth but there is loads to learn.
Its a very small site so changing it all wont take that long, and Im going to do it.
Basically I should probably stay away from absolute positioning.
One or two things though:
What is the clear: both; that you have in the footer. What is this doing?
And for the footer and my top div can I put width: 100%; as it is contained in the main div.
Thanks again.
Brian
| |
|
|
|
Tailslide
Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: Help - positioning divs - 6/29/2005 2:55:16
Hi Brian
The clear:both thing forces the footer past the two floated boxes above it - floating messes with the div's position in the "flow of things" not as much as position:absolute - but still it can cause some problems when writing the code. Using clear:both means that the footer will sit where you want it instead of possibly sitting halfway up the page - which quite often happens!
Once a div is contained within another div of a specified width then there's no reason you can't say width:100% as far as I can think.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
