My friend 'circles' are actually squares!


#1

I'm not getting circles, they are squares. Yet, it's being accepted and allowing me to continue with the lessons. I'm not sure why this is.


#2

-> How to insert code into a post <-


Paste your code, Certainly a problem to border-raduis !


#3

Backticks are changing the squares to elongate rectangles and placing them on top of each other in list form. UGH!!!!!!


#4

div {
	display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border: 2px solid black;
	border-radius: 100%
	
}
div.friend{
    border-radius: 2px;
    border-style:dashed;
    border-color: #008000;
}
div.family{
    border-radius: 2px;
    border-style: dashed;
    border-color: #0000FF
}
div.enemy{
    border-radius: 2px;
    border-style: dashed;
    border-color: #FF0000;

}
#best_friend{
    border-radius: 4px;
    border-style: solid;
    border-color: #00C957;
}
#archnemesis{
    border-radius: 4px;
    border-style: solid;
    border-color: #CC0000;
}

#5

You can just copy paste your css code to the forum without using the backticks?


#6

Posted above your comment..we overlapped each other!


#7

even adding those missing semi-colons, which was accepted as well, it doesn't change the squares to circles.


#9

I also see what is causing the the problem. in div.friend, div.family, div.enemy, #best_friend and #archnemesis, you use border-radius, which will overwrite your border-radius you defined in div. However, in friends and so on, you want to use border-width (which determines the thickness of the border) rather then border-radius (which will make the corners round, or if a high enough value is used, circles)


#11

Okay, now the div.enemy is staying a square while the others switched to circles.
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border: 2px solid black;
border-radius: 100%;

}
div.friend{
border-width: 2px;
border-style:dashed;
border-color: #008000;
}
div.family{
border-width: 2px;
border-style: dashed;
border-color: #0000FF;
}
div.enemy{
border-radius: 2px;
border-style: dashed;
border-color: #FF0000;

}

best_friend{

border-width: 4px;
border-style: solid;
border-color: #00C957;

}

archnemesis{

border-width: 4px;
border-style: solid;
border-color: #CC0000;

}


#12

your enemy still has a border-radius, rather then a border-width


#13

Oh yeah, duh!! THANK YOU. Now I have to figure out how to center the names. I saw another thread with all of that so I'll go read it!


#14

horizontal align is easy, just add text-align: center to your div css selector.

Vertically is a bit more tricky, there are multiply ways to achieve this, go read the other thread you found


#15

thank you so much!! The names are centered on the top of the circle now so that's a start! And hey...I have circles!! THANK YOU! I'm LOVING this course!


#16

You could take a peak at exercise 1 of sorting friends, they use paragraphs to center the text vertical, or you can check out this guide, which covers a lot of centering techniques