Создание ссылки на класс div?

0

Получил относительно простой вопрос (или, как я думаю), но я просто новичок в кодировании.

На моей странице есть шестиугольная сетка, и мне нужно поместить другое изображение и ссылку на каждую. Проблема в том, что я не могу понять, где разместить ссылку.

Мне удалось разместить изображения через CSS, манипулируя "красным" классом, который я изначально сделал как placeholder (первая строка HTML там у меня есть класс "red1", где я указал свое изображение).

Для размещения ссылок я теряюсь. Любая помощь очень ценится и нести меня, если я оставил важную информацию.

Здесь мой код, чтобы вы, ребята, могли понять, что я имею в виду:

HTML: <section class="hex clearfix">
        <div class="hex-grid-top">
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red1"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
        </div>
        <div class="hex-grid-mid">
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
        </div>
        <div class="hex-grid-bot">
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
            <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red"></div></div></div>
        </div>
    </section>

Соответствующий CSS:

     .hexagon {
     overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
         -o-transform: rotate(120deg);
        transform: rotate(120deg);
    cursor: pointer;
}

.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
   -moz-transform: rotate(-60deg);
     -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
}

.hexagon-in2 {
    width: 100%;
    height: 100%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}

.hexagon-in2:hover {
}


.hexagon-scale {
    width: 100px;
    height: 200px;
}

.red {
    background: red;
}

.red1 {
    background-image: url(../Images/thumbs/001-thumb.gif);
        width: 50;
    height: 50;

}





.hex {
    margin: 20px auto 0 auto;
    width: 600px;
    height: auto;
}

.hex-grid-top {
    display: inline-block;
    margin: 0 55px -105px 55px;
}

.hex-grid-mid {
    display: inline-block;
    margin: 0 auto -105px auto;
}

.hex-grid-bot {
    display: inline-block;
    margin: 0 55px;
}

.hex-grid-top .hexagon {
    float: left;
    margin: 0px 10px;
}

.hex-grid-mid .hexagon {
    float: left;
    margin: 0px 10px;

}

.hex-grid-bot .hexagon {
    float: left;
    margin: 0px 10px;
}

Как я уже сказал, я хотел бы знать, как добавить ссылки на эти шестиугольники! И если ТОЛЬКО способ, которым я могу это сделать, это прикрепить изображения по-другому, так и быть им.

Заранее спасибо,

Томас

Редактировать: Спасибо VLS, что отлично работает! Боюсь, я не уверен, почему это работает, но это так!

  • 0
    Не могли бы вы просто позиционировать абсолютные ссылки?
Теги:
hyperlink

2 ответа

0
Лучший ответ

Попробуйте поместить ссылки внутри вашего внутреннего шестиугольника div, а затем стилируйте вот так:

.hexagon-in2 a {
    width: 100px;
    height: 120px;
    top: 40px;
    display: block;
    position: absolute;
}

Демо: http://jsfiddle.net/verashn/z9Ver/ (я прокомментировал cursor: pointer для ясности)

0

Попробуйте сокрушить свой div в link tag так:

<a href="your/link/address"><div class="hexagon hexagon-scale"></a>

Всякий раз, когда нажимается div, ссылка будет слишком.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню