Получил относительно простой вопрос (или, как я думаю), но я просто новичок в кодировании.
На моей странице есть шестиугольная сетка, и мне нужно поместить другое изображение и ссылку на каждую. Проблема в том, что я не могу понять, где разместить ссылку.
Мне удалось разместить изображения через 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, что отлично работает! Боюсь, я не уверен, почему это работает, но это так!
Попробуйте поместить ссылки внутри вашего внутреннего шестиугольника div, а затем стилируйте вот так:
.hexagon-in2 a {
width: 100px;
height: 120px;
top: 40px;
display: block;
position: absolute;
}
Демо: http://jsfiddle.net/verashn/z9Ver/ (я прокомментировал cursor: pointer
для ясности)
Попробуйте сокрушить свой div
в link tag
так:
<a href="your/link/address"><div class="hexagon hexagon-scale"></a>
Всякий раз, когда нажимается div, ссылка будет слишком.