0

Доброго времени суток. Я новичёк в вёрстке в связи с этим прошу строго не судить. Поискал подобные проблемы как у меня, но не нашёл, так что если кто-то всёже увидит-прошу дать ссылку.

Необходимо в меню сделать ссылки в состояние ховер и актив дабы обволакивались табличкой, но не бордером а картинкой. Я её вырезал, дас её как фон при актив и ховер

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; }
2
  • надо хотя бы часть кода, связанную с Вашим "описанием" 22 янв 2012 в 12:39
  • Это 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; } 22 янв 2012 в 13:00

1 ответ 1

1

Попробуйте для ссылки установить следующие параметры (вставляем в css:)):

.menu a {width:120px;height:103px; float:left;text-align:center;line-height:103px;}

width и height - это, соответственно, ширина и высота твоей картинки, line-height задает высоту строки, т.е. если мы зададим ее равной высоте картинки, то текст выравняется ровно по центру по вертикали.

P.S. Надеюсь, еще актуально...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.