Мои ссылки на изображения не будут работать

Я пытаюсь связать изображение, в HTML выглядит так:

<a href="#" class="image"><img src="logo.png"></a>

и в CSS у меня есть:

.baraMeniu a.image{
    display:block;
}

Ага... display:block - просто неловкая попытка сделать изображение кликабельным. Я начинающий, поэтому, пожалуйста, делайте это шаг за шагом.

Изменить: я забыл сказать, что мое изображение имеет следующие свойства:

.baraMeniu img{
    width:100%;
    height:40em;
    position:absolute;
    z-index:0;/*the image*/
}
.baraMeniu a.image{
    /*the clickable image*/
}
.baraMeniu .st{
    font-size:2em;
    padding-top:0.15em;
    padding-left:0.7em;
    padding-right:0.5em;
    color:orange;
    font-family:'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    display:inline;
    text-decoration:none;
    float:left;
}
.baraMeniu .dr{
    font-size:2em;
    padding-top:0.15em;
    padding-left:0.7em;
    padding-right:0.5em;
    color:orange;
    font-family:'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    display:inline;
    text-decoration:none;
    float:right;
}

.baraMeniu #ind{
    text-indent:20px;
}

1 ответ

Решение

Если вы пытаетесь обернуть <a> пометьте ваши изображения, вам не нужно никаких специальных приемов.

<a href="SomeLink.html"><img src="logo.png"></a>

Это будет работать нормально.

Позже вы можете изменить его внешний вид, эффекты наведения и т. Д. С помощью CSS или JS.

РЕДАКТИРОВАТЬ для ясности. Вместо того, чтобы нацеливать ваше изображение через элементы на странице, например a.img.classwhatever{} Для простоты я бы просто дал ему собственный класс или ударил по нему в div. Примените CSS к классу или идентификатору.

<div class="ImageLink">
<a href="SomeLink.html"><img src="logo.png"></a>
</div>

Что касается Z-индекса, пожалуйста, будьте осторожны. Отрицательный означает, что это позади всего остального.

Другие вопросы по тегам