#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0

    Background on page/div styling help


    Hi guys, last time I posted on here with a problem I got some really good feedback so I'm hoping for some more here.

    Quite simply I'm trying to emulate a style that is being used a lot recently. The easiest way to show what I'm trying to achieve is ask you to visit Squarespace.

    Each section has a different background colour, i.e. "Stunning designs from the start has a white background, "Pages, galleries, and blogs. All in one platform." has a grey background and so on as you scroll down the page.

    To my inexperienced it seems as if each div has a different background. This is fine and simple enough to do, however the text/images maintain fixed to the centre of the screen.

    How do I achieve this?

    Hope this makes sense! Thanks...
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    If I understand you correctly, you want to know how to have your content sit in the centre of the page, in which case you would need this (based on a content width of 960px but change to whatever you want it to be):
    Code:
    #content {
        width: 960px;
        margin: auto;
    }
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    Hi pixie thanks for your response. That would centre my content yes however it's the background where I am stuck.
    If I added a background to #content, it would only cover 960px of the screen. I want it to cover the entire width whatever the size of Internet browser window. Now I could make width:auto, but that would no longer keep my content in the middle of the screen...

    If I'm still not making sense ill do a visual aid showing what I'm trying to achieve... Sorry!
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Agh right, I undertsand better now. If you know the height of each 'section' down the page is going to be a certain height you could make one image and set it as the background and set each section to be a set height.

    However if each section will or may be a different height then I would suggest you will need a container div for each one set to 100% width and set the background colour on that, then set an inner div to be the width you want and use margin auto.

    CSS:
    Code:
    .container {
      width: 100%;
    }
    .grey-bg {
      background: #cccccc;
    }
    .green-bg {
      background: #34d880;
    }
    .inner-container {
      width: 960px;
      margin: auto;
      height: auto;
    }
    HTML:
    Code:
    <div class="container grey-bg">
      <div class="inner-container">
      <!-- Content Here -->
      </div>
    </div>
    <div class="container green-bg">
      <div class="inner-container">
      <!-- Content Here -->
      </div>
    </div>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    Ah yes that makes more sense lol. I'd be achieving it by creating a div to act as a background however instead of using it as a container I'd used the z-index rule and put it behind the content. I knew there must have been an easier way to achieve the same thing :-)

    Thanks pixie!
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    May as well re-use my thread :-)

    Managed to do the above fine and dandy thank you.

    Now I'm trying to make a floating link/navigation box.

    Code:
    .container {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	border-top: 1px solid #CCC;
    }
    .inner-container {
    	width: 960px;
    	margin: 0 auto;
    	padding: 40px 0;
    	height: auto;
    }
    .navigation {
    	position: fixed;
    	top: 200px;
    	left: 0px;
    	width: 180px;
    	margin-bottom: 40px;
    	padding: 10px;
    	background: #;
    }
    This in a sense works fine, it does exactly what you'd expect from looking at this code. It stays fixed in a position 200px from the top, and 0px from the left of the browser window, essentially creating the illusion that it scrolls down the page as you do.

    The slight alteration I want to make is to contain it horizontally. When your browser window is at a width of say 1000px the navigation box looks fine. However, when you expand it wider the navigation box goes further and further away from the rest of my content.

    Basically I want it to scroll down my page, but not move horizontally across my page. Is there a way to do this?

    http://www.designer-curtains.co.uk/e...y/product.html

    As always, thank you for any help you can provide.

IMN logo majestic logo threadwatch logo seochat tools logo