| |
|
|
| | Здравствуйте.
Столькнулся с одной проблемой. Есть меню определенной ширины (допустим 185 пикселей) с несколькими пунктами. Хотел при помощи CSS сделать так, чтобы на заднем плане каждой ссылки был фон в виде кнопочки1, при этом при наведении на ссылку фон (кнопочка1) заменялась на кнопочку2, а при нажатии на кнопочку3. Все рисунки (кнопочка1,2 и 3) одного размера (185 на 30).
HTML код следующий:
<div id="menu">
<div class="knopka">
<a href=#>Галерея</a>
</div>
<div class="knopka">
<a href=#>Гостевая книга</a>
</div>
</div>
|
CSS код следующий
#menu {
text-align: center;
width: 185px;
}
.knopka {
width: 185px;
height: 30px;
}
a {
background-repeat: no-repeat;
}
a:link{
background-image: url(knopka1.jpg);
}
a:visited{
background-image: url(knopka1.jpg);
}
a:hover{
background-image: url(knopka2.jpg);
}
a:active {
background-image: url(knopka3.jpg);
}
|
А дальше загвоздка в том, что в IE отображается как задумал, а в Опере и FF фон стоит только за буквами. Пробовал поставить в CSS для тега "а" ширину 185 и высоту 35 - не помогло.
Одно решение есть, подогнать отступы (padding) для каждого пункта меню, чтобы фон полностью растянулся, но во-первых это не удобно, а во-вторых бывают пользователи с MacOS, Unix. А у них, я думаю, другие шрифты и если чуть не совпадают по длине, то получается полная хрень.
Можно ли решить данную проблему с помощью monospace шрифтов. Меня интересует тут один вопрос: у всех ли monospace шрифтов отношение высоты к ширене одинаковое (т.е. если я поставлю размер шрифта 16, то будет ли ширина букв 9 пикселей (цифра из головы) для monospace шрифтов под MacOS, Unix и окошки, стандартизована эта величина или нет?)?
Длинный вопрос, но может кто знает более элегантные решения проблемы, чем у меня? | |
| |
|
|
| |
|
|
| |
для: boozim
(16.09.2008 в 14:15)
| | | А что мешает сделать ссылку блочным элементом и указать ей теже размеры, что и родительский див. Или проще вообще заменить дивы на блочные ссылки и прописать фоны.
Если так не устраивает, то используйте display:inline-block, для ИЕ возвращайте на display:inline. Для Мозилы display:-moz-inline-box | |
| |
|
|
| |
|
|
| |
для: Madman
(16.09.2008 в 14:31)
| | | Я вообще-то, признаться честно, CSS только начал осваивать, поэтому не понимаю что значит сделать ссылку блочным элементом. Имеете в виду поставить для ссылки a {width: 185px;
height: 30px;}. если так, то не помогло. Или нужен какой-то другой параметр поставить, чтоб сделать блочный элемент?
Пробовал заключить ссылку (после тега "а") в теги "p" и указать для них высоту и ширину, вообще фон пропал. | |
| |
|
|
| |
|
|
| |
для: boozim
(16.09.2008 в 14:46)
| | | перепишите ваш код как:
<div id="menu">
<a href="#" class="knopka">Галерея</a>
<a href="#" class="knopka">Гостевая книга</a>
</div>
|
CSS:
#menu {
text-align: center;
width: 185px;
}
.knopka {
width: 185px;
height: 30px;
display:block;
background: url(knopka1.jpg) no-repeat 0 0;
}
.knopka:hover{
background-image: url(knopka2.jpg);
}
.knopka:active {
background-image: url(knopka3.jpg);
}
|
| |
| |
|
|
| |
|
|
| |
для: Madman
(16.09.2008 в 15:38)
| | | Спасибо большое, жаль что пиво по интернету нельзя передать, а то бы налил. | |
| |
|
|
| |
|
|
| |
для: boozim
(16.09.2008 в 15:49)
| | | Всегда рад ;) | |
| |
|
|
