Практика разработки Web-страниц

Сервис-центр ремонт компьютеров в домодедово предлагает сезонные цены.

Маркированный или нумерованный список выглядит неправильно - часть 2


  • Чтобы задать постоянные отступы вокруг и внутри списка, установите в CSS свойства границы. Поскольку вы используете много тэгов, устанавливать границы придется методом "проб и ошибок". Отступы вокруг списков устанавливаются в стилях для тэгов <P>, <UL> и <OL>. Отступы внутри списков устанавливаются в стиле для тэга <LI>. Приведенный ниже блок <STYLE> добавляет отступы между пунктами списка и немного уменьшает отступы вокруг списка:

    Для последних версий броузера вы можете установить поля в стилях, чтобы точно контролировать расположение списка

    Для последних версий броузера вы можете установить поля в стилях, чтобы точно контролировать расположение списка

    Netscape 4 плохо работает с полями. В списках после установления стилей пункты могут не выравниваться с маркерами или номерами. Чтобы поддерживать пользователей, работающих в Netscape 4, используйте интервалы списка по умолчанию, а не устанавливайте поля.

    <style> p { margin-top:6px; margin-bottom:6px;} ul,ol { margin-top:8px; margin-bottom:18px;} li { margin-top:0px; margin-bottom:4px;} ul ol { margin-top:4px; margin-bottom:8px;} } </style>

    Описание четвертого стиля устанавливает поля для блока <OL> в пределах блока <UL>.

  • В пятой и более поздних версиях броузеров вы можете изменять маркеры на картинки, используя свойство list-style-image.

    <ul style="list-style-image:url(images/ast.gif);">

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

  • Если вы хотите создать список с изображениями и работает в любых броузерах, используйте таблицу. Поместите изображения в ячейки в левой колонке, а текст – в правой. Используйте атрибут cellpadding, чтобы установить отступы между пунктами списка.

    <table border=0 cellpadding=5 cellspacing=0> <tr> <td valign="baseline"><img src="images/ast.gif "border=0 width=14 height=15></td> <td valign="top">Life vests</td> </tr>

  • © 2003-2007 INTUIT.ru. Все права защищены.




    Начало  Назад