SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How best to Constrain Content?

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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":

    Code:
    <div id="container">
    
      all page content here
    
    </div>
    ... and then setting these styles:

    Code:
    #container {
      width: 898px;
      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.

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Cheers, Malane.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Malane View Post
    How would I create the background for the space outside the 898px and where is the height set?
    You set the background on the body element, something like this:

    Code:
    body {
      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.

  5. #5
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Ralph. I will give it a go and see if I understand it well enough to get it to work

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Cool. Let us know how you go.

  7. #7
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Cheers, Malane.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  9. #9
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    #container {
    width: 898px;
    margin: 10px auto;
    min-height: 898px;}

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Malane View Post
    Would I add it as follows?
    Yep, that's right.

  11. #11
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help and advice Ralph, and for your patience with my newbness

    Cheers, Malane.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Malane View Post
    Thanks ... for your patience with my newbness
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •