1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

Фон сайта как ссылка.

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем halfhope, 18 ноя 2013.

  1. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    284
    Симпатии:
    309
    Как сделать фон сайта ссылкой? Т.е. допмустим контейнер сайта выровнен по центру, размер 980px; По бокам остается расстояние и виден фон тега body.
    Можно ли сделать его ссылкой? Пытался сделать псевдо фон, который будет :
    HTML:
    <div style="display:block;top:0px;left:0px;width:100%;height:100%;position:fixed;z-index:2;cursor:pointer;" onClick="alert('ass');"></div>
    А у контейнера z-index:5; Но на контейнере все равно местами есть пробелы, но которых cursor:pointer и при клике происходит alert. Как избавиться от этого?
    UPD#1
    Пробовал поставить z-index:-1; у блочного элемента, тот же результат.
     
    Последнее редактирование: 18 ноя 2013
    halfhope, 18 ноя 2013
    #1
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    не сложно. Боди не нужен. Уже в боди делаешь один контейнер и в него вкладываешь контент и еще один с бэкраундем:
    HTML:
    <div class="div1">
<div class="div2">
    <div>блок с бэкграундем</div>
<div>
<div>блок со всем остальным контентом</div>
</div>
    и в css вбиваешь что-то типо:
    HTML:
    .div2 {
    background: url("/branding/fon.jpg") no-repeat scroll center top #000;
    height: 100%;
    margin: 0 auto;
    min-width: 999px;
    padding: 0;
    width: 100%;
}
    p.s. Это не стопроцентно рабочая вёрстка - это только пример реализации. возможно нужно подпилить.
     
    $iD, 18 ноя 2013
    #2
    halfhope нравится это.
  3. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    284
    Симпатии:
    309
    У меня все равно не получилось, пытался по резному сделать, фон контейнера все равно "просвечивает"( В инете много инфы на эту тему, но почему-то на дефолтном шаблоне opencart все варианты не работают. Возможно, что я не понимаю механизм работы, но тут вроде ничего сложного нет. Прошу помощи.
     
    halfhope, 19 ноя 2013
    #3
    HPlus нравится это.
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Покажите что получилось и я подправлю.
     
    Dotrox, 19 ноя 2013
    #4
    halfhope нравится это.
  5. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    284
    Симпатии:
    309
    Адрес http://oc.halfhope.ru/
    Обернул контейнер во враппер и добавил два дива первый ссылка, второй фон.
    Вот так:
    HTML:
    <div id="wrapper">
    <div style="cursor:pointer;" onClick="alert('ass');">
        <div style="background:url('image/data/background_manager/background/881.png');position:fixed;top:0px;left:0px;width:100%;height:100%;"></div>
    </div>
    <div id="container">Контент</div>
</div>
    --- Добавлено, 19 ноя 2013 ---
    Dotrox, спасибо за помощь, получилось!!!
    Как оказалось это было самое простое решение, которое я по каким-то причинам отверг. (Руки кривые)
    Код:
    <body>
    <a href="http://example.com" id="bglink">jump to example.com</a>
    <div id="container">...</div>
</body>
    Стили:
    Код:
    <style>
  #bglink{
    display:block;
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:0;
    text-indent:-5000em;
  }
  #container{
    position:relative;
    z-index:10;
  }
</style>
    Все прекрасно работает, решение нашел на http://wordpress.org/support/topic/can-you-make-a-body-background-image-clickable.
    Вс    ем большое спасибо!
     
    Последнее редактирование: 19 ноя 2013
    halfhope, 19 ноя 2013
    #5
    HPlus нравится это.
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Dotrox, 19 ноя 2013
    #6
    halfhope нравится это.
  7. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    284
    Симпатии:
    309
    Нет, сейчас исправлю, спасибо.
     
    halfhope, 19 ноя 2013
    #7
    HPlus нравится это.
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Советую фон на сайте сделать фиксированным, а то при прокрутке в глазах рябит.
    И прокрутку наверх нужно сделать заметней. Текст там не видно почти и непонятно, что это такое.
     
    Dotrox, 20 ноя 2013
    #8
  9. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    284
    Симпатии:
    309
    Спасибо, действительно, нужно добавить возможность делать фон фиксированным. А пока что фиксация фона работает только для боковых изображений в шаблоне "Два боковых изображения + контейнер".
     
    Последнее редактирование: 22 ноя 2013
    halfhope, 22 ноя 2013
    #9
    HPlus нравится это.
  10. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Это сделать очень просто: поставьте этот фон не на body (хотя там можно оставить), а на ссылку .bg_mgr_link.
    А вообще принцип такой: нужно под контент подложить блок с шириной и высотой в 100% и position: fixed - его фон и станет фиксированным фоном страницы. В вашем случае таким блоком уже является ссылка.
     
    Dotrox, 22 ноя 2013
    #10
    halfhope нравится это.
< focus в input | народ помогите сделать менюшку >