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 Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

Multiple problems with CSS

As I try to refine my code and employ (what I think are best practices) I find myself playing the "one step forward, two steps back" game. I am a newbie trying to produce a personal website as a portfolio to help me find a job as a developer.

The HTML and CSS you will see is written by me. Behind it is the latest version of the Bootstrap (getbootstrap.com) "normalize.css" (v 3.3.5). I am trying not to touch the normalize.css because I am under the impression (mistaken maybe?) that it will represent best practices, so I didn't include it. I am assuming I get override any variations I need in my main.css.

I welcome any help I can get.

I am not sure why things render so large in codepen.io. The screenshot is a shot of how things render in the treehouse workspace.

  1. the image and tagline should centered vertically/horizontally within their containers. (the containers have borders for testing). I had these positioned using padding etc., but I am trying to actually use CSS to center them (vert and horiz)

  2. the pagequote is roughly where I expect it to be, but it should have a top border. The missing top border is another "two steps back" issue.

  3. As you can see the footer is high and not centered. I had it pinned to the bottom for a while as I want. But this is a "two-steps back" issue.

Thanks for whatever help you will provide.

Link to code:

http://codepen.io/dhawkinson/pen/rOqxdQ

Link to Screenshot of present rendering:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/405383/Screenshot_2015-11-06_16.10.50.jpg

The codepen link will post with an appended &#13 (I think it was) the actual link ends with ...xdQ

Now both of them are. It's weird because they don't show in the preview.

Roy Penrod
Roy Penrod
19,810 Points

The link above is wrong. When he pasted it, there was an extra 
 added to the end.

The actual working link is:

http://codepen.io/dhawkinson/pen/rOqxdQ

2 Answers

Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

Here is the correct answer. I discovered it by running my CSS code through the W3 validator. I was missing one closing }. That created all of the problems.

Roy Penrod
Roy Penrod
19,810 Points

I'm glad you found your own answer, Doug. That's the kind of thing that drives us all nuts. lol

And I'm sorry I couldn't dig in and give you more help. I was just too busy and didn't have the time go through it.

Doug Hawkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points
Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

I'm not sure how the extra characters were appended. It has happened before on this site. code http://codepen.io/dhawkinson/pen/rOqxdQ

screenshot https://s3-us-west-2.amazonaws.com/s.cdpn.io/405383/Screenshot_2015-11-06_16.10.50.jpg

Roy Penrod
Roy Penrod
19,810 Points

It's a character representing a carriage return in the HTML version of the ASCII codes. You'll get weird stuff like this sometimes when you're copying and pasting URLs. It's just something to keep an eye out for in the future.

The easiest way to make sure it doesn't happen in the future is to follow your own links to make sure they work after you post.