Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Привет!

 

Есть футер.

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

Что надо внести в 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%;

}

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

 

 

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

Надіслати
Поділитися на інших сайтах


  • 3 months later...

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

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

 

Надіслати
Поділитися на інших сайтах


  • 7 months later...

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%;
}
Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.