SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  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,296
    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,296
    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,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Cool. Let us know how you go.


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
  •