Previous and next links

Question

I am trying to display the previous and next buttons, but as I compile it it just give me the link saying 'previous' and 'next' instead of the image I want. Below here I am showing first the code in CSS;

div#slideshow ul#nav li#prev a
{
    background: url(Resources/Icons/previous.png);
}

div#slideshow ul#nav li#next a
{
    background: url(Resources/Icons/next.png);
}

Then here I am showing how I am calling it from asp;

<div id="slideshow">
    <ul id="nav">
        <li id="prev"><a href="#">Previous</a></li>
        <li id="next"><a href="#">Next</a></li>
    </ul>
</div>

Any suggestions of what the problem could be?

add `../` until root folder EX: `background: url(../Resources/Icons/next.png);` — mgraph, Mar 02 '12 at 10:16
maybe just use background-image and place the file path in single quotes — Philip Bevan, Mar 02 '12 at 10:16
If you get this working, you might also want to add text-decoration: none; to your CSS, as I have a feeling one of the browsers will want to try underline your image and probably cause some weird dots or dash artifacts under the image. — Adrian Thompson Phillips, Mar 02 '12 at 10:34
Look on the networking tab of your developer tools, it will tell you what path it is trying to get those images from. — Andrew, Mar 02 '12 at 11:19

Adrian Thompson Phillips · Answer 1 · 2012-03-02T10:24:23.790

1

Using:

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

... will give you a hyperlink with "Previous" as the text. Your CSS might add a background to the list item, but you will still only end up with a hyperlink.

Examples of alternatives:

<input type="image" src="/path/to/image.gif" />

<a href="GoHere.html"><img src="/path/to/image.gif" alt="My Image" /></a>

<img src="/path/to/image.gif" alt="My Image" onclick="SomeJavaScript();" />

edited Mar 02 '12 at 10:24

answered Mar 02 '12 at 10:15

Adrian Thompson Phillips

6,893
6
38
69

So what you suggest to do inorder to have an image of prev and next. – IT_info Mar 02 '12 at 10:17
You would be better off having an image button, an image wrapped in anchor tags or an image with an onclick event wired up in JavaScript. – Adrian Thompson Phillips Mar 02 '12 at 10:20
I've added a few examples above. – Adrian Thompson Phillips Mar 02 '12 at 10:25
Trying to add a background to an anchor tag, even with the correct quoting and paths in the CSS, doesn't sound right (as far as mark-up goes). An anchor tag isn't a block item and isn't designed to have a background image, even if it might somehow work. – Adrian Thompson Phillips Mar 02 '12 at 10:30

score 0 · Answer 2 · answered Mar 02 '12 at 10:18

0

Your markup is valid in the sense that an image would appear behind the innerHTML of the <a></a>.

Problem is most likely an issue with the path to the PNG - try putting the png in the same folder as the html file and using url(next.png)

answered Mar 02 '12 at 10:18

HeavenCore

7,533
6
47
62

Have you checked the PNG has no excess white area that might be thicker than the height of the ``? assuming this isn’t the problem I can only presume something else is styling the element, try `background: url(Resources/Icons/next.png) !Important;` - if that still does not work, make sure the path is correct relative to the CSS file (not applicable if your css in in-head - but very important if your css is in a `` in another directory) – HeavenCore Mar 02 '12 at 10:23

Simon West · Answer 3 · 2012-03-02T10:29:52.080

0

Ensure CSS file paths are relative to the CSS file, not the HTML page.

edited Mar 02 '12 at 10:29

answered Mar 02 '12 at 10:19

Simon West

3,708
1
26
28

quoting is not necessary, see [here](http://stackoverflow.com/questions/851724/css-background-image-what-is-the-correct-usage) – Alberto De Caro Mar 02 '12 at 10:25
@ADC thanks for the correction, did not realise they were optional. Amended my answer. – Simon West Mar 02 '12 at 10:30

score 0 · Answer 4 · answered Mar 02 '12 at 10:19

The url path you are passing in is relative to the location of the stylesheet. So if your style sheet is found at /styles/css/themes.css then the background image here will be looked for at /styles/css/Resources/Icons/XXX.png. Is that where they are being stored?

score 0 · Answer 5 · answered Mar 02 '12 at 10:24

0

you are using an anti-pattern Be Specific when Needed

use the following instead. #prev a { ... }

#next a {
           ...
        }

answered Mar 02 '12 at 10:24

Mike Lin

370
1
9

score 0 · Answer 6 · answered Mar 02 '12 at 12:43

You should not be setting the background of a tag as it is an inline element.

You should instead insert an inner element and set the style of it to accomondate your image display.

<div id="slideshow">         
<ul id="nav">             
    <li id="prev"><a href="#" title="prev"><div></div></a></li>             
    <li id="next"><a href="#" title="next"><div></div></a></li>         
</ul>

Also as you have given your a tags ids you can shorten your css definition considerably by specifying them directly.

#prev a div
{             
background: url(http://images.all-free-  download.com/images/graphicmedium/button_previous_89678.jpg);
height : 200px;
width : 200px;       
} 


#next a div
{             
background: url(http://images.all-free-download.com/images/graphicmedium/button_next_89675.jpg);
height : 200px;
width : 200px;            
}

See this fiddle for a working example

Previous and next links

6 Answers6