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

[volodyakolchin]

Привет!

 

Есть футер.

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

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

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

[krumax]

  Цитата

 

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

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

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

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

[volodyakolchin]

  В 25.08.2014 в 13:33, krumax сказав:

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

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

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

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

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

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

[searchingman]

  В 25.08.2014 в 14:35, volodyakolchin сказав:

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

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

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

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

[volodyakolchin]

  В 25.08.2014 в 14:45, searchingman сказав:

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

Спасибо!

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

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

[beeboosters]

  В 25.08.2014 в 14:54, volodyakolchin сказав:

Спасибо!

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

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

 

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

[volodyakolchin]

  В 25.08.2014 в 17:39, beeboosters сказав:

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

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

 

 <ul>

      <?php foreach ($informations as $information) { ?>

      <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>

      <?php } ?>

    </ul>

 

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

 

Спасибо!

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

[searchingman]

  В 26.08.2014 в 10:00, volodyakolchin сказав:

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

 

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

[wipper]

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

[volodyakolchin]

  В 26.08.2014 в 11:13, searchingman сказав:

 

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

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

[volodyakolchin]

  В 26.08.2014 в 16:20, wipper сказав:

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

А сайт тут: http://technosila.esy.es

[Spunky]

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

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

[volodyakolchin]

  В 28.08.2014 в 13:35, Spunky сказав:

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

}

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

 

 

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

[Spunky]

=))

[vicx]

Добрый день.

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

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

[Spunky]

Добрый день. На каком сайте?

[vicx]

Пока штампую его на локалке

[Spunky]

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

[vicx]

  В 25.12.2014 в 00:32, Spunky сказав:

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

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

 

[Spunky]

еще html-код

[rokmail]

  В 28.08.2014 в 13:35, Spunky сказав:

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

[rokmail]

  В 30.07.2015 в 14:50, rokmail сказав:

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

}