Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Samuel Ryan
Samuel Ryan
1,701 Points

One page layouts and grid systems

Hi Everyone,

This is the first discussion i've created here on the Treehouse Forum. I'm a beginner in web design and looking to make a one page website.

I'd like to background to span the whole width and height of the viewport, a bit like what you'd find in the link below.

Link: http://dev.manifold.ws/test/

My idea is to fuse this with a grid system. Why? Because having a structure, such as a grid system, I believe it will be easier to edit in the long run. Here is a great website to show you what i'm looking to achieve.

Link: http://www.deuxhuithuit.com/fr/

Ignoring all the fancy javascript, i'm just trying to create the look and layout, but it's become trouble some.

I'm not asking for some to make the website for me, but just for advice to kickstart the idea of where to start.

Thank you.

4 Answers

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Samuel:

Let me make sure I have this correct: you would like a one page site, with different sections as you scroll down, but each section takes up the full width and height of the viewport. Tell me if I'm wrong here.

To achieve that: make a regular page, divide it into divs or sections. On each section, set width to 100%, and set a min-height on each section as well. Set a background on each section that is also width: 100% and height: [your minimum height].

Samuel Ryan
Samuel Ryan
1,701 Points
Samuel Ryan
Samuel Ryan
1,701 Points

Thanks for the reply John.

I've been playing around with the solution you given me and its working. As i'm still working with the 960 grid system, i'm find it hard to get the background working as it's contained to just 940 pixels.

Would I have to wrap the whole 12 column grid in a 'Div' or use 'Sections' instead.?

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

What I would do is make each section { width: 100% } to fit the entire browser window. Inside of each section, place your grid classes, so that your content moves inside and the background stays the same.

psousa
psousa
14,107 Points
psousa
psousa
14,107 Points

Would I have to wrap the whole 12 column grid in a 'Div' or use 'Sections' instead.?

Place a div with your background class before the container div and your columns, ie:

<div class="mymagickbg"> <div class="container_12"> ...

in other words, it should wrap the class that defines the 940px width container.