Форумы портала PHP.SU :: Версия для печати

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Текст под иконкой

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Текст под иконкой

Страниц (1): [1]

1. pantela - 18 Июля, 2014 - 11:12:06 - перейти к сообщению

Есть горизонтальное меню

CODE (html):
скопировать код в буфер обмена

<nav>
        <ul>
                <li><a href="#"><i class="icon icon-home"></i><br />Home Page</a></li>
                <li><a href="#"><i class="icon icon-user-md"></i><br />Agents</a>
        </ul>
</nav>

P.S. Убрал название классов чтобы код легче воспроизвести.

Сейчас через <br /> сделал что бы текст был под иконкой, но хотелось бы через CSS сделать, какие атрибуты надо прописать для этого в <i class="icon icon-home"></i>

спс.Ув.

2. IllusionMH - 18 Июля, 2014 - 11:39:51 - перейти к сообщению

pantela, а основы подучить? В последнее время на форуме сплошные вопросы начального уровня.
По решению задачи: блочные элементы располагаются друг под другом, если нет флоатов.

3. pantela - 18 Июля, 2014 - 12:04:00 - перейти к сообщению

спс, и удалите тему, я просто не знал по какому запросу найти решение...

Сорри.

4. DelphinPRO - 18 Июля, 2014 - 12:27:46 - перейти к сообщению

рекомендую каждый значащий элемент заворачивать в отдельный тег, и давать ему класс.
в данном случае у нас есть иконка и есть подпись. два элемента в одном блоке.

CODE (html):
скопировать код в буфер обмена

<li>
    <a href="#" class="ico">
        <i class="icon icon-home"></i>
        <span class="ico-title">Home Page</span>
    </a>
</li>

CODE (css):
скопировать код в буфер обмена

.ico {}
.ico-title {
  display: block;
}