October 21st, 2012, 07:51 AM
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...
October 22nd, 2012, 02:46 AM
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):
October 22nd, 2012, 04:25 AM
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!
October 22nd, 2012, 04:42 AM
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.
<div class="container grey-bg">
<!-- Content Here -->
<div class="container green-bg">
<!-- Content Here -->
October 22nd, 2012, 04:53 AM
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 :-)
October 24th, 2012, 03:43 PM
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.
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.
border-top: 1px solid #CCC;
margin: 0 auto;
padding: 40px 0;
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?
As always, thank you for any help you can provide.