malane — 2012-10-04T10:24:44-04:00 — #1
Hi all, I've read a few Sitepoint books (and several others by different authors) but I've either missed this info or it wasn't covered.
What I want to do is limit the size of my <body> whilst still having a background to fill any excess space. An example of what I mean: http://www.rawessentials.co.nz/ So the header, menu, content, etc is always the same size regardless of the browsers window size but I can add a colour or background image to the full page. What would be the cleanest way to achieve this please?
Cheers in advance for any advice, Malane.
ralphm — 2012-10-04T10:39:12-04:00 — #2
Hi Malane. Welcome to the forums.
The trick here is to wrap all of the content in a div, which has a set width and is centered. In that site, they've done it by putting all of the content in a div with an ID of "container":
<font size='1'> [I]all page content here[/I]</font>
... and then setting these styles:
margin: 10px auto;
So the width is not set on the body element at all, which isn't a good idea anyway.
Have a look at that site in Chrome, right click anywhere on the page and select "Inspect Element". A window will open that shows you the HTML structure of the page and all the CSS that applies to each element. It's a great way to see how a page is constructed.
malane — 2012-10-04T18:52:05-04:00 — #3
Thanks for the speedy reply Ralph. How would I create the background for the space outside the 898px and where is the height set? Also what is the ideal size for a constrained webpage?
ralphm — 2012-10-04T19:20:16-04:00 — #4
You set the background on the body element, something like this:
background: #E3DDD1 url(/images/background-image.jpg) no-repeat 50% 0;
Also what is the ideal size for a constrained webpage?
There isn't really an ideal, as there are so many different screen sizes. It's often better to set a % width, so that the content can expand/contract depending on the screen/browser size. But that introduces a lot of other issues, so perhaps it's better to start with fixed width when you are starting out. 960px width is often a god width.
malane — 2012-10-05T17:14:34-04:00 — #5
Thanks again Ralph. I will give it a go and see if I understand it well enough to get it to work
ralphm — 2012-10-05T19:19:48-04:00 — #6
Cool. Let us know how you go.
malane — 2012-10-31T13:43:01-04:00 — #7
Hi Ralph, I was able to do what I wanted following the advice you gave me, thanks I was wondering is there any way to set the height of the container because I would like the "box" to be the same on each page regardless of the differing content.
ralphm — 2012-10-31T19:19:57-04:00 — #8
I'm not sure which box you mean, but I'd advise against putting fixed heights on anything. As soon as a user resizes the text, for example, you design will fall apart. You could do something like set a min-height on the box instead, so that it will be at least a certain height on each page, but can grow taller if needed.
malane — 2012-11-01T16:48:22-04:00 — #9
The "box" I mean is the <div id="container">. The min-height sounds like it would do what I want. Would I add it as follows?
margin: 10px auto;
ralphm — 2012-11-01T18:39:13-04:00 — #10
Yep, that's right.
malane — 2012-11-01T20:24:54-04:00 — #11
Thanks for all your help and advice Ralph, and for your patience with my newbness
ralphm — 2012-11-02T02:19:22-04:00 — #12
You're welcome. I was there not long ago at all ... and some would even say I'm still there.
Questions are what we are here for, no matter how simple.