Putting block div into css

HTML & CSS
1

I’m trying to put these div blocks into css but I don’t think I’m doing it right.

<style>

.links{
display:block; 
width: 50px;
height: 50px; 
background-color:green;
}
</style>

<div class="links">
<a href="" target="_blank"  style="display:block; width: 50px; height: 50px; background-color:green;"></a>
<a href="" target="_blank" style="display:block;margin: -50px 0 0 54px; width: 50px; height: 50px; background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 108px; width: 50px; height: 50px; background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 162px; width: 50px; height: 50px; background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 216px;width: 50px; height: 50px; background-color: green; "></a>
<a href="" target="_blank"  style="display:block;margin: 9px 0 0; width: 50px; height: 50px; background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 54px; width: 50px; height:50px; background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 108px; width: 50px; height: 50px;background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 162px; width: 50px; height: 50px; background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 216px; width: 50px; height: 50px;background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: 9px 0 0; width: 50px; height: 50px; background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 54px; width: 50px; height: 50px;background-color:green"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 108px; width: 50px; height: 50px; background-color: green"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 162px; width: 50px; height: 50px; background-color: green;"></a>
<a href="" target="_blank"  style="display:block;margin: -50px 0 0 216px; width: 50px; height: 50px; background-color: green;"></a>

</div>
2

Which part are you having trouble with?

3

Your styles are targeting anything with a class of .links - in this case, the containing <div></div>.

Is that what you’re trying to target?

4

The block elements are what I’m trying to target.

5

OK. A <div> is a block element by default, so you don’t need to add that.

Do you mean you want to target the <a> tags which currently have inline styling of style="display:block;?

6

oh, yes.

7

OK. It’s really important that you learn to be accurate here. It’s not just a case of telling me clearly which elements you are trying to target; you need to be able to specify it correctly for the CSS, too.

I can walk you through moving the styles from inline into a separate style section, if that’s what you want to do.

8

I want to put the inline styling into css.

9 
.links a {
1 Like
10

OK, good.

Well, the first step is to make sure your rules are targeting the correct element(s). In this case, you want to target <a> tags within the “links” div, so you would need to change .links{ to .links a {.

2 Likes
11 

<style>
.links a {
display:block; 
width: 50px;
height: 50px; 
background-color:green;
}
</style>

<div class="links">
<a href="" target="_blank"  ></a>
<a href="" target="_blank" style="margin: -50px 0 0 54px;"></a>
<a href="" target="_blank"  style="margin: -50px 0 0 108px;"></a>
<a href="" target="_blank"  style="margin: -50px 0 0 162px;"></a>
<a href="" target="_blank"  style="margin: -50px 0 0 216px; "></a>
<a href="" target="_blank"  style="margin: 9px 0 0; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 54px; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 108px; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 162px; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 216px; "></a>
<a href="" target="_blank"  style="margin: 9px 0 0; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 54px; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 108px; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 162px; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 216px; "></a>

</div>
12

Next I want to target the margins, and move those out.

pairs of 3 and 2

13 


<div class="a">
<a href="" target="_blank" style="margin: -50px 0 0 54px;"></a>
<a href="" target="_blank" style="margin: -50px 0 0 54px;"></a>
<a href="" target="_blank" style="margin: -50px 0 0 54px;"></a>
</div>

<div class="b">
<a href="" target="_blank"  style="margin: -50px 0 0 108px;"></a>
<a href="" target="_blank"  style="margin: -50px 0 0 108px;"></a>
<a href="" target="_blank"  style="margin: -50px 0 0 108px;"></a>
</div>

<div class="c">
<a href="" target="_blank"  style="margin: -50px 0 0 162px;"></a>
<a href="" target="_blank"  style="margin: -50px 0 0 162px;"></a>
<a href="" target="_blank"  style="margin: -50px 0 0 162px;"></a>
</div>

<div class="d">
<a href="" target="_blank"  style="margin: -50px 0 0 216px; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 216px; "></a>
<a href="" target="_blank"  style="margin: -50px 0 0 216px; "></a>
</div>

<div class="e">
<a href="" target="_blank"  style="margin: 9px 0 0; "></a>
<a href="" target="_blank"  style="margin: 9px 0 0; "></a>
</div>
14 
<style>
.links a {
display:block; 
width: 50px;
height: 50px; 
background-color:green;
}

.a {
margin: -50px 0 0 54px;
}

.b {
margin: -50px 0 0 108px;
}

.c {
margin: -50px 0 0 162px;
}

.d {
margin: -50px 0 0 216px; 
}

.e {
margin: 9px 0 0;
}

</style>
15

Just do this and you don’t need multiple margins or multiple classes:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

.links{
	width:270px;
}
.links a{
	float:left;
	margin:0 4px 8px 0; 
	width: 50px;
	height: 50px; 
	background-color:green;
}


</style>
</head>

<body>
<div class="links">
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
	<a href="" target="_blank"></a>
</div>

</body>
</html>
1 Like
16

Off Topic
Sorry @asasass - I didn’t mean to abandon you. I’m having problems with my computer.

1 Like
17

That’s ok.

18

How would you do it using margins instead?

19

I used margins!

I would not code it using negative margins as you have done as that is wrong and not maintainable.

1 Like
20

I wanted to compare it to what you did.