Jump to content
Sign in to follow this  
volodyakolchin

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

Recommended Posts

Привет!

 

Есть футер.

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

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

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

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

Share this post


Link to post
Share on other sites

 

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

Спасибо!

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

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

Share this post


Link to post
Share on other sites

Спасибо!

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

 

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

    </ul>

 

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

 

Спасибо!

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

Share this post


Link to post
Share on other sites

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

 

 <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');

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

Список 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');

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

Share this post


Link to post
Share on other sites

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%;
}

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

Share this post


Link to post
Share on other sites

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%;

}

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

 

 

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

Share this post


Link to post
Share on other sites

Добрый день.

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

/* 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;

 

Share this post


Link to post
Share on other sites

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 колонки в футера?

Share this post


Link to post
Share on other sites

Здравствуйте. А как сделать 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%;
}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By Yulissi
      1. ОБЩИЕ ПОЛОЖЕНИЯ
      1.1. Требуется создать гибрид сайта услуг и интернет-магазина по продаже и программированию автоключей, прошивке иммобилайзеров и скорой помощи на дорогах (вскрытие авто и отключение сигнализации, прикуривание авто и зарядка АКБ).
      Целевая аудитория – автовладельцы всех возрастов (преимущественно мужчины), специализированные автомастерские и частные мастера по ремонту авто.
      Регион предоставления услуг: Москва и МО (предусмотреть возможность расширения бизнеса на другие города).
      2. ЧТО ТРЕБУЕТСЯ:
      2.1. Верстка по дизайн-макету, макет должен быть адаптивным для ширины экрана: 320px - смартфон; 768px - планшет; 1200px - десктоп.
      2.2. Подключение к движку Opencart (версию предложить и обосновать). Подключить необходимые модули для реализации функционала магазина или написать соответствующие скрипты самостоятельно (в стоимость услуги входит установка модуля, тестирование и обеспечение стабильной работы в условиях наполнения магазина до 5000 товаров).
      3. ДЛЯ РАЗРАБОТЧИКОВ:
      1. Прошу пустую полемику и "игру мускулами" в теме не разводить. Внимательно читаем ТЗ, потом готовим свое предложение по цене, срокам и планам работ и присылаем. 
      2. Если для оценки стоимости и объема работ нужны наводящие вопросы, задаем - понятным простому человеку языком. 
      3. Почему много требований к верстке - и так мало конкретики по серверной части - отвечаю заранее. Есть опыт постановки задач и приемки верстки у верстальщика, а с Опенкартом пока не работали. Сами не знаем толком, чем же должен быть модифицирован движок, чтобы стабильно выполнять возложенные на него функции. Самые главные условия: быстрая и стабильная работа сайта и СЕО-модули 
      4. Предпочтение исполнителям с действующим аккаунтом на Upwork (также можете предложить Ваш вариант, как видите взаиморасчеты). 
      ТЗ на разработку сайта.docx
    • By Lototbuy
      Есть установленный шаблон на сайте http://lotorbuy2.host12.ru/
      Необходимо сделать/решить:
      1. Шаблон магазина ( первый сайт)
      Перенести шаблон с сайта http://lotorbuy2.host12.ru/ на сайт lotorbuy.ru
      Настроить в админке OpenCart на данном сайте функцию дублирования карточки товара на сайт 2 с некоторыми изменениями.
       
      2. Шаблон второго сайта 
      Сделать верстку страниц "Наклейки" (не по текущему шаблону, макет psd есть) - аналог страниц "каталог" и "карточка товара"
      Сюда будут переноситься данные товара первого сайта на главную страницу+карточку товара второго сайта
       
       
       
      ПОЛНОЕ ОПИСАНИЕ ТЗ ВО ВЛОЖЕНИИ.
       
      ТЗ+верстка.docx
    • By kunca
      Доброго дня!
       
      Есть ТЗ со срочными задачами, №1 - по скорости работы сайта, остальные - по верстке и исправлению внешнего вида блоков:
      https://docs.google.com/document/d/1eIAlyqWFY3MJm56xf_oUZwEUUSBCExzi7nmHJGUkKpY/edit
       
      Кто готов взяться, прошу сориентировать по стоимости и срокам?
       
      Спасибо.
    • By kunca
      Добрый день.
       
      Нужно поправить кое-что по верстке:
      1) по мобильной верстке http://joxi.ru/E2pqWXxF74Q93A
      2) исправить ссылку на почту в шапке сайта http://joxi.ru/brRZEGoT7LWQMr
      3) сделать иконку корзины ссылкой: http://joxi.ru/bmog6nXu378MDm  
       
      Прошу обозначить сроки и стоимость.
       
    • By kunca
      Доброго времени суток.
       
      Поехала верстка значений атрибутов в мобильной версии сайта: http://joxi.ru/8AnqXnvhzRKpb2
      Как видно из скриншота, каждый символ с новой строки(
       
      Как это можно исправить?
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.