Bonus challenge: Try adding images and links to each <div> - HOW?


#1



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


I want to try the Bonus challenge but I just don't get a link INTO one of the circles. When I write a text for the link the circle is gone and the link appears.



#2

It might be easier to continue with css positioning first, so you understand positioning. Can you copy paste your html and css code to the forum, so i can run it? Both cases might be useful, one without text, and one with text where the circles dissapear, so i can have a look at what is happening?


#3

Yeah, thought so. I just started the CSS Positioning Course.

I didn't change anything at the CSS code - maybe that's why I got trouble. :wink:

This is the html code with text:

I think I'll get it when I go on with the course but thanks for your reply!


#4

could you please copy paste your html + css code to the forum so i can change things? To understand where the problem is? I can't do this from a image


#5

Okay, hope to get you right:

html with text:

		<div class="enemy" ID="archnemesis">
		    <a href="http://google.com">Google
		    </a>
		</div>
		  
		<div class="friend" ID="best_friend"></div>
		<div class="family"></div>

CSS with text:

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

Html without text:

	<!--Add your HTML below!-->
	<div class="enemy" ID="archnemesis">
	    <a href="http://google.com">
	    </a>
	</div>

	<div class="friend" ID="best_friend"></div>
	<div class="family"></div>
</body>

CSS without text:
/*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;

}

That's what you've meant? Sorry if I got you wrong.


#6

You got it right, i will look into it, and report back in a couple of minutes :slight_smile:


#7

the problem seemed to be caused by display: inline-block, i find inline-block always rather difficult to work with, and avoid it altogether if possible. It has some strange behaviors under the hood, did you have float yet? You can really simply overcome the problem, by using float: left, instead of display: inline-block, as i demonstrate here


#8

Oh cool. :wink:
I'm at the "Clearing Elements" right now. Hope to get through it.

Thanks for your help!


#9

Of course, this is just one way of solving this problem, but this is the easiest i could think of.

No problem, you can also add: text-align: center; to your div css selector to center the text, vertical centering is more difficult, thankfully someone wrote this brilliant guide

Or take a look at exercise 1 of sorting your friends, to see how they centered it


#10

Bookmarked this awesome guide. Thanks again. :smiley:

Feels so good not being alone with this kind of tricky circumstances. Gonna try the different ways when I'm done with the first skill. First things first.


#11

Wait, there is a easier solution. Because of the weird way display: inline-block behaves, it is difficult to have just one element with a anchor (<a></a>) element, while if all 3 have a anchor, things become a lot easier, as shown here


#12

Okidoki,
it doesn't seem logical to me why I need three elements when using display:inline-block. But I see the result. :slight_smile:


#13

display: inline-block is one of the most confusing property's there is, but because there is only text in one element, it pushes down the element. Super weird indeed