24/08/15 Открыта запись на обучение вёрстки для майбба - ссылка на тему

Избранные уроки Photoshop


Вверх
Вниз

COLOR MATE

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » COLOR MATE » Каталог CSS|JS » боковая таблица справа. фиксированная.


боковая таблица справа. фиксированная.

Сообщений 1 страница 6 из 6

1

О таблице
Права на идею переноса подобной таблицы принадлежат Etiquette Rules. При установке полной или частичной этого кода, который был полностью адаптирован под Rusff & Mybb указывайте откуда был взят код таблицы.

Код:
<div id="sidebar">

Наполнение таблицы

</div>

<style>

#sidebar {
  width: 205px; height: 110%;
  top: 0px; right: 0px; padding: 5px;
  background-color:#d2eb8f;
  text-align: center;
  position: fixed}

</style>

Пояснения по коду. Весь код сводится к простым истинам исполненным в css.

<div id="sidebar">

Создает для всего наполнения отсылку к css стилю. Обычно он прописывается более интересно и развернуто, но в данном примере все сведено до минимума. Все, что будет написано до закрывающего тега

</div>

Будет иметь параметры заданные в таблице каскадных стилей (css).

Что представляет из себя таблица и какие параметры за что отвечают.

<style>
#sidebar {width: 205px; height: 110%; top: 0px; right: 0px; padding: 5px; background-color:#d2eb8f; text-align: center; position: fixed}
</style>

width: 205px;

ширина сайдбара (панели) в пикселях.

height: 110%;

высота сайдбара. прописана здесь в процентах (110%), что означает, что сайд бар будет находится на протяжение всей страницы, какой бы высокой она не была. Параметр может быть заменен на значение в px (пикселях), для фиксированной высоты бара.

top: 0px; right: 0px;

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

background-color:#d2eb8f;

заливка таблицы цветом в шестеричной системе RBG. Данный параметр может быть заменен на изображение (скажем, на узор) следующей строкой

background-image : url("адрес_картинки");

text-align: center;

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

position: fixed

параметр фиксирующий таблицу, не позволяя её прокручивать.

ВАЖНО этот код панели фиксирует её у края монитора, а не у края форума.

Код by PS. Копирование статьи без личного разрешения автора на другой форум запрещено.

+1

2

а выглядит то как?

0

3

moral rat
как на этикете была, крепится к краю экрана http://uploads.ru/i/m/s/z/msz46.gif

0

4

asphyxiated
Привет! Хочу сказать, что классный код у тебя получился! Я нашла боковую таблицу, которая сжимает форум и отображается только на главной, но эта - решение всех проблем! Спасибо большое за код!
Но...
У меня вопрос по поводу кода: ты написала:

asphyxiated написал(а):

указывайте откуда был взят код таблицы.

А что указывать-то? Ссылку на эту тему? На этикет? Писать твой ник или что-то другое?

0

5

Lenkin Park написал(а):

А что указывать-то? Ссылку на эту тему? На этикет? Писать твой ник или что-то другое?

Ничего не указывайте)

0

6

morgan
Ясно. Ещё раз спасибо за код - то что я искала!

0


Вы здесь » COLOR MATE » Каталог CSS|JS » боковая таблица справа. фиксированная.