Width 100% для меню и футера

Тема в разделе "OpenCart", создана пользователем Reqman, 17 окт 2013.

  1. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    Ребята, пожалуйста помогите реализовать меню и футер с параметром width:100%, т.к. это представлено на изображении снизу. Я читал, что нужно menu и footer вынести на пределы контейнера. Но у меня не получается. Помогите пожалуйста решить эту задачу. Работаю на основе стандартного шаблона. Буду очень признателен любому совету или подсказке. Спасибо за внимание!
     
  2. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    В данном случае вам нужно будет удалить свойство
    Код:
    #container{width:980px;margin-left:auto;margin-right:auto;}
    Итак, теперь вся страница расползлась по ширине, теперь добавьте
    Код:
    #header{width:980px;margin-left:auto;margin-right:auto;}
    Как видим, блок header выравнен по центру. Теперь нужно создать новый блок, который будет вмещать в себя содержимое страницы, начиная с меню и кончая началом футера(он будет выровнен по центру). Назовем его h_container.
    Так как разметка модуля "такая непривычная", не знаю как её обозвать, блок h_container будет открываться в файле header.tpl, а закрываться в footer.tpl.
    В файле header.tpl перед блоком <div id="notification"></div> добавить
    Код:
    <div id="h_container">
    В файле footer.tpl в самом начале добавить
    Код:
    </div>
    и прописать стиль
    Код:
    #h_container, #header{width:980px;margin-left:auto;margin-right:auto;}
    Если что-то будет криво отображаться, пеняйте на себя. Т.к. я делал по памяти. Возможно придется удалить блок container(начало из header.tpl, конец из footer.tpl).
     
    HPlus и Reqman нравится это.
  3. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    halfhope, большое спасибо, но не помогло. Все съехало и отображается очень криво. См. скриншот.
     
  4. Yoda

    Yoda

    Регистрация:
    5 фев 2013
    Сообщения:
    122
    Симпатии:
    22
    Возможно контейнер стоит оставить без изменений, а сам футер вынести в вёрстке за пределы контейнера. Как вариант
     
    Reqman нравится это.
  5. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    Я так пробовал, но к сожалению ничего у меня не вышло. Вроде все эллементарно, но не получается :(. Может у кого-то есть пример header.tpl с данной реализацией? Спасибо.
     
  6. Yoda

    Yoda

    Регистрация:
    5 фев 2013
    Сообщения:
    122
    Симпатии:
    22
    Тогда можно контейнер резиновым сделать. Попробовать

    #container{width:100%;margin-left:auto;margin-right:auto;}
    --- Добавлено, 17 окт 2013 ---
    Вроде частично получилось

    Всё растягиваем
    #container {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 100%;
    }

    делаем фиксированным основной блок сайта и выравниваем по центру
    #content {
    margin: 0 auto;
    min-height: 400px;
    width: 980px;
    }

    Жирным - что изменено или добавлено
     
    Последнее редактирование: 17 окт 2013
    Reqman нравится это.
  7. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    Yoda, спасибо большое за очередную подсказку! Скажите пожалуйста, мне эти действия нужно сделать в изначальном файле css или уже с действиями которые описал halfhope?
    --- Добавлено, 17 окт 2013 ---
    Да Yoda, действительно частично получилось! Большое Вам спасибо! Единственное, что хотелось бы так это выравнять элементы меню по центру и сделать футер резиновым. Скриншот прилагается ниже:
     
    Последнее редактирование: 17 окт 2013
  8. Yoda

    Yoda

    Регистрация:
    5 фев 2013
    Сообщения:
    122
    Симпатии:
    22
    как сделать, чтобы сами элементы меню были по центру, при чёрном фоне на всю ширину - я не знаю. Я когда-то такое хотел сделать, долго пробовал разные варианты, у меня ничего не получилось, и я забил на это... Можно к самому меню #menu применить такой же код, как к content, само меню будет по центру, но элементы также будут слева.

    Футер на всю ширину же? Разве это не резиновость?
     
    Reqman нравится это.
  9. Reqman

    Reqman

    Регистрация:
    25 фев 2013
    Сообщения:
    213
    Симпатии:
    62
    Yoda,
    Да, на всю ширину. Он у меня сейчас не на весь экран.
     
  10. tomor

    tomor

    Регистрация:
    29 июн 2013
    Сообщения:
    35
    Симпатии:
    1
    Заключите содержимое меню в div, а его отцентруйте