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 Lanie Williamson
Lanie Williamson
Courses Plus Student 11,390 Points

Questions about my first website design

Having mostly completed the Front End Development track, I have completed my first independent website design for a local living history farm. It is very basic and I still have much to learn but I have a couple of specific questions if anyone has a chance to look at it. The website is www.peinhardtfarm.com.

My questions:

  1. How do I make the header, nav bar and footer go all the way to the right and left? Right now when I scroll to the right or left they end before the end of the page.
  2. Footer - I am having trouble getting this to stay put where I want it. On the small view it is okay. On bigger views it pushes into the body. I’ve tried several ways unsuccessfully to fix it. Suggestions?
  3. On the school groups page, I was trying to set up the responsive css to show the pictures on one side and the form on the other when viewed on a larger screen but it isn’t coming through that way. How do I fix that?

Finally, any general suggestions are welcome. I plan to continue working and improving this site but it's a start. Thanks in advance!

3 Answers

Jaime Rios
Jaime Rios
Courses Plus Student 21,100 Points

1 You can do that assigning the "width" property to 100%

2 The footer can be solved with the "clear" property on CSS.

3 The same as question 2, it is a common problem on display:block mode.

Another thing that I would do in order to improve the site is change the font type and font weight, just to make it easier to read, another alternative is to set a lighter color in the header and the whole website in general.

There is also a course that talks about this kind of problems. Check the display modes. http://teamtreehouse.com/library/css-layout-techniques

Mindy Moreland
Mindy Moreland
3,568 Points
Mindy Moreland
Mindy Moreland
3,568 Points

Looking good! One small suggestion is to change the color of your email link, as the blue-on-green is hard to read.

Lanie Williamson
PLUS
Lanie Williamson
Courses Plus Student 11,390 Points
Lanie Williamson
Lanie Williamson
Courses Plus Student 11,390 Points

Thank you both for your suggestions. I am working my way through the CSS Layout Techniques class and really wish I had taken it before starting. Meanwhile, I've removed the footer and a couple of things and may just restart the site sometime - I've tried so many different columns, floats, etc. I know I have some unnecessary code.

Meanwhile - I have one more big question. After making some changes, I now have a HUGE space between the header/navigation bar and the body on the first page (you have to scroll down to see it). Thoughts?