CODEWITHSUNDEEP
csshtml
Felipe Lopez
Felipe Lopez

Reputation: 29

Add link to CSS image

I am having some problems trying to add a link to the css image that is after every link, the text itself works but not the image to the right of it, how can I fix it? Thanks.

<nav>
    <!-- top menu -->
    <ul>
        <li><a href="index.html">Home</a></li>  
        <li><a href="materials_list.html">Materials</a></li>
        <li><a href="screened_Loam.html">Screened Loam/Topsoil</a></li>
        <li><a href="RAP.html">RAP</a></li>
        <li><a href="asphalt.html">Asphalt/Concrete Disposals</a></li>
        <li><a href="delivery.html">Delivery</a></li>
        <li><a href="contact_us.html">Contact</a></li>
    </ul>
    <!-- /top menu -->
</nav>

.header nav ul li:after {
    content:'';
    background:url(../images/sprite.png) 6px 7px no-repeat;
    float:left;
    display:block;
    width:12px;
    height:12px;
}

Upvotes: 1

Views: 211

Answers (4)

Friendly Crook
Friendly Crook

Reputation: 1198

you're missing an a selector in your CSS:

.header nav ul li a:after {
    background:url(../images/sprite.png) 6px 7px no-repeat;
    float:left;
    display:block;
    width:12px;
    height:12px;
}

without the a you would be targeting only the li directly

Upvotes: 1

Yukul&#233;l&#233;
Yukul&#233;l&#233;

Reputation: 17102

you need to apply your :after to <a> element, not <li>

.header nav ul li a:after {
    background-image:url( ... );
}

in this way, the image is inside the link

Upvotes: 2

Akhilesh Kumar
Akhilesh Kumar

Reputation: 9355

your after tag is not apanding to the inner of a tag.

you need to aply your 

:after to <a> element, not <li>: 
.header nav ul li a:after { ... }

so that your image can be inside a tag and your link will work properly.

Upvotes: 2

user4942732
user4942732

Reputation:

take this for an example:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
    <a href='http://www.google.com'>
        <img src='http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg'>

    </a>
</body>
</html>

Basically put your link, then put the img inside of it. Then you could give it a class or id to resize it, move it, etc.

Upvotes: 2

Related Questions