Sorting Your Friends Lesson 8


#1

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?


#5

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


#6

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


#7

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


#8

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;
}

#9

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


#10

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.


#11

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