0

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

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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