Your Roll

Рейтинг ролевых ресурсов. Каталог ролок. Полезные инструменты для администраторов ролевых игр.


Вы не подключены. Войдите или зарегистрируйтесь

Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 1 из 1]

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Нередко хочется разместить поверх шапки форума, поверх логотипа какой-нибудь блок. Особенно если в нём находится что-то важное.
Также Иногда бывает нужно закрепить по краям экрана какие-либо функциональные элементы (вроде стрелочек и кнопки обратной связи на этом форуме).

Всё это можно сделать самому, не надо быть великим гением и строить огромные схемы; нужно просто знать парочку свойств в CSS.

Расположить любой элемент в любой точке экрана можно с помощью свойства position. Оно принимает значения static (обычное), relative (передвигает элемент, при этом резервируя за собой пространство), absolute (расположение относительно документа) и fixed (относительно краёв экрана). Нам понадобятся fixed и absolute.

Напомню базовые правила оформления кодов в CSS:

Код:
путь к элементу {
  свойство: значение;
  position: absolute;
}
Основные пути к элементам для разных движков:
punBB:
Полоса навигации:
#pun-head

Блок "приветствие" на главной:
#pun-announcement

Блок "сейчас на форуме" (по умолчанию показывается только на главной):
#onlinelist

Блок прокручивающихся объявлений:
#fa_ticker_container
phpBB2:
Полоса навигации:
.bodyline > table
(на данный момент не могу привести больше примеров, т.к. рабочий тестовик занят :)Если очень-очень надо - киньте ссылку на ваш форум)

Для своего элемента надо будет создать виджет без использования стандартного шаблона, в начале кода добавив
Код:
<div id="overlay_1">
А в конце
Код:
</div>
Путь к вашему элементу будет равен #overlay_1. При необходимости указывайте другие номера.

Тактики размещения
Ну, приступим к делу :)
Всего мы рассмотрим три основные тактики:

  1. Простое расположение относительно экрана;
  2. Расположение у границы резинового форума;
  3. Расположение в определённом месте форума с фиксированной шириной.

Тактика первая
Если у вас дизайн на весь экран или просто необязательно разместить блок поверх определённого элемента, то можно его прикрепить к границе экрана.
Для этого используем следующий код CSS (размещение в левом-верхнем углу):
Код:
путь к элементу {
  position: absolute;
  top: 20px; /* отступ сверху */
  left: 20px; /* отступ слева */
  z-index: 1000; /* указываем, что блок должен прорисовываться выше других элементов */
}
Надо будет ограничить размеры блока, чтобы текст и картинки не растянулись на весь экран:
Код:
путь к элементу {
  position: absolute;
  top: 20px; /* отступ сверху */
  left: 20px; /* отступ слева */
  z-index: 1000; /* указываем, что блок должен прорисовываться выше других элементов */
  width: 350px; /* ширина */
  height: 250px; /* высота */
  overflow: auto; /* если содержимое уйдёт за пределы предоставленного пространства, включим прокрутку */
}
Тактика вторая
Эта тактика отличается от первой тем, что для резиновых стилей мы указываем отступ не в пикселах, а в процентах.
Код получается такой:
Код:
путь к элементу {
  position: absolute;
  top: 20px; /* отступ сверху */
  left: 10%; /* отступ слева */
  z-index: 1000; /* указываем, что блок должен прорисовываться выше других элементов */
  width: 350px; /* ширина */
  height: 250px; /* высота */
  overflow: auto; /* если содержимое уйдёт за пределы предоставленного пространства, включим прокрутку */
}
Чтобы разместить блок аккурат у границы форума, надо будет от 100% отнять ширину форума и поделить на 2. Так для форума шириной в 80% отступ от края экрана будет составлять 10%.
Тактика третья
Здесь уже надо будет немало поэкспериментировать, чтобы добиться необходимого результата.
В основном дизайны у форумов фиксированной ширины. Чтобы разместить блок в определённом месте относительно его центра (как блок объявлений на этом форуме), представим себе центральную ось и узнаем ширину форума:


Представим расположение блока и узнаем, в какую сторону и насколько нужно будет сдвинуть его левую границу:


Выполним всё в коде:
Код:
путь к элементу {
  position: absolute;
  left: 50%; /* отсчёт от середины страницы */
  top: 110px; /* отступ сверху */
  z-index: 1000;
  width: 490px; /* ширина */
  height: 310px; /* высота */
  overflow: auto;
  margin-left: -100px; /* сдвиг от середины */
}
Принцип работы кода похож на остальные, но здесь нам надо будет указать и отступ (св-во margin). Его значение мы тоже указываем в пикселах; если надо сместить влево - указываем отрицательное значение, если вправо - положительное.

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

Кроме свойств left и top есть right (справа) и bottom (снизу). Можно указывать все четыре свойства, а можно и не указывать вообще.

Разместим блок в нижнем-правом углу:
Код:
путь к элементу {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 1000;
}
Растянем некий блок на всю ширину экрана, закрепим сверху:
Код:
путь к элементу {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 10px;
  z-index: 1000;
}
Оформление
Свои собственные блоки с самого начала не будут обладать никакими стилями и будут просто прозрачны.
Расширяя свой код CSS, можно добавить границы, фон, скругление:
Код:
путь к элементу {
  ...
  background: #ffffff; /* фон - сплошной цвет */
  background: url(ссылка); /* фон - картинка */
  border: 3px solid #000000; /* граница: толщина - тип - цвет */
  border-radius: 5px; /* скругление границы */
  padding: 10px; /* делает внутренний отступ текста от границы */
  ...
}
Помните, что отступы и границы увеличивают ваш блок.

У меня всё :)нужна будет помощь - пишите!)


______________________________

Не ищи логики там, где она скрывается. Потому что её там нет. (с)

Посмотреть профиль

Предыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 1 из 1]

Права доступа к этому форуму:
Вы не можете отвечать на сообщения