Добрый день друзья! Я пишу сайт с нуля, сейчас закончил рисовать дизайн, но вот возникла проблема, взгляните на картинку
Красным пунктирным прямоугольником я выделил границы картинки с коленкой девушки, и всё дело в том, что границы картинки заползают на кнопку и потому в этом месте нажатие по кнопке невозможно будет сделать. Вопрос : можно ли как-то программно "обрезать" нижнюю часть картинки и по бокам, дабы пустое место на картинке не являлось его частью и можно было нажать на кнопку?
У меня уже был вариант - коленку девушки поместить на задний план, а кнопку на передний и обрезать часть картинки, которую занимает коленка у девушки. Но это на крайняк.
Ответ
Вот вам ещё способ: http://jsfiddle.net/Q3RSR/1/
.navbar-nav {
margin-top: 0;
margin-bottom: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-default .navbar-nav > li > a:hover {
background: yellow;
}
.girl {
position: relative;
}
.girl img {
display: block;
}
.gp {
position: absolute;
z-index: 16;
}
#gp1 {
bottom: -2px;
left: 203px;
}
#gp2 {
bottom: -4px;
left: 204px;
}
#gp3 {
bottom: -6px;
left: 205px;
}
#gp4 {
bottom: -8px;
left: 208px;
}
#gp5 {
bottom: -10px;
left: 214px;
}
#gp6 {
bottom: -12px;
left: 218px;
}
Он ужасен чуть более, чем полностью :) Но задачу решает, притом никак не затрагивая саму менюшку. Кликабельность кнопки при этом плавно обходит коленку.
А менюшку затрагивать не стоит, поскольку её вероятнее всего впоследствии будут редактировать люди, недостаточно компетентные в разработке сайтов, чтобы прописывать массивы значений для тэга . Да и даже самому разработчику не придётся этого делать, если пункты меню изменятся, и расположение кнопки по отношению к картинке изменится. Кроссбраузерность тоже имеет значение: ширина пунктов меню (а следовательно и положение данного пункта относительно картинки) может зависеть от шрифтов, которые как минимум в каждой ОС свои.
Порастягивайте вширь окно браузера: положение коленки относительно менюшки будет меняться, но работать корректно будет при любом положении.
Комментариев нет:
Отправить комментарий