» WAP Мастер Форум   https://forum.wapinet.ru/index.php
» HTML/xHTML/WML   https://forum.wapinet.ru/viewforum.php?id=4
» Как сделать ссылку внутри картинки?   https://forum.wapinet.ru/viewtopic.php?id=1908

POFIGISST » 2012.06.08 13:08

вот у меня идет такая картинка
http://hideporn.net/touch/art/v_menu_li_bg.gif

мне нужно чтоб в этой картинке посередине в ячейках была ссылка,и в верхней ячейке и в нижней,выравнивание слева,как такое можно сделать в css ?

Gemorroj » 2012.06.08 13:50

сделать у ссылки background-image

POFIGISST » 2012.06.08 14:14

Gemorroj написал:

background-image

спс Паш, лучший ответ:)

http://htmlbook.ru/css/background-image

TLENS » 2012.06.08 21:22

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

POFIGISST » 2012.06.08 23:04

TLENS написал:

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

я тебе в аське скину адрес,посмотришь как я сделал,хотя вот скрин прикрепляю,несмог я вытаставить чтоб ссылки шли с одинаковым отступом сверху и снизу этой картинки,пробовал margin-top , но он чет не срабатвает(

TLENS » 2012.06.09 04:42

position: relative;
top: 5px;
Если не получится то обверни блоком

TLENS » 2012.06.09 11:54

Код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>Test</title>
<style type="text/css">
div.ab {
height: 35px;
background: url('14.gif') left top no-repeat;
}
div.ab:focus, div.ab:hover, div.ab:active {
background-position: 0 -50px;
}
div.ab a {
position: relative;
top: 5px;
left: 10px;
}
</style>
</head>
<body>
<div class="ab"><a href="#">Link1</a><br /></div>
<div class="ab"><a href="#">Link2</a><br /></div>
<div class="ab"><a href="#">Link3</a><br /></div>
</body>
</html>

::thumb1047::
На средний наведен курсор мышы

TLENS » 2012.06.09 12:23

Я завтыкал что обработчики на hover и focus не срабоют на блок

Код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title>Test</title>
<style type="text/css">
a.b {
display: block;
height: 35px;
padding-left: 10px;
padding-top: 5px;
background: url('14.gif') left top no-repeat;
}
a.b:focus, a.b:hover, a.b:active {
background-position: 0 -50px;
}
</style>
</head>
<body>
<a class="b" href="#">Link1</a>
<a class="b" href="#">Link2</a>
<a class="b" href="#">Link3</a>
</body>
</html>
POFIGISST » 2012.06.10 23:55

aitrainsher
самый лучший ответ по теме:D :D