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

mrx3
mrx3
8,742 Points
Posted by mrx3
mrx3
8,742 Points

Are there any good sites out there that teach how to make a responsive web site with a side bar navigation ?

I was practicing making a site that's something like this. A header a the top, the navigation bar floated to the right, the main content section floated to the right of the navigation, and a footer section at the bottom. I can make the site but, I have a problem when I resize the browser window, the header, and the footer will respond when the browser is resized. But, the navigation, and main-content section will not. The main content section gets pushed to the bottom. I've since deleted my project, the CSS was a mess, and decided to do some research online. Every site I've went on has only JavaScript to control the responsiveness. I don't have any real JavaScript experience. Are there any good sites, or tutorials on this site that can help me with this?

Thanks in advance for any help.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

I think I found it: http://teamtreehouse.com/library/css-layout-techniques I just haven't gotten this far yet.

2 Answers

Candice Eisner
Candice Eisner
10,514 Points
Candice Eisner
Candice Eisner
10,514 Points

If you've got a solid background in CSS, then the project on 'Build a Responsive Website' would probably be your best bet: http://teamtreehouse.com/library/build-a-responsive-website

If you don't have that solid background, then the CSS Foundations and CSS Layout Techniques deep dives are maybe a better starting point.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Yeah, I'm going to resume the CSS Deep Dive. I was almost through the deep dive but, they announced the build your own website was redone, so I started that. I wanted to learn how to float images next to each other. Thank you for your help Candice, much appreciated.

John Daniel Castillo
John Daniel Castillo
5,137 Points
John Daniel Castillo
John Daniel Castillo
5,137 Points

Basically, CSS and mediaqueries might do the trick. Just make sure that the width of your navigation and content is specified on % not px so it will adjust on the size of your screen. Then work on the breakpoints as the screen gets smaller. :)

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

I believe that was my problem, I was using px in the content, and navigation. Thanks John.