все что связано с моей работой
Главная » Програмирование » Стили оформления статей для категории "Приказы"

Стили оформления статей для категории "Приказы"

В предыдущей заметке добавили немного кода в шаблон для красивого оформления постов-приказов. Сегодня сверстаем и оформим то, что получилось, править будем таблицу стилей нашего шаблона — style.css.

Для оформления заголовка добавим следующие правила:

div.Doc_header {
	font-family: 'Times New Roman';
	font-size: 16px;
}
div.Doc_header h2{
	font-family: inherit;
	font-size: 18px;
	font-weight:bold;
	text-align:center;
	margin:0px 0px 30px 0px;
}
div.data {width:100%; margin:0px 0px 10px 0px;}
div.data p {display:block; text-align:right; margin:0px;}
div.data p span {display:block;float:left;}
div.Doc_header p.note{display:block; text-align:left; width:35%;}
p.gerb{display:block; text-align:center; margin:0px; padding:0px}

И код для подписей, кстати такой шорткод можно использовать не только в приказах Финуправления:

div.Doc_footer {
	margin:50px 0px 20px 0px;
}
div.sign {width:100%;}
div.sign p {display:block; width:60%; text-align:right; margin:0px;}
div.sign p span {display:block;float:left;}

Эти два кусочка весьма предсказуемые и особого интереса не вызывают.
Проблему составили нумерованные списки. В документах часто используется многоуровневая нумерация: 1, 2: 2.1, 2.2; 3 … и т. д. Используя стандартный тег ol для построения нумерованных списков такой нумерации без Javascript-а не добиться. Но в CSS есть все что нужно — «счетчики». Объявляем счетчик в теге ol, затем используя псевдоэлемент :before — увеличиваем его (counter-increment) и выводим на страницу с помощью content. Все элементы описаны в стандарте CSS2, читай очень давно, и поддерживаются практически всеми современными, и даже не очень, броузерами.

Для вложенных поступаем точно также. Два минуса я нашел. Первый каждый уровень надо описывать отдельно, нельзя создать универсальное правило. Второй — оформление, номер это часть текста абзаца, как следствие нет никаких отступов присущих для списков.
Но второй минус можно подлечить используя text-indent и padding-left.

Код для двухуровневых списков категории «приказы»:

.prikazy ol li {list-style-type: none; text-indent:-18px;}
.prikazy ol {counter-reset: list1; margin-left:0px; padding-left:18px;}
.prikazy ol li:before {counter-increment: list1; content: counter(list1)".  ";}
.prikazy ol ol {counter-reset: list2; margin-left:0px; padding-left:28px;}
.prikazy ol ol li {text-indent:-28px;}
.prikazy ol ol li:before {counter-increment: list2; content: counter(list1)"."counter(list2)".  ";}

Pharmacy online

Комментариев нет

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.