CODEWITHSUNDEEP
htmlcss
user3000847
user3000847

Reputation: 191

How to hyperlink a span that contains an image

HTML:

    <footer>
    <div class="foot">
    <ul>
            <a href="https://www.facebook.com/" class="social"><span class="facebook"></span></a>
            <a href="instagram" class="social"><span class="instagram"></span></a>
    </ul>
    </div>
    </footer>

CSS:

    .facebook {
    display:block;
    background-image:url("../images/facebook.png");
    height:64px;
    width:64px;
}

.instagram {
    display:block;
    background-image:url("../images/instagram.png");
    height:64px;
    width:64px;
}

.social {
    height:64px;
    width:64px;
    display:inline-block;
    position:relative;
    margin:0 auto;
}

footer {
    height:75px;
    width:inherit;
    bottom:0;
    position:fixed;
}

.foot {
    text-align:center;
}

The way I'm going about it could possibly be the wrong way. Any direction/advice would be great. I've tried using z-index and other properties but just nothing is working. I kinda wonder if it has to do with positioning/display inline.

Upvotes: 3

Views: 1822

Answers (3)

AlexDom
AlexDom

Reputation: 701

A span can have display:block property, but why you add span if you have your link ? I cleaned up your html : HTML

<footer class="foot">
    <ul>
        <li><a href="https://www.facebook.com/" class="social social-facebook"></a></li>
        <li><a href="instagram" class="social social-instagram"></a></li>
    </ul>
</footer>

and CSS

.social-facebook {
    background-image:url("../images/facebook.png");
}

.social-instagram {
    background-image:url("../images/instagram.png");
}

.social {
    height:64px;
    width:64px;
    display:block;
    margin:0 auto;
}

.foot {
    height:75px;
    width:inherit;
    bottom:0;
    position:fixed;
    text-align:center;
}

I removed properties repetition and add a little bit of OOCSS :)

Upvotes: 1

Jan Mellstr&#246;m
Jan Mellstr&#246;m

Reputation: 215

The links worked for me with no trouble. You don't even need the span. You can move the class to the <a and have either 2 (social & facebook), or just make it to one css each with the inline and margin.

<a href="https://www.facebook.com/" class="social facebook"></a>
<a href="instagram" class="social instagram"></a>

Upvotes: 2

Valentin Mercier
Valentin Mercier

Reputation: 5326

A <span> should not contain any display:block elements anyway, it was designed for inline content although you can use it your way. Try use the <img> tag instead. And wrap all your lines inside lis because you are using an ul

Upvotes: 4

Related Questions