4. Мелочи дизайна - мелочи

Таблица CSS. А сейчас затрону тему, которую затрону ещё не раз :) Пока сайт маленький - вы пользуетесь одной таблицей CSS и всё хорошо. Но вот сайт вырастает. Вы приделываете форум, гостевую, ещё всякие навороты. И всё это тянет за собой свои стили. У сайта своя таблица CSS, у форума своя таблица CSS и гостевая не хуже, тоже своя таблица CSS. Может быть не по одной, а по несколько таблиц стилей. И когда всё это смешивается, получается, что некоторые стили перестают работать и наоборот - где не должно быть ни чего - появляется всё:)

Выходы из данной ситуации простые. Можно сделать что бы стили не пересекались. Например, форум в своей папке, со своими стилями, сидит там и не вылазит :) Но когда вписываете форум, или гостевую в дизайн сайта, то это не всегда правильное решение.

Можно сделать отдельную таблицу CSS, подключить её к сайту, форуму и т.д. А в этой таблице сделать список всех таблиц в порядке очереди. Самая последняя - самая главная, её стили перекроют все остальные.

@import url("cp.css");
@import url("forms.css");
@import url("tweaks.css");
@import url("colours.css");
@import url("forum.css");

Это кусок стиля от моего форума. forum.css - и есть самая главная таблица стилей (CSS). Что там наворочу, то и будет на всём форуме.

Но иногда нужна просто небольшая поправка на одной страничке. Делать специально таблицу стилей, это уже не серьёзно. Вот тогда к нам на помощь приходит приоритет.

Приоритет:

!important

Можете сделать отдельный стиль для странички. Или просто в таблице стилей сделать какой то параметр более приоритетным. Это уже по желанию. Вот простой пример:

body {
background-repeat: repeat-x !important;
}

body {
background-repeat: repeat-y;
}

Хоть последнее правило и указывает на повторение фона - сверху вниз. Но будет выполнено первое правило - слева направо.


Если вас достали отступы. Можете их убрать в свойствах странички. Но иногда надо, что бы исчезли вообще все отступы.

Убирает все отступы:

*{margin:0;padding:0;}


Полоса прокрутки:

Пример:

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

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

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

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

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

<div style="width:300px; height:100px; overflow:auto; border:solid 1px black;">
<p>Как мне сделать полосу прокрутки на самом сайте, чтобы текст можно было прокручивать вниз.</p>
<p>Как мне сделать полосу прокрутки на самом сайте, чтобы текст можно было прокручивать вниз.</p>
<p>Как мне сделать полосу прокрутки на самом сайте, чтобы текст можно было прокручивать вниз.</p>
<p>Как мне сделать полосу прокрутки на самом сайте, чтобы текст можно было прокручивать вниз.</p>
<p>Как мне сделать полосу прокрутки на самом сайте, чтобы текст можно было прокручивать вниз.</p>
</div>

width:300px - ширина; height:100px; - высота; border:solid 1px black; - толщина рамки и цвет.


Многие наверное уже делали списки на сайте. Можно сделать под буквами, цифрами, с разными маркерами. Буквы и цифры это хорошо. Но вот маркеры иногда сильно портят всё хорошее впечатление от сайта. Причин тут много. Иногда шрифт маленький и получается, что маркер тут самый главный, иногда цвет не в тему и т.д.

Убрать маркеры из списка:

LI {list-style-type: none;} /* Убираем маркеры */
UL {margin-left: 10;} /* Отступ слева в браузере IE и Опера */
padding-left: 10; /* Отступ слева в браузере Мозила */


Раз уж затронули списки и маркеры, то обсудим подробнее :) Список можно сделать вообще без маркеров и без списков :) Просто используя тег - <br>. Его надо ставить в конце каждой строчки. И вот что получится:

список
список
список

<p>список<br>список<br>список</p>

Код того, что получилось:)

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP