The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Is there a way to have multiple links on the same image in the same div

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #158042

    I’m VERY new to CSS, very basic beginning. I have a knowledge of HTML and such, so I know how it works and it seems I have troubleshooted my own problems multiple times. But I’m just not sure how to go about this.

    I have an image for my navigation bar. It’s all one image in the same division. Is there a way I can add multiple links to this image?



    This is achievable by image mapping coordinates in HTML. Though this isn’t best practise for developing. I would advise veering away from using images in your nav (unless it’s like a logo, for example). However, the best image solution would be to use a technique called “sprites” where you divide your image based on pixels.

    What kind of image is it? Is it just text or a background image with text on it? Maybe post the image so we can see roughly what you mean by applying an image to your nav bar as there are different ways to achieve this.

    Here’s a tutorial for CSS sprites:

    Again, depending on what you’re try to achieve, images could be completely avoided and you might want to use CSS only (there are literally thousands of tutorials out there. Search for CSS3 Horizontal Navigation Tutorial — you will be surprised.)

    As for linking, I would strongly advise using a solution for your nav like so,

            <li><a href="index.html">Home</a></li>
            <li><a href="example.html">About</a></li>
            <li><a href="example2.html">Work</a></li>
            <li><a href="example3.html">Contact</a></li>
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.