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 Peter Burdette
Peter Burdette
3,701 Points

Please help with CSS Styling!

I have been working on styling some links so they look like buttons and i have gotten this far:

http://codepen.io/anon/pen/gLycs

The only problems that I have are:

  • When the browser is resized the buttons break apart from each-other.
  • The links don't register unless the text is clicked.

Could someone please tell me what I'm doing wrong and possibly provide me with a visual solution?

4 Answers

Peter Burdette
Peter Burdette
3,701 Points

Thanks guys for your assistance. I figured it out.

My solution: http://codepen.io/anon/pen/rtclC

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

I am not seeing the breaking apart on resize issue you are talking about, but I spent some time on the link hovers. Let me know if this is more of what you were looking for?

You can see the CSS I added for the link effects below the "/* Added Styles */" comment

Peter Burdette
Peter Burdette
3,701 Points

Hey Riley, thanks for taking a look! Here is a screenshot of what I'm talking about when I say breaking apart (http://cl.ly/TnrG) - Press CMD - on a Mac to scale down and CTRL - on Windows.

As for the links I updated the code on CodePen so when the button is clicked a javascript alert will appear so the event will be more visible. If you click the text the event will occur if you click off the text but within the button it will not. I don't understand why.

http://codepen.io/anon/pen/gLycs

Peter Burdette
Peter Burdette
3,701 Points

Hey Riley, thanks for taking a look! Here is a screenshot of what I'm talking about when I say breaking apart (http://cl.ly/TnrG) - Press CMD - on a Mac to scale down and CTRL - on Windows.

As for the links I updated the code on CodePen so when the button is clicked a javascript alert will appear so the event will be more visible. If you click the text the event will occur if you click off the text but within the button it will not. I don't understand why.

http://codepen.io/anon/pen/gLycs

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Peter,

One button is under the other because that's their order in the markup. Try floating both of them to the left in your css (float: left;).

Jeff

Roland Cedo
Roland Cedo
21,261 Points
Roland Cedo
Roland Cedo
21,261 Points

Hi Peter! I haven't tried to modify the code yet, but would changing the unit measurements to EM's and increasing the padding of each Anchor tag do you any good?