2014-02-12 5 views
0

Ситуация немного длинная, поэтому я не буду беспокоиться. Точка, я пытаюсь разместить ссылки изображений на разные страницы в определенных местах поверх фонового изображения. У меня есть фоновое изображение, и у меня есть связанные изображения, появляющиеся внутри div. Проблема в том, что теперь изображения не меняются независимо от того, как я изменяю их параметры. Вот HTMLПроблемы с CSS-div (границы и изображения)

<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> 

Примечание Я не имеющие ссылки ведут никуда, пока я не получаю позиции права.

И CSS для этого

  #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; 
     } 
+0

Вы хотите, чтобы эти ссылки отображались рядом друг с другом? – Victor

+0

В вашем CSS вы ссылаетесь на класс '.anchor1', которого нет ни на одном из вас' '-tags - это намеренно ?? –

ответ

1

Вы имеете в виду .anchor1, который является классом, но вы хотите использовать #anchor1, который будет ссылаться на ID. Я бы предложил добавить класс ко всем тегам <a>, которые вы применили положением, outline и z-index, и используя #anchor1, #anchor2 и т. Д. Для атрибутов left и top.

Смежные вопросы