Sorting Your Friends Lesson 8

I wrote my HTML tab this way:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<div class="friend"><img src="http://i.imgur.com/0h0LpYg.jpg?1" /></div>
		<div class="friend" id="best_friend"></div>
		<div class="family"><img src="http://s14.postimg.org/yxsq2pfbl/70276_0_5ae6ff90917026bac2f23c3e08150a9c.jpg" /></div>
		<div class="enemy"></div>
		<div class="enemy" id="archnemesis"><img src="http://i.imgur.com/D2dvJUS.jpg?1" /></div>
	</body>
</html>

In CSS Stylesheet I added these:

.family {
    border: 2px dashed #0000ff;
}

.enemy {
    border: 2px dashed #ff0000;
}

#best_friend {
    border: 4px solid #00c957;
}

#archnemesis {
    border: 4px solid #cc0000;
}

div img {
     width:97;
     height:97;
     margin: 40px 0px 0px 0px;
     border-radius: 50px;
}

So, what am I supposing to change for putting those images into div circles?

Trying to find a way to input html tab to look the source code but I don’t know how to do this!

I will make your code visible, and then answer your question

for next time, use one of the two following options to make your code/indent visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard

Is this all css you wrote? The easiest solution would be to use background, the other solution would be to gain a better understanding of position first, so you can do things like this. Short version of what i did: made your divs position: relative; this will mean the absolute positioned images will be positioned relative to the div, so then you simple add left: 0; and top:0 so they are perfectly in the circles

This is all CSS I wrote:

/*Add your CSS below!*/

div {
	display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	border: 2px solid black;
}

.friend {
    border: 2px dashed #008000;
}

.family {
    border: 2px dashed #0000ff;
}

.enemy {
    border: 2px dashed #ff0000;
}

#best_friend {
    border: 4px solid #00c957;
}

#archnemesis {
    border: 4px solid #cc0000;
}

div img {
     width:97;
     height:97;
     margin: 40px 0px 0px 0px;
     border-radius: 50px;
}

You should be able to merge my solution with your css code

Finally, I understood the concept with relative position, top and left attributes with 0 value are no needed. By default the images are centered in the div circles.
Thx a lot for advices.

Well, i would put left and top there, to ensure they won’t shift on any device + any browser