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 Khader Jabbar
Khader Jabbar
1,514 Points

Section Separators / Scrolling One Page Websites

I just finished watching the latest Treehouse Show episode Towards the end they showed a website with different section separators,

I have noticed a lot of newer websites have all their content on one page, and every section a different color or different shaped to separate each part.

I have always wondered how do they do this or what is the best way to do this? Using Divs for every new section? or some other way?

3 Answers

Patrick Metcalfe
PLUS
Patrick Metcalfe
Courses Plus Student 7,563 Points
Patrick Metcalfe
Patrick Metcalfe
Courses Plus Student 7,563 Points

On that one website they used pseudo elements for the section seperaters, but they caused me a lot of problems so I'm trying hr which is also a bit more semantic as the new def of the hr element is a "thematic break."

danielcroft
danielcroft
7,438 Points
danielcroft
danielcroft
7,438 Points

If you want to do standard straight line ones you could do it with divs, if not its just going to take a bit more css styling to get things in place and maybe need a vector image. i suggest you look at the code that codrops did to do that and learn from it.

http://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/ the code its right there for you on that page.

danielcroft
danielcroft
7,438 Points

for example the diag line is as i thought it would be, a rotation 

    .ss-style-doublediagonal::before {
        height: 50%;
        background: #116094;
        transform: rotate(-3deg);
        transform-origin: 3% 0;
    }
Justin Green
Justin Green
16,430 Points
Justin Green
Justin Green
16,430 Points

Thanks for sharing a link to codrops! I've been wondering how to do this, and the site had just what I needed.

danielcroft
danielcroft
7,438 Points
danielcroft
danielcroft
7,438 Points 
.ss-style-doublediagonal::before {
    height: 50%;
    background: #116094;
    transform: rotate(-3deg);
    transform-origin: 3% 0;
}

The diagonal line coded as i thought it would be with a transform rotate which is easy to do and has a nice effect

Khader Jabbar
Khader Jabbar
1,514 Points

thank you for your reply, but im not really interested in the line style, just breaking the page into sections, so everything is on the same page, What is the best way to do that, put everything it is on Div?