Sorting Your Friends, Text not in the Right place and circle shifted down


#1


https://www.codecademy.com/en/courses/web-beginner-en-jNuXw/0/8?curriculum_id=50579fb998b470000202dc8b


My code seems correct but the circle is shifted down and the

text does not appear in the middle like in the first example done by code academy. Ive tried using float:left and that moves the circle to its normal position but does not fix the text appearing near the top of the circle rather than the middle.


HTML
<!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" id="best_friend">Tulasi</div>
		<div class="family"></div>
		<div class="enemy" id="archnemesis"> </div>
		<div class="friend"> </div>
		<div class="teammate"> </div>
		<div class="teammate"> </div>
		<div class="roomate"> </div>
		<div class="roomate"> </div>
		<div class="roomate"> </div>
		<div class="roomate"> </div>
	</body>
</html>



CSS

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

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


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

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


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

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

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

.roomate {
    border: 3px solid  #4286f4
}

.teammate {
    border: 5px dashed #7e19d1;
}.


#2

In my version I gave the div a margin-left of 5px and no other margins.

Let's examine the constraints, namely the width. Assuming the border is outside of the 100 x 100 region of the DIV, and leaving 5px of breathing room either side gives us 90px of text line. If the border is inside the box, then 85px is a safe margin.

Given that the font size is reset in the body, we can make this font size about 80% of the base.

body {
  font-size: 100%;
}

Here is my div ruleset, followed by the code to position a single line of text through the middle of the circle:

div {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-left: 5px;
  border: 2px solid #000;
  border-radius: 100%;
}
div p {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  margin: 5px;
  line-height: 85px;
  font-size: 80%;
  max-width: 90px;
  overflow: hidden;
}

You can test it by dropping this P element into any div:

<p>MMMMMMMMMMM</p>

The line contains an excess of M's but only the 8 that were expected to fit are displaying. The rest are hidden.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.