|
| |
|
|
Nicole
Posts: 2845
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
 |
Can anybody help me??? - 2/13/2006 16:31:25
Pardon me for asking some very basic questions here but this is really frustrating me. Can anyone tell me why my text is appearing half way across the containing box when I'l trying to get it to start more towards the left (with room for navigation on the left also)
And, can anyone also tell me why my containing box is left aligned in Firefox but way too right aligned in IE when I'm trying to just center it?
Thanks in advance
http://www.users.on.net/~nicoleoz/
Nicole
_____________________________
|
|
|
|
Nicole
Posts: 2845
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
|
RE: Can anybody help me??? - 2/13/2006 17:49:08
It seems I don't have a grasp of the relationship between different <div>'s.
If I have a centered container box 730px wide, when I specify an area of that box for banner, navigation, content and footer, aren't alll the "top and left" properties in my css relative to the starting point of that container?
I mean, if that container is 730px wide starts 10px from the top and is set to "auto" from the sides, If I want to specify an area of that container for content don't I just use position: relative (because it's relative to the container div), and then say top: 240px; left 170px; and width 560px; which will start the container div 170px from the left side of the container box, and 240px from the top of the container box, and leave room at the top for a banner (within the 240px high area I've left aside), and an area 170 wide at the left for the navigation)?
This is where I think I'm still thinking in tables. Isn't CSS positioning like having cut out pieces of paper and laying them out on a grid and just specifying their width, height, top and left starting points?
Nicole
_____________________________
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: Can anybody help me??? - 2/13/2006 18:25:24
I find the best way is to be as unspecific as possible - go with the flow. That sounds a bit crazy. What I mean is that if I'm doing a fixed width, centered box type site I'll stick everything in a container as you've done, set the margin to margin:0 auto; and give it a width of up to about 760px depending on the style.
You shouldn't need to do position:relative generally (unless you're using absolute positioning somewhere inside the container). Specifying position:relative has occasionally caused me problems so I try to avoid actually spelling it out unless I need it to hold an absolutely positioned div within it - which I generally don't.
Rather than pegging out positions like with a table (almost like setting co-ordinates) think of it more like herding sheep into a small pen or those bottles of pretty coloured sand in layers. On your average site the position of the main text area from the top of the container is defined more by the items preceeding that text area rather than any fixed position.
So if your banner is 200px high and your nav is 100px high then your main text area will hopefully sit 300px from the top of the container - you don't need to specify that - it's held there by the items above it. If you took out your banner then your main text area would sit 100px from the top. The less specific you are about stuff like that the easier it is to change the content round - change the banner image, add another div in before the main text area.
I don't think the pieces of paper analogy works with CSS layouts - it's more fluid than that - especially with heights actually.You want to be able to move stuff around easily if necessary.
Possible layout -
<div id="container">
<div id="header"> </div> <!-- end header-->
<div id="content">
</div> <!-- end content -->
<div id="sidebar">
</div> <!-- end sidebar -->
<div id="footer"> </div> <!-- end footer -->
</div> <!-- end container -->
CSS:
body {text-align:center; margin:0; padding:0;}
#container {margin:10px auto; text-align:left; width:730px;}
#header {height:240px;}
#contents {float:right; width:560px;}
#sidebar {float:left; width:170px;}
#footer {clear:both; height: 2em;}
There are loads of different ways of doing this with floats, without floats - this is just one way.
Edit: I've just noticed that I've started using position:relative for my containers (ha not that I don't know what I'm doing) because I've started using an image replacement technique that uses position:absolute - so the container's got to have pos:rel on it.
< Message edited by Tailslide -- 2/13/2006 18:38:54 >
_____________________________
"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 
