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

Home Forums CSS css image map coordinates

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

    Hi, I have a vertical menu image that should have 4 clickable links via css… I have done this menu bar in a horizontal style, but am having a hard time vertical. Can anyone assist? Here is the piece I am working on…. As far as I can tell, it should have 4 clickable spots but it doesn’t…


    #menu {
    width: 208px; height: 311px;
    background: url(menu.png);
    margin: 10px auto; padding: 0;
    position: relative;}
    #menu li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; left: 0;}
    #menu li, #menu a {
    width: 208px; display: block;}
    #link1 {top: 60px; height: 60px;}
    #link2 {top: 133px; height: 50px;}
    #link3 {top: 188px; height: 50px;}
    #link4 {top: 244px; height: 60px;}


    Offhand, your anchor links have no height.

    Try this.

    #menu li, #menu a {
    width: 208px;
    display: block;
    height: 60px; /* note */

    Also, your question has nothing to do with “image maps”


    Ha, wow, ur amazin… that did it…. Thanks!

    How come putting the height in the links where I did, doesn’t work? Using height where u said makes it so all the links have to be within the 60px range. What if I wanted the clickable space in different sizes? That’s why I put height on each link, but it didn’t work.


    The anchor links have no contents (which is a bad idea by the way*) so they collapse without a defined height.

    • *If a blind person is using a screen-reader your menu will be completely invisible to them.

    You might want to look into that.

    Also, your links have no :hover state and cannot really get one as you are using a single image for the whole menu rather than a set of individual images, one for each link.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.