1

Есть страничка сайта - большая фоновая картинка. Резиновая. На этой картинке в определенном месте (нарисованная дверь) нужно поставить кнопку(вход). Проблема в том, что когда шаблон расширяется, или сужается, кнопка не следует за ним, и оказывается на другом месте картинки (где угодно, но не на двери). В дизайне плохо соображаю, помогите, как можно решить проблему. На данный момент имеется цсс:

*{
  margin:0;
  padding:0;
}
body{
  background:#000;
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  font-size:15px;
  color: #fff;
  text-transform:uppercase;
  overflow-x:hidden;
}
.bg_img img{
              width:100%;
              position:fixed;
              top:0px;
              left:0px;
              z-index:-1;
          }
              h2{
              font-size:30px;
              text-align:right;
              position:absolute;
              right:340px;
              top:300px;
              font-weight:normal;
              /*text-shadow:  0 0 3px #0096ff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0096ff, 0 0

70px #0096ff, 0 0 80px #0096ff, 0 0 100px #0096ff, 0 0 150px #0096ff; */}

4
  • Кнопку вешаете абсолютно и указываете отступы в процентах.
    – metazet
    2 дек 2011 в 10:16
  • а где стили для самой кнопки?
    – LeD4eG
    2 дек 2011 в 10:36
  • Можете показать страницу? Уверен, есть способ обойти проблему.
    – ling
    2 дек 2011 в 11:15
  • Вешаю абсолютно, указываю отступы в процентах - та же ерунда, что и в пикселях. Т.е. кнопка движется относительно окна браузера, а не относительно картинки. У меня тут параметры для кнопки выше указаны под стилем h2 =/ Кнопка - простая картинка со ссылкой. 2 дек 2011 в 14:36

2 ответа 2

1

Попоробуйте прописать для кнопки, например

display:inline-block

или

display:block

добавьте к этому указание длины кнопки в пикселях, т.е. что-то типа

width:100px

Ну а дальше надо прописывать float, собственно поидее вот и все...

1
  • Спасибо! display:inline-block; width:300px; float: right; margin-right: 20%; margin-top: 23%; Вот эти условия практически держат кнопку на месте, хотя при уменьшении размеров фона она все-таки немного съезжает по горизонтали. Видимо, потому, что размер картинки-кнопки не изменяется.. есть ли возможность изменять размер кнопки вместе с размером фона? пробовала ставить width 100%, не сработало =( 2 дек 2011 в 14:54
0

Нашла решение и для кнопки. В общем, если кому будет нужно сделать картинку с кнопкой, которая меняется под разрешение экрана вместе с фоном - используйте слои z-index. фон помещайте на -1 слой, картинку с кнопкой на 1 слой и т.п. Соответственно, настройки слоя для картинки:

.stretch { width:100%;
              display:inline;
              float: right;
               z-index: 1;}
.stretch img { width: 25%; margin-top:24%; margin-left:58%;}

(топ и левый край задаете для своих кнопок соответственно тому, где они должны располагаться) В этом случае она показывается там, где нужно, и уменьшается-увеличивается адекватно фону.

Ваш ответ

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

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