8/8 Bonus Challenge adding an image


#1

How do you add an image and align it to the other circles? My code is:

index.html

	<div class="friend" id="best_friend"><p>Gizmo</p>
	<img src="http://zingrola.com/image/data/dog/female/Lasha_apso.jpg"/>
	</div>
	<div class="friend"><p>Cray-Cray</p></div>
	<div class="friend"><p>Frosty</p></div>
	<div class="family"><p>A</p></div>
	<div class="family"><p>B</p></div>
	<div class="family"><p>C</p></div>	
	<div class="enemy"><p>worms</p></div>
	<div class="enemy" id="archnemesis"><p>cockroaches</p></div>
	<div class="enemy"><p>spiders</p></div>		
</body>

stylesheet.css (added just this part for the bonus challenge, the rest is as instructed in previous exercises, which were all good.)

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

But it looks like this: (thanks in advance!)


#2

Can i also have the rest of your css code? Without it, i can't help (i could, but that would mean i write the solution myself)

The easiest solution would be to use the background property, but where is the fun in that?


#3

thanks Stetim94! Here's my full css code

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

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

}

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


#4

the best solution to this, would be to use the background property, which if you want, i can explain. But even with image it can be done, it is easier to have images in all circles, but it can be done with just one image, as i did here.

Short version of what i did:

I made the div relative, which allowed me to make the image a position: absolute (absolute elements position relative to there parent element. then i gave a z-index to the paragraphs (otherwise it would below the image), and i added something extra so the text is perfect in the middle of the circle (also vertically)


#5

omg you did it!!!

wow, okay, i will just continue my lesson. What you explained, as clear as it is, is a bit too much for me to handle at the moment.

Thanks again so much stetim94!


#6

of course i did, there are multiply solution in fact, here is another solution. There are so many solution to this problem, continue the position track, after that we can talk about this


#7

Sorry but, it doesn't worked to me. I've added an img and the result was a full sized square pic, then I enter your code and it was circled, but on 1st place and not centered. Can you help me please? Here are some screenshots and my (and your parts of) code.

Here, the 1st part of code I was copied from your example ↓

But the img should be on 3th circle ↓

Then I add the CSS part of code on my div ↓

Now the img is on place and centered but the circles became into squares ↓

Here's my complete HTML and CSS code ↓

stylesheet.css

div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    width: 100px;
    border: 2px solid black;
    border-radius: 100%
    text-align: center;
    position: relative;
}
.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;
}
img {
height: 100px;
width: 100px;
border-radius: 100%;
text-align: center;
}

HTML ↓


#8

after border-radius: 100% in your div css selector, you are missing a semi-colon. Which causes a problem, because the border-radius isn't read, and the lines below aren't either. Which means your div's aren't relative, which you need for the absolute position of your image