Перейти к содержанию
volodyakolchin

[РЕШЕНО] Помогите сверстать футер в 2 колонки

Рекомендуемые сообщения

Привет!

 

Есть футер.

Добавил в него статей, и они строятся все в одну колонку.

Что надо внести в footer.tpl чтобы они отображались в две колонки? (4 статьи в одной, 3 в другой колонке)

Спасибо за помощь!

post-686336-0-73287100-1408966833_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Что надо внести в footer.tpl чтобы они отображались в две колонки? (4 статьи в одной, 3 в другой колонке)

Несколько вариантов:

- ограничить высоту и всё, что не помещается чтобы уходило вправо;

- считать строчки и если больше 4ёх то добавляем класс для размещения справа;

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Несколько вариантов:

- ограничить высоту и всё, что не помещается чтобы уходило вправо;

- считать строчки и если больше 4ёх то добавляем класс для размещения справа;

Спасибо! Я очень новичек в верстке. Но тупо ограничить высоту футера в css привело к тому, что в футере справа появился скролл бар и возможность прокручивать его, чтоб увидеть что там спряталось ниже. В общем, не то.

А вот что за второй вариант? как его реализовать, подскажите, пожалуйста? Статей 7. то есть было бы хорошо, если их разбить на 2 колонки.

Главное, что писать в footer.tpl? как туда добавить класс, чтоб во второй колонке отображались три статьи?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо! Я очень новичек в верстке. Но тупо ограничить высоту футера в css привело к тому, что в футере справа появился скролл бар и возможность прокручивать его, чтоб увидеть что там спряталось ниже. В общем, не то.

А вот что за второй вариант? как его реализовать, подскажите, пожалуйста? Статей 7. то есть было бы хорошо, если их разбить на 2 колонки.

Главное, что писать в footer.tpl? как туда добавить класс, чтоб во второй колонке отображались три статьи?

Откройте файл футера в дефолтном шаблоне ( \catalog\view\theme\default\template\common\footer.tpl ) и посмотрите как там свертано колонками.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Откройте файл футера в дефолтном шаблоне ( \catalog\view\theme\default\template\common\footer.tpl ) и посмотрите как там свертано колонками.

Спасибо!

Да, я давно в него смотрю. Но я ж говорю, не смыслю в php. Вижу, что сверстано, дивы column стоят. (три из 4-х дефолтных я закомментировал за ненадобностью, остался только первый) А как и что вписать туда в них, я не знаю. Ведь, если я просто скопирую во второй div то, что написано в первом - я просто продублирую его, а мне это не надо. Мне надо разбить первый на 2 части.

Спасибо за совет, но мне нужно более детальное руководство.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо!

Да, я давно в него смотрю. Но я ж говорю, не смыслю в php. Вижу, что сверстано, дивы column стоят. (три из 4-х дефолтных я закомментировал за ненадобностью, остался только первый) А как и что вписать туда в них, я не знаю. Ведь, если я просто скопирую во второй div то, что написано в первом - я просто продублирую его, а мне это не надо. Мне надо разбить первый на 2 части.

Спасибо за совет, но мне нужно более детальное руководство.

 

Ну так сделайте два дива column. В первом оставьте часть инфы, остальную инфу разместите во втором диве. Нет?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну так сделайте два дива column. В первом оставьте часть инфы, остальную инфу разместите во втором диве. Нет?

эмм... нет. Потому что там в первом диве вот такой список

 

 <ul>
      <?php foreach ($informations as $information) { ?>
      <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
      <?php } ?>

    </ul>

 

Как его разделить на определенные ссылки? куда это надо влезть, чтобы редактировать этот список information?

 

Спасибо!

Но ответа так и нет...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

эмм... нет. Потому что там в первом диве вот такой список

 

 <ul>
      <?php foreach ($informations as $information) { ?>
      <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
      <?php } ?>

    </ul>

 

Как его разделить на определенные ссылки? куда это надо влезть, чтобы редактировать этот список information?

 

Спасибо!

Но ответа так и нет...

Список information - это типовые статьи ( в админке "Каталог \ Статьи")

 

Откройте файл контроллера \catalog\controller\common\footer.php. 

Там показано как формируются переменные, которые выводятся в footer.tpl

Н-р, переменные $contact, $text_contact для  страницы контактов, которая выводиться в footer.tpl как

<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>

формируется в контроллере footer.php , как 

		$this->data['text_contact'] = $this->language->get('text_contact');


		$this->data['contact'] = $this->url->link('information/contact');

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А ссылку на сайт? Чего где там надо исправить...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Список information - это типовые статьи ( в админке "Каталог \ Статьи")

 

Откройте файл контроллера \catalog\controller\common\footer.php. 

Там показано как формируются переменные, которые выводятся в footer.tpl

Н-р, переменные $contact, $text_contact для  страницы контактов, которая выводиться в footer.tpl как

<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>

формируется в контроллере footer.php , как 

		$this->data['text_contact'] = $this->language->get('text_contact');


		$this->data['contact'] = $this->url->link('information/contact');

Вам спасибище! Только я все-таки не до конца врубаюсь, мне нужно ввести новые переменные по их образцу?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

stylesheet.css - строка 1670 - вставте в место старого кода вот этот:

#footer .column ul li {
    list-style-type: none;
    margin-bottom: 3px;
    display: block;

}

#footer .column ul li:nth-child(2n-1) {
    float: left;
    width: 50%;
}

и все будет ОК!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

stylesheet.css - строка 1670 - вставте в место старого кода вот этот:

#footer .column ul li {

    list-style-type: none;

    margin-bottom: 3px;

    display: block;

}

#footer .column ul li:nth-child(2n-1) {

    float: left;

    width: 50%;

}

и все будет ОК!

 

 

Офигеть! Вот это профи! круто! Спасибо! Да, все получилось, так как я хотел.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добрый день.

Подскажите как у Вас получилось сделать на сайте футер в одну строку?

Очень нужно. Спасибо

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Мне нужно видить код, который сидит у футере

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Мне нужно видить код, который сидит у футере

/* footer */

#footer {

    clear: both;

    overflow: auto;

    min-height: 40px;

    padding: 20px;

    border-top: 1px solid #DBDEE1;

    border-bottom: 1px solid #DBDEE1;

    background: #373737;

}

#footer h3 {

    color: #EDF796;

    font-size: 14px;

    margin-top: 0px;

    margin-bottom: 8px;

}

#footer .column {

    float: left;

    width: 50%;

    min-height: 0px;

}

#footer .column ul li {

    list-style-type: none;

    margin-bottom: 3px;

    display: block;

}

#footer .column ul li:nth-child(2n-1)

{

    float: left;

    width: 50%;

}

#footer .column a {

    text-decoration: none;

    color: #EDF796;

}

#footer .column a:hover {

    text-decoration: underline;

}

#powered {

    margin-top: 5px;

    text-align: right;

    clear: both;

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

stylesheet.css - строка 1670 - вставте в место старого кода вот этот:

#footer .column ul li {

    list-style-type: none;

    margin-bottom: 3px;

    display: block;

}

#footer .column ul li:nth-child(2n-1) {

    float: left;

    width: 50%;

}

и все будет ОК!

Здравствуйте. А как сделать 4 колонки в футера?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Здравствуйте. А как сделать 4 колонки в футера?

Разобрался, сделал так

 

#footer .column ul li {
    list-style-type: none;
    margin-bottom: 3px;
    display: block;
}
#footer .column ul li:nth-child(2n-1) {
    float: left;
    width: 25%;
}
#footer .column ul li:nth-child(2n) {
    float: left;
    width: 25%;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От Iskander16
      Привет. Нужны небольшие правки в дизайне сайта на OpenCart: 

      1) Добавить отображение нескольких фото для товара (исправить, сейчас так – ribachok24.ru/index.php?r... 
      Добавить остальные фото под основное фото – ibb.co/z7KbJrX 
      2) Исправить фильтры. Например, по моделям. Сейчас выглядит так – ibb.co/M8KYVzy 
      Их добавить в рядом с сортировкой "По цене"
      Цена 800р, по времени - пару часов.
    • От bark4ss
      Есть дизайн
      https://www.figma.com/proto/RoraeCr7LufIW5O9TkOMcTpn/Doremi?node-id=1%3A2&amp;scaling=scale-down
      Дизайн адаптивный. Отрисован для десктопа и мобилы
      Необходимо верстка+программирование+наполнить сайт товарами.
      Ваш сайт/портфолио ссылку.
      Предпочтение отдается по релевантности:
      1) Нахождение команды в г.Минск
      2) Способ оплаты - безнал. 50/50 - предоплата/по факту. Если вы выполняете раньше утвержденного срока, то оплата +2% от общей стоимости работ за каждый день. При выходе за сроки выполнения -3% от общей стоимости работ за каждый день.
      3) % выполнения пунктов по ТЗ.
      3) Время выполнения
      4) Стоимость выполнения.
      Просьба, писать по делу. Идет выбор разработчика. Выбор необходимо сделать до 02 ноября 2018г.
      ТЗ-верста+программирование.txt
    • От Yarilo
      Добрый день! У нас есть проблемы вёрстки на шаблоне у страниц категорий. Может кто сталкивался с этим и знает как лечиться такая проблема? Верстальщики пока не знают как избавиться от этого. После полной загрузки страницы, всё становиться нормально. Но посетителей это явно пугает.

    • От litehill
      Добрый день!
      Нужен человек который сможет изменить визуальную часть сайта касательно меню.
      Внешнего вида на мобильной версии. Нужно переделать меню а именно. 
      Вставить его в шапку сайта, пример http://prntscr.com/l7iy63
      функционал открывания меню, оставить тот что и есть сейчас. По сути изменить визуальную часть.
      как на скрине.
      http://prntscr.com/l7iy63
      Это касается только мобильных версий начиная от планшета
      Мой сайт: https://empirebags.com.ua/
    • От seomike
      Требуется программист на доработку проекта http://test.soglasie-ooo.ru/, проект на OpenCart 2.3 шаблолн TechStore (http://tech-store.octemplates.net/).
      Должен быть хороший опыт и умение разбирать сложные объемные задачи (в перспективе, пока только простые)
      Текущие задачи разместил в Google Docs https://docs.google.com/document/d/1G9WVtk6X-NwIBPKyOM0OcIVrw4ffckz0ICIcDIuBRWE/edit?usp=sharing
       
      Требуется оперативное внедрение в течении 1-2 дней по первой части, задачи будут постепенно добавляться, не только по этому проекту, есть еще ряд проектов на OpenCart 2.3.
       
      Со стороны исполнителя нужен также расчет бюджета на реализацию задач, оплата электронными деньгами или с карты на карту если РФ.
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.