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
Aurelian Spodarec
10,801 PointsHow do you fix this?
HI,
If you look at this
http://codepen.io/Aurelian/pen/KgoLqb
and look at the button, i though when i was doing my website i messed up something. But checking it on codepen.. it seems that it's a defautl behaviour.
My other websites, somehow, i managed to overcome this i think..
how can you do it, so it stays on it's own line? Im aware to clearfix it, but is that the right thing to do? clear both, display table, content "" ? or would you use button with href?
Aurelian Spodarec
10,801 PointsBut the button shoudnt go on top of the image anywas, right? But i suppose thats the default of the anchor tag?
2 Answers
Jennifer Nordell
Treehouse TeacherHi Mr Bond 007 ! I would advise turning that from an anchor tag into a button element. When I do so inside your codepen the button moves onto its own line and off the image. Here's the altered code:
<button class="btn btn--lg">Read More</button>
Hope this helps!
Aurelian Spodarec
10,801 PointsYes, i know, but how do you do it with anchor tag? Theres a great oporunity to learn because i didn't know anchor tags do this : p
Jennifer Nordell
Treehouse TeacherWell, if you're absolutely against a button element you could put it in a paragraph. The point is that anchor tag doesn't in itself have a visual representation. It's being applied to the "Read more" text, which at this point is a default of the body as it doesn't belong to any specific element type. Take a look:
<p><a href="" class="btn btn--lg">Read More</a></p>
This will have the same result, but the element will not be a button element. Hope this helps!
Aurelian Spodarec
10,801 PointsThank you! Now i get it :) I did use button at the end, but i was curious about this issue here :)
Henrik Christensen
Python Web Development Techdegree Student 38,322 PointsHi Mr Bond 007,
I'm not sure if it's something like this you're looking for, but you could try add this:
display: block;
width: 10%;
to your .btn - this will move it on it's own line too.
Hope it's helpful, happy coding! :-D
Aurelian Spodarec
10,801 PointsThat's not the best way to do it, it can get messy with that width 10%. : p but thanks
Jorge Berbena
10,016 PointsJorge Berbena
10,016 PointsI´m not pretty sure but, I´read you did not set the properties of button´s container.