0

Не получается сделать ссылки на состояние hover и active такие как тут.

У меня получается только так.

Перепробовал кучу идей, но что-то никакой не получился.
Файл ramka.png стоящий как background у a:active и hover - это и есть та рамка, которая должна быть на этом состоянии.

Кто может подсказать?

2
  • а что было сделано для достижения поставленной цели?
    – Artem
    Commented 27 янв. 2012 в 17:44
  • Попытался каждый пунк меню по отдельность залепить в див(и в спан)и дать ему ширину и высоту таких же размеров как у рамки, но никакого эффекта. попытался падингами и маргинами погонять картинку(ну которая рамка), тоже толку не было. Пытался просто картинку сделать из ссылки, и вставлять как картинку, а не фон, но результата опять не появилось. Чёт ещё было, но совсем извращенское и к сожалению так и не добился итога. Commented 27 янв. 2012 в 17:56

2 ответа 2

1

Пример решения:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.menu {
    width:100%;
    border:0px solid black;
}
div.menu a {
    border:0px solid red;
    display:inline-block;
    width:25%;
}
div.menu a:hover div {
    border:0px solid green;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    background-image: url('ramka.png');
}
div.menu a div span {
    border:0px solid blue;
    display:block;
    width:25%;
    font-size:70%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

</style>
</head>

<body>
<div class="menu">
    <a href=""><div style="line-height:300%;"><span>123</span></div></a>
</div>
</body>
</html>

div.menu - содержит нужные менюшки, от его ширины задаем ширину ссылок в %.

div.menu a - display:inline-block - чтобы можно было задать ширину ссылки

div.menu a:hover div - background-size: contain; background-position: 50% 50%; - по середине, чтобы полностью входила (т.е. либо по ширине, либо по высоте).

margin-left:auto;margin-right:auto; - выравнивание span'a по середине div'a

text-align:center - чтобы текст был по середине span'a (а значит и div'a, а значит и ссылки)

включил border, поставь вместо 0px, например, 1px и поиграй остальными значениями - увидишь как и что влияет.

Затем позиционируй элементы так, как тебе надо

1

не могу назвать себя спецом в верстке, но меню, ИМХО нужно оформлять списком. А для достижения цели, вам понадобятся сии стили:

<style type="text/css" >
ul li {
    display:block;
    width:92px;
    height:128px;
    list-style:none;
    float:left;
    text-align:center;
}
ul li:hover {
    background-image:url('ramka.png')
}
</style>

меню:

<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

ну или, если необходимо обойтись без списков, то присвоить стили из ul li и ul li:hover к a

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.