Доброго времени суток. Я новичёк в вёрстке в связи с этим прошу строго не судить. Поискал подобные проблемы как у меня, но не нашёл, так что если кто-то всёже увидит-прошу дать ссылку.
Необходимо в меню сделать ссылки в состояние ховер и актив дабы обволакивались табличкой, но не бордером а картинкой. Я её вырезал, дас её как фон при актив и ховер
a:hover {
background: url(ramka.png) top left no-repeat;
color: #e4d191;
text-decoration: none;
}
Теперь суть проблемы. А их две. 1) Меню расположено горизонтально. Справа и слева есть ещё по элементу. с заданной шириной, которых флоатами я прилипил к правому и левому краю родительского элемента. Задал ширину нашему диву в котором ссылки должны быть в картинках, но так как картинки, естественно больше чем просто ссылка. И получается, что при наведение на ссылку виден только уголочек моей рамки(ну изображение там рамкой). Так, вот пытался я ссылки раздвинуть так: дал ширину диву и внутри него попытался растянуть ссылки по средствам
text-align: justify;
но это не дало результата. ссылки как были не растянутые так и остались(правда по середине элемента. наверно потому, что на определённом этапе есть дивы обёрнуты тегом center в HTML). Попытался задать между ними пробелов, они стали друг от друга на эти пробелы отталкиваться, но картинка всёравно видит свою зону только вокруг слова и не захватывает эти пробелы(чего и стоило ожидать).
Вот собственно на этом моя фантазия закончилась и я не знаю как бы ещё попытаться что-то с этим поделать.
Параллельно возникла ещё одна проблема. Как я уже говорил картинка представляет из себя рамку достаточно крупную. Но слово в ней должно располагаться по середине. Понимаю, что для начала надо решить первый вопрос, а потом можно попытаться фоновую картинку отступами загнать в нужное место, но может кто-то заранее знает как оно сработает? Потому как сейчас получается, что картинка прилипает верхним левым углом к верхнему левому углу слова которое должно будет оказаться по середине.
Всем кто хотябы прочитает это большое спасибо, а тем кто попытается понять и помочь-просто огромная человеческая благодарность. Я может(скорее всего) криво выразил мысли, ну если где-то надо уточнить-напишите, я попытаюсь исправится. Очень прошу помочь в данном вопросе.
Добавлено.
Это HTML.
<center> <div class="wapka"> <div class="kartinka"><img src="emblema.png" alt="логотип"></div> <div class="menu"><a href="">Company</a> <a href="">Services</a> <a href="">Expertise</a> <a href="">Our Team</a> <a href="">K&A club</a></div> <div class="en_ru"><a href="">EN</a> <a href="">RU</a></div> </div> </center>
Это CSS.
.wapka{ height:200px; width: 905px; }
.kartinka{ display: inline; width: 275px; vertical-align: baseline; float:left; }
.menu{ display: inline; float:center; text-align: justify; width: 560px; }
.en_ru{ display: inline; width: 70px; float:right; }
.menu > a:link { color:#ffffff; text-decoration: none; } .menu > a:visited { color: #ffffff; text-decoration: none; } .menu > a:hover { background: url(ramka.png) top left no-repeat; color: #e4d191; text-decoration: none; } .menu > a:active{ background: url(ramka.png) top left no-repeat; color: #e4d191; text-decoration: none; }