WAP Мастер Форум

POFIGISST · 2012.06.08 17:08

вот у меня идет такая картинка

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

Отредактировано POFIGISST (2012.06.08 17:13)

Gemorroj · 2012.06.08 17:50

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

POFIGISST · 2012.06.08 18:14

Gemorroj написал:
background-image

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

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

TLENS · 2012.06.09 01:22

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

POFIGISST · 2012.06.09 03:04

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

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

Вложения

скрин01.png

TLENS · 2012.06.09 08:42

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

TLENS · 2012.06.09 15: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>

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>

</body>

</html>

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

Вложения

TLENS · 2012.06.09 16: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>

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>

</body>

</html>

POFIGISST · 2012.06.11 03:55

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

WAP Мастер Форум

#1 2012.06.08 17:08

Как сделать ссылку внутри картинки?

#2 2012.06.08 17:50

Re: Как сделать ссылку внутри картинки?

#3 2012.06.08 18:14

Re: Как сделать ссылку внутри картинки?

Gemorroj написал:

#4 2012.06.09 01:22

Re: Как сделать ссылку внутри картинки?

#5 2012.06.09 03:04

Re: Как сделать ссылку внутри картинки?

TLENS написал:

#6 2012.06.09 08:42

Re: Как сделать ссылку внутри картинки?

#7 2012.06.09 15:54

Re: Как сделать ссылку внутри картинки?

Код:

#8 2012.06.09 16:23

Re: Как сделать ссылку внутри картинки?

Код:

#9 2012.06.11 03:55

Re: Как сделать ссылку внутри картинки?

Дополнительно