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

HTML

Kris Byrum
Kris Byrum
32,636 Points
Posted by Kris Byrum
Kris Byrum
32,636 Points

Anchor Tag Help

So I remember seeing this, but of course I forgot to write this tip down...

i created a button, using a paragraph element. the p is centered in a div and it contains words for the user to read and then click to go to that page.

I had originally surrounded the p element with an anchor tag, but it then caused the entire block level p tag including the margins to be a link.

i put the a tag inside with the words between, but now only the words are a link and not the entire button.

i couldn't find a fix, but I'd like the button to be an actual button with the a tag working as it should.

Here is the code just in case :>

Anyone have any help or remember what TH lesson taught??

before

<div>
<a href="#">
<p class="button" id="button">Check Out My Resume</p>
</a>
</div>

after 

<div>
<p class="button" id="button">
<a href="#">Check Out My Resume</a>
</p>
</div>

3 Answers

Mike Baxter
Mike Baxter
4,442 Points
Mike Baxter
Mike Baxter
4,442 Points

Here's a CodePen I wrote up to directly address your question. Hopefully this solves it for you!

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

Kris Byrum
Kris Byrum
32,636 Points
Kris Byrum
Kris Byrum
32,636 Points

Wow. You went the extra mile on that one. Thanks!!!

I changed a few things with my styling, borrowing a little from you.

Mike Baxter
Mike Baxter
4,442 Points
Mike Baxter
Mike Baxter
4,442 Points

Glad I could help! Cheers!

Oh, one thing, if you want to use the fancy transition on hover, you'll probably want to include more than just the "-webkit-transition" timing function. There are some for Mozilla and Opera, but I never bother memorizing them because they're so easy to Google.

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

What does this property do? css -webkit-transition: background 200ms;

Mike Baxter
Mike Baxter
4,442 Points
Mike Baxter
Mike Baxter
4,442 Points

Karthikeyan , it's a property from CSS3/WebKit that tells the browser to animate a transition. In this case, the transition is the background, but you can also have it transition size changes as well. This works for when you go from one state to another (such as a normal "a" tag versus the "a:hover" property).

Take a look at this page for more info on Webkit animations.

Adam Fichman
Adam Fichman
9,502 Points
Adam Fichman
Adam Fichman
9,502 Points

All you really need for the HTML is the a tag. Then to have text centered and have the entire button work all you need for the CSS is:

.button {
    text-align: center;
    padding: 10px /* or whatever value you see fit */
}

I personally usually end up setting the display property to inline-block as it allows the control of positioning and setting width and height. Like so:

.button {
    text-align: center;
    padding: 10px /* or whatever value you see fit */
    display: inline-block;
}

There's no real need to wrap your a tag in anything or to use a p tag at all. Note, I used a class rather than an id. I hope that helps

nvcxnvkldsjaklfds
PLUS
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points
nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

There is no need to wrap them with div element. I did not even use class or id to elements. 

        <a href="#">
            <p>Check out my resume</p>
        </a>
     </body>

I then format this with CSS like this

    border: 2px solid red;
    border-radius: 5px;
    display: inline;
    padding: 5px;

}
a{
    text-decoration: none;
    color: black;
}
Adam Fichman
Adam Fichman
9,502 Points

the reason for using an id or a class is so that not every a tag on the page get's styled as a button. For demonstration purposes, where you only have one a tag you can get away with just using the element selector. However, chances are there will be other links on the page that Kris Byrum won't want styled as a button.

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Yes I got it now. Using ID or class will be very useful when we have more p element or a element. Thanks!