CSS div troubles (borders and images)

Question

Situation's a bit of a long stoy so I won't bother. Point being, I'm trying to place image links to different pages on specific places on top of a background image. I have the background image, and I have the linked images appearing within the div. The problem is now the images don't change no matter how I change their parameters. Here's the HTML

<div class='links' id ='canvas'>
            <a id='anchor1' href ='index.html'><img class='one' src ="images/links/Alert-detail.png" ></a>
            <a id='anchor2' href ='index.html'><img class='two' src ="images/links/Command-detail.png" ></a>
            <a id='anchor3' href ='index.html'><img class='three' src ="images/links/floppy-detail.png" ></a>   
            <a id='anchor4' href ='index.html'><img class='four' src ="images/links/smiling-computer-sea-green.png" ></a>   
            <a id='anchor5' href ='index.html'><img class='five' src ="images/links/trash-detail.png" ></a> 
            <a id='anchor6' href ='index.html'><img class='six' src ="images/links/unhappy-computer-blue.png" ></a> 
            <a id='anchor7' href ='index.html'><img class='seven' src ="images/links/watch-detail.png" ></a>        
        </div>

Note I'm not having the links lead to anywhere until I get the positions right.

And the CSS for it

         #canvas{
    position:relative;
    height: 410px;
    width: 881px;
    outline: 2px solid red;
    background-image:url('../images/link layout.png');

    }
    .anchor1{ 
    position:absolute;
    top: 200px;
    left: 100px;
    outline: 2px solid green;
    z-index: 15;
        }

Answer 1

You are referring to .anchor1 which is a class, however you want to use #anchor1 which would refer to an ID. I would suggest adding a class to all of the <a> tags which you apply the position, outline and z-index to, and using the #anchor1 , #anchor2 etc for the left and top attributes.