Фоновый рисунок для ссылки.

[Yaros]

Есть группа ссылок, при наведении на каждую из которых должен появляться фоновый рисунок, так, чтобы текст располагался по центру рисунка и рисунок этот не обрезался. Пока что сделать это не получается.
На данный момент в таблице стилей есть вот такое:

Код:

#l_head .menu{ display: inline; position: absolute; width: 70%; padding-left:1em; word-spacing: 0.6em } #l_head .menu A:link, #l_head .menu A:visited, #l_head .menu A:active{ color: black; display: inline; margin: 0 1em; padding: 0; font-size: 0.7em; width: 66px } #l_head .menu A:hover{ color: white; display: inline; background: url(img/menu-bg.jpg) no-repeat; margin: 0 1em; padding: 0; width: 66px

Проблема в том, что сейчас рисунок обрезается и текст не располагается по центру его. Буду рад любым предоложениям, способным исправить данное положение дел

[sergio]

Есть группа ссылок, при наведении на каждую из которых должен появляться фоновый рисунок, так, чтобы текст располагался по центру рисунка и рисунок этот не обрезался. Пока что сделать это не получается.
Проблема в том, что сейчас рисунок обрезается и текст не располагается по центру его. Буду рад любым предоложениям, способным исправить данное положение дел

Что-то я сомневаюсь, что рисунок подставляемый как фон для текста может "не обрезаться". (Рассуждая логически. ) Поскольку бэкграунд он на то и бэкграунд, что заполняет фон внутри контуров объекта. А что, простите, значит "текст не располагается по центру его"??? хотели сказать - центр рисунка не располагается под центром текста что ли?
Исправить можно орудую скриптами...

[Yaros]

Да, именно это я и хотел сказать...
Java Script - наше все?

[Deo]

display: inline;
position: absolute;

С матчастью у вас слабовато - высотой строчных (т.е. инлайн) элементов напрямую управлять нельзя, она зависит от высоты контента (устанавливаемой косвенно через line-height и font-size). Они даже вертикальных внешних отсупов (margin-top и margin-bottom) не имеют

Код: Выделить всё

background: url(img/menu-bg.jpg) no-repeat;

допустим
menu-bg.jpg - 66px*40px

Код: Выделить всё

#l_head .menu{
display:block;
clear:both;
}


#l_head .menu A:link, #l_head .menu A:visited, #l_head .menu A:hover, #l_head .menu A:active{
display: block;
float:left;
height: 40px;
min-width: 66px; /*IE6 этого не умеет, но в остальных браузерах минимальная ширина = ширине фоновой картинки*/
_width:66px; /*Зато IE6 умеет вот это т.к. фактически для него width===min-width */
}

#l_head .menu A:hover
background: url(img/menu-bg.jpg) center center no-repeat;
}