CSS- img рядом с текстом
На примере своего блога покажу использование css, а точнее маленьких изображений рядом с текстом. Если вы знаете css, то с этим приемом у вас трудностей не возникнет.
К примеру мы изначально имеем структуру вывода категорий в сайдбаре wordpress по умолчанию. Если вы добавите виджет с категориями из админки- то структура будет как раз такой. Так же можно вручную написать этот код в файле sidebar.php, если вы не используете виджеты:
1 2 3 4 5 6 | <li> <!--открываем список--> <h2>Категории</h2> <!--заголовок второго уровня--> <ul> <!--тег маркированного списка--> <?php wp_list_cats('sort_column=name'); ?>// вывод категорий в цикле </ul> </li><!--закрываем список--> |
Теперь напишем в файле css или прямо в файле в тегах style код для вывода изображения рядом с текстом:
1 2 3 4 5 6 7 8 9 10 | <style> #catstyle ul a { display: block; //Блочный вид. Каждая катег. будет с новой строки color: #000000; //Ваш цвет текста font-size:14px; //Размер изображения margin: 0px; //Внешний отступ, расстояние между каждой категорией padding-left: 20px; //Внутренний от текста отступ на 20px влево background: url(путь/img.png) no-repeat left; //Изображение согласно размеру шрифта, не повторять и отображать слева. } </style> |
Далее подключаем наш стиль к списку категорий, добавляем id=”имя стиля”.
1 2 3 4 5 6 | <li id="catstyle"> <!--открываем список--> <h2>Категории</h2> <!--заголовок второго уровня--> <ul> <!--тег маркированного списка--> <?php wp_list_cats('sort_column=name'); ?>// вывод категорий в цикле </ul> </li><!--закрываем список--> |
Вот и всё ![]()
Результат: Мы реализовали вывод изображения рядом с текстом слева в цикле средствами css.
———
Длительный срок службы-битумная черепица Калуга, покрытие крыш различных форм. Продажа семизнаков, шестизнаков, Номера ICQ- выбери себе самый красивый! Большой каталог изделий-ювелирные украшения по хорошим ценам.

(средняя оценка 4.00 из 5)




