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 Adam Flanagan
Adam Flanagan
8,022 Points

What is wrong with my css?

Hi, I am looking to make a circle for my buttons. I try to apply this CSS to each of the individual links but all that I get are these weird stretched oval shapes. Any input much appreciated. Thanks.

a {

background-color: navy;
color: white;
text-decoration: none;
padding:25px;
margin:50px;
border-radius: 100%;
height:100px;
width: 100px;

}

6 Answers

Grant Thomas
Grant Thomas
13,705 Points

You need to create a div around your link, because currently the circle is being defined by the length of the string. (see below, I created a div with the class of btn and then formatted it in css)

.btn{
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
line-height:100px;
text-align:center;
background:navy
}

.btn a {
color:white;
text-decoration: none;
}
Adam Flanagan
Adam Flanagan
8,022 Points
Adam Flanagan
Adam Flanagan
8,022 Points

Yup, I've even changed it back to 50 percent and it doesn't make a difference.

Adam Flanagan
Adam Flanagan
8,022 Points
Adam Flanagan
Adam Flanagan
8,022 Points

I'm just thinking, if there wasn't enough space for a circle, would that cause it to squash itself into a stretched oval shape?

Adam Flanagan
Adam Flanagan
8,022 Points
Adam Flanagan
Adam Flanagan
8,022 Points

Grant, I didn't see your answer. I've already created a div for each button, do you think if I did it for each individual div, that would make a difference?

Thanks,

Adam

Grant Thomas
Grant Thomas
13,705 Points

In the CSS you posted you are trying to make css circles by calling the link and formatting it. You need to call the div and format to that (see my post above.)

You can have as many btn classes assigned to as many buttons as you want. if you want different buttons you'll make different class btns.

Does that help?

Adam Flanagan
Adam Flanagan
8,022 Points
Adam Flanagan
Adam Flanagan
8,022 Points

Grant, I've done what you've advised and apart from one thing, its worked completely; the text formatting on my buttons has messed up a bit. How would I centre the text on my button? (both horizontally and vertically)

Grant Thomas
Grant Thomas
13,705 Points

Make the line-height equal to the height of the circle and then use. So at the size you posted it should be:

line-height: 100px;
text-align: center;
Adam Flanagan
Adam Flanagan
8,022 Points

Sorry to be a bother, but the names of my links e.g. about us and contact are too long to display on one line so how do I change it - would I do a line break in the html?

Grant Thomas
Grant Thomas
13,705 Points

I think your problem is that the circles are still set to the default display:block. You need to change them to display:inline-block Put this into your code display:inline-block;

Adam Flanagan
Adam Flanagan
8,022 Points

I hate to be annoying but this hasn't changed the appearance.

Grant Thomas
Grant Thomas
13,705 Points

I'm confused at what your problem is right now. Can I get a screenshot?

Adam Flanagan
Adam Flanagan
8,022 Points

No problem. Give me a minute.

Adam Flanagan
Adam Flanagan
8,022 Points

This isn't a great example - but this is supposed to say 'Around The World'

http://tinypic.com/r/2u9tm35/5

Grant Thomas
Grant Thomas
13,705 Points

Hack City Central.... Found a fiddle on it forcedstack

Adam Flanagan
Adam Flanagan
8,022 Points

Thanks for going to that bother, but that seems fairly technical, could you provide me with simple css to insert?

Grant Thomas
Grant Thomas
13,705 Points

.btn { background-color: navy; -moz-border-radius:50%; -webkit-border-radius: 50%; border-radius:50%; display: inline-block; text-align: center; line-height: 1; }

.btn a {
    display: block;
    padding:55% 50%;
    margin: -3em -50% 0;
    position: relative;
    color:white;
    text-decoration: none;
    border: 1em solid transparent;
    white-space: nowrap;
}


.forcedStack a {
max-width: 100px;
margin-top: -5em; 
top: 2.5em;  
white-space: normal; 
overflow: auto;
}

Perhaps something like that?

Adam Flanagan
Adam Flanagan
8,022 Points

Hmnnn that didn't do anything...

Grant Thomas
Grant Thomas
13,705 Points

If your html is this: <body> <div class="hackcircle forcedStack"> <a href="#">Around the World</a> </div> </body>

and your CSS this:

.hackcircle { 
    background-color: navy;
     -moz-border-radius:50%;
     -webkit-border-radius: 50%; 
    border-radius:50%;
    display: inline-block;
    text-align: center;
    line-height: 1; }

.hackcircle a {
    display: block;
    padding:55% 50%;
    margin: -3em -50% 0;
    position: relative;
    color:white;
    text-decoration: none;
    border: 1em solid transparent;
    white-space: nowrap;
}


.forcedStack a {
    max-width: 100px;
    margin-top: -5em; 
    top: 2.5em;  
    white-space: normal; 
    overflow:auto;
}

Then idk why it wouldn't work.

Grant Thomas
Grant Thomas
13,705 Points

HTML:
<div class="btn forcedStack"> <a href="#">Around the World</a> </div>

Adam Flanagan
Adam Flanagan
8,022 Points

Hmmnnn, I'll think on it, thanks for help, though.

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Instead of:

border-radius: 100%;

Do:

border-radius: 50%;

Hope that helps.

Adam Flanagan
Adam Flanagan
8,022 Points

Sorry, I did that by accident - it was 50 percent but I experimented around with it and put 100% but there was no visible difference. Weird.