Диз ссылки ХЕЛП

[rafic]

Подскажите как сделать CSS стиль для ссылки. Текст будет изменяться в длине, так что средняя часть должна подстраиваться под длину текста. Макет ниже. Черные части это картинки, их 3.

И не могу сделать ссылке фон картинкой при наведении. Прописываю:

.ilink{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #ff0000;
text-decoration: none;
}
.ilink:hover{
background:url(ilink-bg.png);
width:70px;
height:50px;
text-decoration: none;
}

<a class="ilink" href="">Главная</a>

и не работает. Где ошибка?

 

[t3s]

Где ошибка?

ТС, вашу ошибку указал Compressor
вы обьявляете класс

.ilink :hover

а правильно будет

.ilink a:hover

от себя порекомендую кроме картинки указать ещё и максимально близкий к фону цвет при наведении, например так:

background:#000 url(ilink-bg.png);

это позволит нормально видеть меню пользователям с отключенной графикой + миниопера не будет пытаться "угадывать" а покажет ваш цвет

 

[rafic]

И все равно почему-то не работает
Мне нужно, что бы при наведении на ссылку сзади появлялась картинка. Пример я показал в миниатюре. Просто возможно я не корректно выразился.
А что насчет оформления ссылки по макету который я показал в первом посте? У кого-то есть идеи?

 

[bucs]

И все равно почему-то не работает
Мне нужно, что бы при наведении на ссылку сзади появлялась картинка. Пример я показал в миниатюре. Просто возможно я не корректно выразился.

Можно заюзать <ul><li> списки, с ними легче будет, задать им классы в css.

А что насчет оформления ссылки по макету который я показал в первом посте? У кого-то есть идеи?

Может в css так:

.ilink, .link a{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
width:70px;
height:50px;
color: #ff0000;
text-decoration: none;
}
.ilink a:hover{
background-image:url(Для просмотра ссылки Войди или Зарегистрируйся) no-repeat;
width:70px;
height:50px;
text-decoration: none;
}

А в коде так:
<div class="ilink"><a href="/">текст</a></div>

 

[rafic]

Хм... создать меню оказалось не так просто как я думал. По этому прошу помощи у Вас.

.ilink a{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
width:70px;
height:50px;
text-decoration: none;
}
.ilink a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
width:70px;
height:50px;
text-decoration: none;
background: url(ilink-bg.png) no-repeat bottom;
display: block;
}

<span class="imenu-span-left"> <div class="ilink"><a href="">ссылка1</a></div> </span>
<span class="imenu-span-left"> <div class="ilink"><a href="">ссылка2</a></div> </span>
<span class="imenu-span-left"> <div class="ilink"><a href="">ссылка3</a></div> </span>
<span class="imenu-span-left"> <div class="ilink"><a href="">ссылка4</a></div> </span>
<span class="imenu-span-right"><div class="ilink"><a href="">ссылка5</a></div> </span>

исходный результат должен быть примерно таким.

 

[rafic]

bucs, на макете показаны 3 картинки которые нужно разместить с помощью css кода и дивов. Вы глядеть в таблице это будет так:
<table>
<tr>
<td>левая картинка</td>
<td>центральная картинка</td>
<td>правая картинка</td>
</tr>
</table>

 

[Razminka]

Чета запуталась я в том что надо сделать, что работает, что не работает.
Вот статья в тему
Для просмотра ссылки Войди или Зарегистрируйся
От себя прибавлю - не забывать прописывать doctype документа, а то может что-то некорректно работать.

 

[rafic]

Доктайпа нет потому, что это тестовый вариант))А статью почитаю!