Names in the circles and positioning


#1

I tried to remove few names from few circles and keep some names in other circles. If i remove few names i see that the positioning of circles change, some of them move down. Does anyone know why circles are positioned properly if all have name inside and they lose that positioning when I remove a name or more? Can someone explain what s actually happening there?


#2

Please paste in your code and we can help you.

margin will be needed


#3

<!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"><p>aaaa</p></div>
		<div class="friend"></div>
		<div class="friend"><p>aaaa</p></div>
		<div class="enemy" id="archnemesis"><p>aaaa</p></div>
		<div class="enemy"><p>aaaa</p></div>
		<div class="enemy"><p>aaaa</p></div>
		<div class="family"><p>aaaa</p></div>
		<div class="family"><p>aaaa</p></div>
		<div class="family"><p>aaaa</p></div>
	</body>
</html>

#4

this is the CSS

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

div p{
    margin-top:40px;
    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;
        
    }

I wanted to know why circles must all have a text inside in order to be simetric and why they re not on the same line when u remove one text. I was hoping that maybe someone can explain what actually happens with the code


#5

All of them should have - see here
Or all shouldn't - see here

If you have a paragraph the the margin from div p gets applied, so the spacing is right if all has paragraph's or if all doesn't have.


#6

Oh i see thank you :slight_smile:


#7

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