Как вывести несколько баннеров по горизонтали | | SEO для блондинки
Ищу:

Как вывести несколько баннеров по горизонтали

Снова задачки по программированию.
Баннеры по горизонтали
На этот раз мне понадобился блок для вывода трёх баннеров по горизонтали. (три товара из партнёрки «Где Слон») При этом под баннерами есть надписи и мне нужно чтобы эти надписи остались именно под баннерами, а не размазались в горизонталь. А так же чтобы другие картинки и баннеры в посте остались в своём прежнем положении.

Как это сделать в вордпресс?

(Вообще-то способ подойдёт для любого сайта, не только на Вордпресс)
В посте вставляю картинки в обычный маркированный список, но весь этот список целиком помещаю в тег DIV с именем «Banner». Я делаю именно див потому что заголовок для этого блока в будущем тоже хочу раскрасить по особенному.

<div id=»Banner»>
<ul>
<li>Код баннера 1</li>
<li>Код баннера 2</li>
</ul>
</div>

Далее вношу описание нового стиля «Banner» в файл CSS:

Админка: Внешний вид — редактор. И добавляю в описание стилей:

#Banner {display: block;  height: 125px;  margin: auto;  width: 490px;}
#Banner ul {list-style: none; margin: 5px 0px 0px 0px;}
#Banner li {float: left; width: 140px; list-style-type: none; padding: 0px 20px 0px 0px;}

Первая строка определяет размер блока. Мне важно что бы блок имел чёткий размер в данном случае это 490 на 125 пикселей.
Вторая строка: определяет что мой маркированный список не будет иметь ни каких видимых маркеров. А циферки это для красивости: отступы от предыдущего текста.
Третья строка: определяет что элементы будут располагаться горизонтально слева на право, Что они будут строго шириной по 140 пикселей, ну и опять красивости — отступы

Всё. Записываем изменения в файле и смотрим результат.


Редактировать:

Вы можете подписаться на новые посты этого блога:



Комментарии (3) на запись “Как вывести несколько баннеров по горизонтали”

  1. Елена 03.05.2012 18:35

    Спасибо за пост! очень познавательно!
    Я вот вывела похожим способом новости на главную, но они не идут в горизонтальную, а почему-то в вертикальную полосу :(
    Подскажите пожалуйста как и где и что нужно исправить?

  2. Елена Скрынник 23.01.2015 07:04

    Добрый день.Почему, когда я ставлю несколько партнерских баннеров рядом, коды перепутываются и все баннеры переходят на один магазин? Как это исправить?

  3. Мисс Удача 23.01.2015 09:48

    Так ответить не возможно нужно видеть ваш код. Что-то в нём не так.

Обратные ссылки

Оставить комментарий




Загрузить свой аватар