How To Make Navigation With Images That Is Clickable?


Tags: css,navigation,anchor,html-lists

Problem :

I need to make navigation for website. It uses images not text. Text is hidden. Of course, navigation is created for navigating in page. I created navigation, but I just can't click on it. I think that it's because text is "pushed to left" (hidden in other words), but no text - no links - no clicks. Any idea how to fix it?

HTML:

<div id="navigation">
    <ol>
        <li class="home"><a href="home">Home</a></li>
        <li class="services"><a href="services">Services</a></li>
        <li class="gallery"><a href="gallery">Gallery</a></li>
        <li class="ourClients"><a href="our-clients">Our Clients</a></li>
        <li class="aboutUs"><a href="about-us">About Us</a></li>
        <li class="contactUs"><a href="contact-us">Contact Us</a></li>
    </ol>
</div>

CSS:

#navigation {
    background: url( "images/navigation.png" );
    height: 80px;
}

#navigation li {
    float: left;
    height: 30px;
    margin: 0 60px 0 0;
    text-indent: -9999px;
}

#navigation li.home {
    background: url( "images/navigation_home.png" );
    width: 54px;
}

#navigation li.services {
    background: url( "images/navigation_services.png" );
    width: 61px;
}

/* And so on like 'li.x'. */


Solution :

Images that convey information are content, not presentation or background. Use an <img> element.

<li class="home"><a href="home"><img src="images/navigation_home.png" alt="Home"></a></li>

    CSS Howto..

    How to ignore parent's width limit in CSS

    How can I make several divs on the left overlap one div on the right?

    CSS: How to set 100% width on the first li of ul

    How to order rows (or divs) vertically using blueprint css?

    How to make a text box have rounded corners?

    How to make CSS border show on radio button click

    How to reveal content behind a div with pure css?

    How to set a spinner into the middle of the screen with CSS?

    How can I make a visual header in CSS without PHP?

    How can you align all the cells to the left with css [closed]

    How set font-size in TinyMce

    how to align first li left and second li center in the ul element

    How to separate settings and css in a less?

    CSS How to erase the border from the image link?

    How can I create button using pure CSS which involves linear gradients and background color

    How to apply a CSS transition only to the transform property

    Rich HTML emails in Outlook 2007 and 2010… how do you remove the top margin?

    How to use another brackets/tabs policy for my CSS?

    How to align nav drop down menu in css?

    CSS list styling - how to reduce the distance between parent and children of the previous parent?

    CSS: how to set the width of form control so they all have the same width?

    How to get row of floated images inside a div element to resize with browser window

    How do I fix my css floats on IE 6 & 7? Or how can I lay this out better?

    How can i make an arrow triangle using CSS without any cut in the side i.e. smooth sides?

    How To Turn JS Objects To HTML And Style With CSS

    How to use jQuery to select a class name that's transformed by css-loader?

    How to generate a PDF from an HTML / CSS (including images) source in Python? [closed]

    How do I load / unload css changes quickly on a plone + Zope site ? (noob)

    Show/hide css class by url parameter with php

    How to make a div box with display:flex clickable like display:block?