8/8 text and img within the circle


#1

Hi, I'm having a problem trying to solve this if anyone could help please. I made a list of horror films but I'm finding it hard to have the img and text inside of the circle. I can do one or the other but not both, atm the text appears underneath the circle but what I would like to figure out is how to have the text over the img within the circle.

here is the code.

<!DOCTYPE html>

<html>
	<head>
		<title>Sorting</title>
		<link type="text/css" rel="stylesheet" href="sorting.css"/>
	</head>

	<body>
		<h1>Sorting Divs/ Movies</h1>
	
		<div class="favorite" id="best"><a href="http://www.imdb.com/title/tt1228987/"><img src="Letmein.jpg"/><p>Let Me In</p></a></div>
		<div class="favorite"><a href="http://www.imdb.com/title/tt1844624/"><img src="AHS.jpg"/><p>American Horror</p></a></div>
		<div class="favorite"><a href="http://www.imdb.com/title/tt1179904/"><img src="paranormal.jpg"/><p>Paranormal Activity</p></a></div>
		
		<div class="good"><a href="http://www.imdb.com/title/tt1703199/"><img src="ge.gif"/><p>Grave Encounters</p></a></div>
		<div class="good"><a href="http://www.imdb.com/title/tt2309961/"><img src="afflicted.jpg"/><p>Afflicted</p></a></div>
		<div class="good"><a href="http://www.imdb.com/title/tt2236160/"><img src="nightlight.jpg"/><p>Nightlight</p></a></div>
		
		<div class="bad" id="worst"><a href="http://www.imdb.com/title/tt1259521/"><img src="cabin.jpg"/><p>Cabin in the Woods</p></a></div>	
		<div class="bad"><a href="http://www.imdb.com/title/tt2918436/"><img src="tle.jpg"/><p>The Lazarus Effect</p></a></div>
		<div class="bad"><a href="http://www.imdb.com/title/tt0905372/"><img src="thing.jpg"/><p>Thing</p></a></div>
	
	</body>
</html>

and the css

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

div p {
	position: relative;
	margin-top: 40px;
	font-size: 12px;
}

div img {
	position: relative;
	display: inline-block;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	
	text-align: center;
}

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

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

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

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

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

Any help will be appreciated.


#2

have you done css positioning yet? without it, this is really tricky. i put a possible solution in a bin, you can find it here.

Anyway, what i did was i made the paragraph position: absolute; removed the margin of the paragraph, and pushed the paragraphs down using top.

Advantages of this solution: you can have one or two lines of text in the paragraph, the circles stay in perfect alignment. A other solution would be to use background, that is so much easier


#3

Hi thanks for the reply your code worked brilliant. I haven't done positioning yet so am not entirely sure on everything you said or did but hopefully I will soon enough.

Thanks again.