Тимур Хакимзянов
31 год, Россия
30 сообщений
#11 лет назад
Привет всем, помогите советом:
Есть сайт - http://www.molotok-design.ru . Верхнее горизонтальное меню сделано так - фоном идут картинки и на каждой из них - соответствующая надпись-ссылка. В IE & FF - все отображается и прекрасно нажимается(IEv6,7 + FFv2.0.0.12 ). Пробуешь в OPERAv9.25 - все отображается, но ссылки не нажимаются. Как исправить?
Код в странице:
<div class="links">
<div class="ll"><img src="images/index01.jpg" width=194 height=44 alt="" border="0"><div class="l1"><a href="index.html">> О Нас</a></div><img src="images/index02.jpg" width=131 height=44 alt="" border="0"><div class="l2"><a href="uslugi.html">> Услуги</a></div><img src="images/index03.jpg" width=116 height=44 alt="" border="0"><div class="l3"><a href="contacts.html">> Контакты</a></div><img src="images/index04.jpg" width=123 height=44 alt="" border="0"><div class="l4"><a href="work.html">> Работы</a></div><img src="images/index05.jpg" width=102 height=44 alt="" border="0"><div class="l5"><a href="foto.html">> Фото</a></div><img src="images/index06.jpg" width=112 height=44 alt="" border="0">
</div></div>

Код в css:
links {
font-family: Courier;
color: white;
font-size: 16;
display:inline;
font-weight: bold;
}
.ll { width: 790;
display:inline;
position: relative;
}

.l1 {
position: absolute;
top: 12;
left: 250;
display:inline;
z-index: 50;
}
.l1, x:-moz-any-link {
top: -20;
}
.l2 {
position: absolute;
top: 12;
left: 355;
display:inline;
}
.l2, x:-moz-any-link {
top: -20;
}
.l3 {
position: absolute;
top: 12;
left: 460;
display:inline;
}
.l3, x:-moz-any-link {
top: -20;
}
.l4 {
position: absolute;
top: 12;
left: 582;
display:inline;
}
.l4, x:-moz-any-link {
top: -20;
}
.l5 {
position: absolute;
top: 12;
left: 690;
display:inline;
}
.l5, x:-moz-any-link {
top: -20;
}
Николай М.
34 года, Украина
1894 сообщения
#11 лет назад


Опера как я заметил косит больше всего, проверяйте стили, и код на валидность в дримюве, фаерфокс имеет мощние инструменти тоже для отладки, на крайняк валидатор w3.org
Тимур Хакимзянов
31 год, Россия
30 сообщений
#11 лет назад
Спасибо, MMM_Corp, но я думаю, что если валидатор увидит мой css - он повесится, а зачем это - сервис-то хороший, вдруг кому еще пригодится))
Никто не мог бы подсказать, где можно накосячить в связке Опера+картинка бэкграундом+надпись-ссылка с абсолютным позиционированием?
Владимир З.
35 лет, Украина
366 сообщений
#11 лет назад
top: хх;
left: ххх;

при позиционировании нужно указывать единицы измерения
Андрей Кошелев
34 года, Россия
24 сообщения
#11 лет назад
Я бы советовал полностью переделать меню. Если интересно -- пиши в личку, могу чуть-чуть проконсультировать
Тимур Хакимзянов
31 год, Россия
30 сообщений
#11 лет назад
sitesfaction, сделал четкое указание px, на всякий случай.. Но не помогло.. Куда еще копать?
Спасибо за отклик..
Тимур Хакимзянов
31 год, Россия
30 сообщений
#11 лет назад
akoshelev, тут видишь какое дело.. Меню как раз сейчас и подверглось переделке и с трудом))) было подогнано к дизайну - раньше там были картинки со словами(являлись ссылкой) - а теперь те же картинки бэкграундами легли, а ссылки стали чисто текстовыми.. Проконсультировать по структуре? Пиши сюда - в любом случае - кому-нибудь да пригодится, помимо меня.. Буду благодарен..
Андрей З.
39 лет, Украина
57 сообщений
#11 лет назад
Если не вдаваться в подробности, то можно попробовать так
.links img { position:relative; z-index:49; }
.links a { position:relative; z-index:50; }
.links div { z-index:50; }

а если вдаваться - лучше все переделать
Андрей Кошелев
34 года, Россия
24 сообщения
#11 лет назад
Тогда в 2-х словах как сделать:

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

HTML
<div class="menu_layout">
<div class="item"><a href="#">текст ссылки</a></div>
<div class="item"><a href="#">текст ссылки</a></div>
<div class="item"><a href="#">текст ссылки</a></div>
</div>


CSS
.menu_layout{background:"урл до картинки с градиентом" repeat-x 0 0;}
.menu_layout .item{float:left; padding-left:35px; background:"урл с тремя квадратиками" no-repeat 0 0; }
.menu_layout .item a{....}


Думаю с позиционированием <div class="menu_layout"> проблем не будет.
Для<div class="item">padding и background-position по вкусу.