Кот

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

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


Вы здесь » Кот » Архивы » Space Dementia


Space Dementia

Сообщений 11 страница 13 из 13

11

Раздел A4 пропускаем - туда тоже нежелательно лезть. Находится там, грубо говоря, "сброс" для всех значений отбивок, отступов и пр.

Следующий, наверняка знакомый тебе элемент

/* A5.1 */
#pun {
  margin: 30px;
  position: relative;
  }

Подложка, та часть, где располагается "тело" нашего форума (на скрине для наглядности немного расширил его):
http://uploads.ru/t/G/j/y/Gjyoc.gif
И здесь остановимся и поговорим о ширине, отбивке и прочих интересных вещах.
Итак, перво-наперво лично я обычно задаю ширину будущего форума. За ширину отвечает свойство width. Ширина не включает толщину границ вокруг элемента, значение отступов и полей. Мы можем задать ширину в процентах, можем - в пикселях, дюймах, пунктах и пр. Но нас обычно интересуют проценты и пиксели.
В чем различие?
Проценты (%) - так называемый "резиновый" дизайн, ширина pun вычисляется в зависимости от ширины окна браузера, т.е. оно всегда будет занимать 80%, например.
Пиксели (px) - "фиксированная" ширина, применяется часто, не всегда красиво смотрится на широкоформатных мониторах, но тем не менее довольна безопасна для использования.
Сообщениями выше я порекомендовал сразу же выставить ширину, чтобы не путаться.

Пометка от себя: если будешь в будущем делать дизайны с фиксированной шириной, то старайся распланировать их так, чтобы у тебя весь дизайн вместился в ширину до 1000px. Почему именно тысяча? Потому что несмотря на то, что мониторы обзаводятся все более и более широким форматом, классическая ширина в 1024px остается актуальной до сих пор. 24 пикселя сразу откладываем на скролл - вертикальную полосу прокрутки, которая появится в любом случае (она и занимает обычно эти самые 24 px). Но эта пометка носит простой рекомендательный характер, следовать ему жестко нет необходимости.

/* A5.1 */
#pun {
width: 900px;
  margin: 30px;
  position: relative;
  }

Итак, выставили ширину, форум неожиданно "приклеился" к левому краю:
http://uploads.ru/i/x/E/C/xEC9m.gif
Как исправить? Я встречал в темах-техподдержках такое мнение: следует добавить свойство float: center;
Это неправильно! float даже значения такого не может принимать, а значит эта запись - банальная ошибка.
А центрировать форум мы будем с помощью margin:

/* A5.1 */
#pun {
width: 900px;
  margin: 0 auto;
  position: relative;
  }

http://uploads.ru/i/3/m/t/3mtJA.gif
Подробнее:
Устанавливает величину отступа от каждого края элемента. В нашем случае отступом будет расстояние от края элемента pun до края окна браузера.
Мы можем задать одно значение для всех сторон, так и разные отступы для каждой из них. "Счет" сторон идет по часовой стрелке: верх, справа, низ, слева.  Можно задавать несколько значений, перекопирую следующую табличку:

Число значений

Результат

1

Отступы будут установлены одновременно от каждого края элемента.

2

Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.

3

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

4

Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

auto - это указание на то, что размер отступов будет автоматически рассчитан браузером. Как раз задание справа и слева значения auto позволяет нам "центрировать" наш форум.
А сверху и снизу в данный момент у нас 0, да )
Можно задавать отдельные отступы как общей записью (margin {...}), так и частной (margin-top {...}, margin-right {...}  и т.п.)

Следующее - свойство padding:

/* A5.1 */
#pun {
  width: 900px;
  margin: 0 auto;
padding: 0 30px;
  position: relative;
  }

http://uploads.ru/t/G/j/y/Gjyoc.gif
padding - Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Опять же - можно задать как одно значение для всех сторон, так и для каждой в отдельности.
Приведу пример, как это свойство может помочь нам в будущем с размещением рамок:

без padding
http://uploads.ru/t/g/Y/s/gYsLf.jpg

с padding
http://uploads.ru/t/N/J/h/NJhQm.jpg

Замечание: как видно на скриншоте с розовой частью, padding как бы "расширяет" поле, т.е. фактическая ширина у нас утсанавливается большей, чем есть на деле. Для того, чтобы установить рамку, например, следует из планируемой ширины (как в случае указанного бежевого дизайна) в 900px вычесть ширину наших рамок (каждая из них была шириной в 26px, такую же отбивку я выставлял в сам дизайн: padding: 0 26px; ): 900-(26+26)=848 px. Width в том случае будет равен не 900, а 848.
А вообще, вот мелкая картинка для наглядности. Тут указаны и margin, и padding, и видимая область:
http://keeper.rolebb.com/uploads/000e/55/96/122-3-f.jpg
Увы, не помню, откуда я ее вырезал, сам бы рад найти ту "шпаргалку".

/* A5.2 */

/* A5.2 */
.punbb {
  float: left;
  width: 100%;
  height: auto;
  }

Здесь, вроде, все понятно - можешь считать, что это "второй pun", просто наложенный сверху. Его обычно тоже тревожить не приходится, поэтому можно оставить таким, как есть.
float - определяет, по какой стороне будет выравниваться элемент. Float: left; позволяет не ломать глаза и читать текст нормально - слева направо. Править его на right не стоит, для отдельных элементов потом можно установить свое обтекание.

/* A5.3 */

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

окошко переадресации. О нем много где уже говорили, много как предлагали перекрашивать, а конкретно здесь - задаются отступы, ширина и обтекание. Обычно окошко переадресации наследует все цветовые значения от нашего форума, но можно извращаться над ним как душа пожелает. За примером далеко ходить не надо, вот: http://koshart.ru/viewtopic.php?id=39
Заметка пользователя: не скрывай текстовую часть! Страница переадресации должна быть легкой и пустой, на то она и "переходной" пункт, а уж видимость ссылки "Если вас не перебрасывает автоматически, то жмите сюда" - вообще святая святых! Без нее ой как тяжко, не скрывайте, люди, эти волшебные ссылки...

/* A5.4 */

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 1em;
  }

.punbb .section {...}
http://uploads.ru/t/A/o/M/AoMFg.gif

.punbb .main {...}
http://uploads.ru/t/e/8/r/e8rTX.gif  http://uploads.ru/t/I/n/T/InTfE.gif

Эта часть тоже нам вряд ли может потребоваться, хотя кто знает ). Как видишь - тоже устанавливаем отступы. Можешь увеличить 1em на, допустим, 1.6em и посмотреть, что изменится.

/* A5.5 */

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0.4em;
  }

.punbb .category
http://uploads.ru/t/Q/A/e/QAeDX.gif

.punbb .post {...}
http://uploads.ru/t/H/F/C/HFCO9.gif
(один из моих любимых элементов :) )

Собственно, отступ между сообщениями и категориями. Можно увеличить, можно уменьшить вплоть до нуля.

/* A5.6 */

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;
  }

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

/* A5.7 */

/* 5.7 */
#pun-post .topic {
  margin-top: 1em;
  }

Честно - совсем не помню, за что отвечает, поэтому обычно и не обращаю внимания.

/* A5.8 */

/* A5.8 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-style: none none solid none;
  border-width: 0px 0px 2px 0px
  }

Здесь уже рамки. Рамки, это просто, но пока - обзор элементов:

.punbb .forum {...}
http://uploads.ru/t/3/p/O/3pOZH.gif

.punbb .formal
http://uploads.ru/t/y/J/s/yJsi2.gif

.punbb .modmenu
http://uploads.ru/t/D/i/e/DieSh.gif

.punbb .info
http://uploads.ru/t/q/4/Q/q4Qum.gif

.punbb .category
http://uploads.ru/t/Z/0/6/Z06QW.gif

border - позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Рамки можно задавать и по-отдельности (border-top, border-bottom, border-left, border-right)
Но все же обычно используют какую-то одну схему для прописывания границ. Например:

элемент {border: ширина    Тип_линии   Цвет_лини ;}

элемент { border: 5px dotted  #20ff20; }


Значения также можно раздробить и записывать по-отдельности.

border-width - ширина линии. при значении border-width: none  рамка исчезает, т.е. она нулевая.
border-style - тип линии, значения:
http://htmlbook.ru/sites/default/files/images/css/border_style.png
border-color - цвет линии. Тут, думаю, и объяснять ничего не надо ) Единственное, что прозрачный цвет прописывается как transparent, без решеток, точек и прочего. border-color: transparent

/* A5.9 */

/* A5.9 */
.punbb .container {
  border-style: solid;
  border-width: 1px;
  }

http://uploads.ru/t/p/I/2/pI2er.gif
границы вокруг выделенных блоков. Не внутри - только вокруг.

/* A5.10 */

/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.5em 1em;
  border-style: solid;
  border-bottom: none;
  border-width:1px;
  }

#pun-main h1
http://uploads.ru/t/k/5/P/k5P0O.gif

#pun-main h2
http://uploads.ru/t/M/h/F/MhFSN.gif

#pun-stats h2
http://uploads.ru/i/y/N/v/yNvlI.gif

отступы, границы - все как полагается. Отступы пока менять нежелательно, а вот границы при желании можно убрать.

Отредактировано Wilhelm (2012-06-07 19:41:16)

+1

12

Ух ты ** Некоторые моменты знала, но многие, только сейчас по нормальному поняла)
Пойду сейчас испытывать все на тестовике по новой х3

0

13

Я вновь в строю и готова к продолжению обучения ^ ^

0


Вы здесь » Кот » Архивы » Space Dementia


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC