CODEWITHSUNDEEP
htmlcss
user3444414
user3444414

Reputation:

Adding a link messes up icons

So this is what I currently have. When I do

<a href="#"></a>

the icons shift up and they get messed up. As you can see here. The blue icon is the one that I want to be linked, but it's out of place. Any help would be great.

Upvotes: 3

Views: 156

Answers (3)

Banana
Banana

Reputation: 7463

your code is broken, you forgot to close the <a> opening tag its missing its >

and remove the > from the fs1 > span make it just fs1 span

Upvotes: 0

alessandrio
alessandrio

Reputation: 4370

<a></a>

css

a:hover, a:active:, a:visited, a:focus, a{
    text-decoration: none;
}

all line:

<div>
<a><span></span><span></span></a>
<a><span></span><span></span></a>
<a><span></span><span></span></a>
</div>

Upvotes: -1

Liftoff
Liftoff

Reputation: 25372

You have a direct child CSS relationship with this code:

.fs1 > span {
  position:relative;
  top:10px;
  margin-right:30px;
}

Change it to include all children:

.fs1 span {
  position:relative;
  top:10px;
  margin-right:30px;
}

Revised CodePen

The > operator in CSS signifies a direct child relationship, as such:

<div>
   <a class="one"></a>
   <span>
       <a class="two"></a>
   </span>
</div>

a.one can be targeted with div > a, however, since there is a span inbetween the div and a.two, div > a does not target a.two.

To target a.two and a.one, you would change it to div a, which applies to all a tags found inside of a div tag.

Upvotes: 2

Related Questions