Ссылка кровоточит за пределами изображения? - PullRequest
Новая
       16

Ссылка кровоточит за пределами изображения?

1 голос
/ 01 марта 2011

У меня есть две проблемы, я был бы очень признателен, если бы кто-то мог мне помочь.

Я занимаюсь разработкой мобильного веб-сайта с колонкой элементов ссылок на изображения на странице. У меня есть некоторая проблема, хотя, как показано на рисунке ниже синим цветом, элементы ссылки, окружающие элементы изображения, кровоточат снаружи и заполняют весь div по ширине.

enter image description here

Разметка: 

<body>
      <div id="vinranka">
          <img id="vinrankaIMG" src="img/vinrankaCrop.png">
          <img id="vinkattenText" src="img/vinkattenText.png">
      </div>

      <div id="pageFull">

          <div id="searchBox">
              <form id="searchForm" method="post" action="">
                  <div id="searchFieldBg">
                        <input id="searchField" type="text" value="Sök dryck.." name="query">
                        <input id="searchButton" type="submit" value="Sök" />
                  </div>

              </form>
          </div>

          <div id="btContainer">
              <a class="imgLink" href="redWhine.html"> <img class="buttons" src="img/redWhineBt.png"></a>
              <a class="imgLink" href="whiteWhine.html"> <img class="buttons" src="img/whiteWhineBt.png"></a>
              <a class="imgLink" href="sparkelingWhine.html"> <img class="buttons" src="img/sparkelingWhineBt.png"></a>
              <a class="imgLink" href="champagne.html"> <img class="buttons" src="img/champagneBt.png"></a>
              <a class="imgLink" href="roseWhine.html"> <img class="buttons" src="img/rosevinBt.png"></a>
              <a class="imgLink" href="glogg.html"> <img class="buttons" src="img/gloggBt.png"></a>
          </div>

      </div>

  </body>

Edit: Вот CSS: 

    html, body {
    margin: 0px;
    padding: 0px;
    background-color: #aed604;
}

#vinrankaIMG {
    position: absolute;
    z-index: 2;
}

#vinkattenText {
    margin-left: 220px;
    margin-top: 10px;
}

#pageFull {
    position: absolute;
    margin-left: 20px;
    width: 454px;
    height: 889px;
    background-image: url('../img/pageFull.png');
    z-index: 1;
}

#btContainer {
    display: block;
    z-index: 10;
}

img.buttons {
    display: block;
    vertical-align: top;
    border: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

a.imgLink {
    margin: 0px;
    padding: 0px;
}

Я нашел тему с похожей проблемой, где решением было добавить 'vertical-align: top' к CSS изображения. Это, однако, не сработало для меня, и я не уверен, что у нас была такая же проблема.

Другая проблема - область, описанная красным. У меня есть изображение, которое перекрывает белый фон div с z-index. Проблема заключается в том, что она также перекрывает верхнюю ссылку на изображение, даже если ссылка на изображение имеет более высокий z-индекс, что означает, что она становится не щелкаемой в области, отмеченной красным. Не заблокирована ли ссылка на изображение для каждого элемента, который находится над белым фоном, внутри которого она находится? ..

Я действительно надеюсь, что достаточно хорошо описал свои проблемы ... =) Если бы кто-нибудь мог мне помочь, это было бы очень признательно! Я отвечу на все ваши вопросы!

Спасибо!

/ Max

1 Ответ

3 голосов
/ 01 марта 2011

На самом деле это оказалось очень легко.Я просто установил, чтобы a-элемент имел ту же максимальную ширину, что и изображения.Теперь это больше не истекает кровью.Для перекрытия я переместил div, содержащий кнопки вне div «pageFull», и установил его положение в «absolute».Теперь я мог легко переместить весь пакет кнопок обратно в исходное положение, просто изменяя поля, и теперь оно больше не перекрывалось верхним левым изображением.

Надеюсь, это кому-нибудь поможет!=)

...