CSS блок ссылки и изображения - PullRequest
Новая
       4

CSS блок ссылки и изображения

0 голосов
/ 16 марта 2010

Учитывая этот HTML: 

<div class="nation">
    <a href="library.php?type=nation&amp;id=America">
        <div class="nation-image">
            <img src="nations/America.png" alt="snip" />
        </div>
        <h3>America</h3>
    </a>
</div>

следующий CSS приводит к тому, что вся <div class="nation"> становится кликабельной ссылкой блока: 

.nation {float: left; text-align: center; width: 189px;}

.nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}

но если я сделаю следующее одиночное добавление: 

.nation {float: left; text-align: center; width: 189px;}

    .nation-image {height: 138px;}

.nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}

для указания высоты <div class="nation-image">, тогда изображение (и только изображение) больше не является ссылкой, но остальная часть div (поле вокруг него, h3 и т. Д.) Остается ссылкой блока.

Я в замешательстве.

Ответы [ 4 ]

2 голосов
/ 16 марта 2010

ДЕМО: http://jsbin.com/uyupu/2

Ваша HTML-структура должна выглядеть примерно так:

* +1007 *

тогда ваш CSS: 

    .nation {
      margin: 0;
      overflow: hidden;
      float: left;
      position: relative;
    }
    .nation a {
      text-decoration: none;
      float: left;
    }
    .nation a:hover {
      cursor: pointer;
    }

    .nation a img {
      float: left;
      margin: 0;
      border: none;
      padding: 10px;
      background: #fff;
      border: 1px solid #ddd;

/* note that you don't really need to set the Height 
but the width so the image auto scaling fine!*/

      width:200px
    }

    .nation a .nation-flag {
      position: absolute;
      right: 20px;
      bottom: 20px;
      font-size: 1.2em;
      color: #fff;
      background: #000;
      padding: 5px 10px;
      filter:alpha(opacity=65);
      opacity:.65;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 
    /*--IE 8 Transparency--*/
    }
0 голосов
/ 16 марта 2010

Это недопустимая попытка html: 

<div class="nation">
     <h3><a href="library.php?type=nation&amp;id=America" class="nation-flag" id="usa">
       America
    </a></h3>
</div>

Вы можете иметь универсальный класс для всех флагов. А затем будьте конкретны для #usa и примените флаг в качестве фонового изображения. Используя CSS, вы можете отобразить href в виде блока и сделать его настолько большим, насколько вам нужно.

0 голосов
/ 16 марта 2010

Вместо этого используйте ваш div.nation в качестве a.nation. Добавьте к нему «display: block», чтобы он влиял на весь родительский div.

0 голосов
/ 16 марта 2010

Я бы не оборачивал блочные элементы встроенными элементами, такими как теги привязки. Поместите вызов функции изменения местоположения прямо в интерактивное изображение или даже сделайте это встроенным, как в следующем элементарном примере: 

<img src="nations/America.png" alt="snip" 
   onclick="javascript:location.href='library.php?type=nation&amp;id=America'" />

Тогда просто разместите ваше изображение так, как вам нравится.

...