Кот

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

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


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


Space Dementia

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

1

Итак, AliKa, судя по предоставленным работам, ты уже имеешь вполне определенные понятия о css и html, рассказывать с самых азов не требуется.

Несколько вопросов:
- Спрашиваешь ли ты о разных "фишках" на форумах-поддержках или ищешь решение проблемы сама? (под "фишками" можно понимать, например, установку трех фоновых изображений здесь: http://elmir.rolka.su/ )
- Знакома ли с классическим "FAQ по CSS" от ОТП? ([link], кстати, очень хороший и полезный. Сам учился, да и сейчас поглядываю порой). Знаешь ли, в каком порядке идут вышеобозначенные слои? (которые body, html, #pun_wrap, #pun и пр.)
- На каком браузере будем работать? (Я использую Opera со встроенной Dragonfly, для Мозиллы или Хрома эти дополнения будут носить иное название, ну и чуть-чуть различаться внешне)

Отредактировано Wilhelm (2012-06-03 14:53:24)

0

2

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

- Спрашиваешь ли ты о разных "фишках" на форумах-поддержках или ищешь решение проблемы сама? (под "фишками" можно понимать, например, установку трех фоновых изображений здесь: http://elmir.rolka.su/ )

Когда как) Иногда уточняю некоторые моменты опять же на немало известном FD. Иногда копаюсь сама, пытаюсь разбираться, что-то менять. Не редко многое получалось "методом тыка" х)
На эльмир как раз ставила и немного подгоняла код, найденный на FD.

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

- Знакома ли с классическим "FAQ по CSS" от ОТП? ([link], кстати, очень хороший и полезный. Сам учился, да и сейчас поглядываю порой). Знаешь ли, в каком порядке идут вышеобозначенные слои? (которые body, html, #pun_wrap, #pun и пр.)

Знакома, но не слишком хорошо. Честно, я довольно плохо усваиваю информацию которую просто пишут - мне надо проверять на практике. Да и не редко все такие уроки написаны не слишком понятно для меня, а переспросить и уточнить не у кого (про данную ссылку раньше не знала).
Насколько я знаю, всегда сначала идет html (либо может встретиться html, body), потом body, #pun и #pun_wrap. Но тут еще нужно смотреть и подгонять. Если нужно подставлять через #pun_wrap копирайт (на том же Эльмире я через него ставила нижнюю рамку с цветами по бокам), то тогда нельзя прописывать фон форумных таблиц через #pun, иначе он просто перекроет низ. Это по крайней мере то, что я сама узнала и как сама делала. Может в чем-то ошибаюсь)

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

- На каком браузере будем работать? (Я использую Opera со встроенной Dragonfly, для Мозиллы или Хрома эти дополнения будут носить иное название, ну и чуть-чуть различаться внешне)

У меня загвоздка с интернетом. Он у меня, можно сказать, довольно медленный, поэтому я предпочитаю сидеть на Хроме - работает быстрее чем прочие браузеры. Но все же имеется и Мозилла, а Оперу вдруг чего, могу скачать)

0

3

Почти правильно, здорово )
Как уже говорилось, форум наш состоит, скажем так, из "слоев". Только в отличие от бумажного коллажа или фотошопного вырезать часть слоя так, чтобы сквозь него можно было "продеть" другой - нельзя. Можно изменить размер, разместить его где-нибудь в уголке, задать прозрачный фон и производить прочие украшательства, но по сути своей он всегда остается прямоугольной областью.

Нашим главным помощником в обучении будут средства разработчика, встроенные в браузер. Для того, чтобы их запустить в том же Хроме, достаточно щелкнуть правой кнопкой мыши по любому месту форума и выбрать пункт "Просмотр код элемента" (для Мозиллы будет "Inspect Element with Firebug"):
http://uploads.ru/i/c/e/D/ceDmF.gif
Должно загрузиться такое вот окошко:
http://uploads.ru/t/v/N/A/vNAMI.gif

Вполне возможно, что оно загрузится не внизу, а где-нибудь посередине - тогда просто перетащи его в удобное для себя место. Или нажми кнопку пристыковки:
http://uploads.ru/i/9/v/N/9vNiY.gif
Отодрать окошко от нижней границы можно тем же методом - тыкнув на крайнюю кнопку (только на тот момент там будут показаны два слоя).  Также очень полезной для нас будет "лупа": http://uploads.ru/i/C/h/6/Ch6ak.gif  Щелкаем на нее, переводим курсор мыши на форум - и наблюдаем, как подсвечиваются разные блоки. Щелкаем на одном из них - и в нашем рабочем окошке с кодом выскочит его месторасположение, свойства и, самое важное, название. Не всегда удается "попасть" в нужную область, но это не страшно, эту проблему обойдем другим путем.

Собственно, сейчас самое время рассказать о том, что такое id и class и чем они различаются. Не знаю, есть ли смысл грузить техническими деталями наше обучение, о них можно почитать как-нибудь на досуге, а пока просто и незатейливо:
id - это идентификатор, уникальное имя элемента. Может присваиваться только один раз (т.е. такой вот элемент на странице - только один-единственный). В css-коде такие элементы прописываются с решеткой перед своим названием, как пример - #pun {...} . В html-коде же к идентификатору обращаются как раз через id. Запись html будет выглядеть как: <div id="pun">..</div>
class - классы. "Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега." [цэ] А если проще - то классы нам нужны для того, чтобы разнообразить стилевые украшательства для идентификаторов. И если id может встречаться в коде только один раз (в смысле, определенное имя id), то class'ов с одинаковым именем может быть очень много.
Запись для css:  .punbb {...}
Обращение через html: <div class="punbb">...</div>

Как пример совмещенности:  #pun-redirect .main-title {display: none;}  (id в  данном случае носит имя pun-redirect, а class - имя main-title)

Есть записи и без точек и решеток, это селекторы тегов, но вряд ли они нам понадобятся.
Пока то, что нужно усвоить - идентификаторы начинаются с #, классы - с точки перед названием. В html к идентификатору обращаются как id="..."  ,  а к классу как class="..."  При обращении через html точки-решетки не ставятся.

Теперь о порядке слоев. В исходном коде можно наблюдать такую картинку:
http://uploads.ru/i/K/W/B/KWBCY.gif
Зеленым подчеркнуты и пронумерованы те части, с которыми мы будем в дальнейшем работать.
Вообще слои легче всего сравнить с книгой или стопкой бумаги - когда один лист накладывается поверх другого. Т.е. самым первым, самым нижним, у нас будет лист html, поверх него ложится другой лист body и т.д.  Вот примерная схема нашей "бумажной стопки":
http://uploads.ru/i/S/F/O/SFOrT.gif
*на верхний не обращай пока внимания, его я забыл удалить и пришлось прописывать.
Соответственно, можно посмотреть, какой слой будет перекрывать предыдущий.


Вводная часть закончена, задание:  выделить из html-записи идентификаторы и классы, записать их названия в css, соблюдая правила точек-решеток.

<div id="html-header">
<div id="pun-title" class="section">
<div id="pun-navlinks" class="section">

Отредактировано Wilhelm (2012-06-04 15:15:43)

+1

4

Получается, напутала я сначала с очередностью #pun и #pun_warp?)

А с этим "просмотром кодов элемента" немного уже была знакома, правда совсем случайно х) Но теперь стало более ясно, как правильно с ней управляться) Попробовала на этом форуме по просматривать лупой - довольно забавно получается.

Если я правильно поняла, то совершенно любому идентификатору может прописываться класс, и не один?
А с "книгой" очень удобно и наглядно, очередность теперь точно не забудешь))

Задание.
Идентификаторы: html-header, pun-title, pun-navlinks.
Классы: section.
Преобразованные в CSS:
#html-header {...}
#pun-title .section {...}
#pun-navlinks .section {...}

Надеюсь, правильно все поняла.
И кстати, у меня сразу появился вопрос. Вот html и body, это ведь идентификаторы? Но ни разу не видела, чтобы перед ними ставилась решетка. Или они такие себе исключения?)

+1

5

Задание выполнено на ура! Здорово!  http://uploads.ru/i/L/s/h/LshJS.gif

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

html и body

Эти селекторы называют самыми простыми - селекторами тега. Уже из названия выводим, что эти селекторы используют названия тегов, к которым должны будут применяться написанные после этих селекторов правила CSS. Еще проще - все свойства, которые мы пропишем к подобному селектору, будут применяться ко всем одноименным тегам в html.

CSS:  div {...}
html: <div>...</div>

В данном варианте все те украшательства, что мы присвоим слектору div будут применены ко всем тегам <div> в документе. А так как "дивов" у нас много, то это банально нецелесообразно и порой даже вредно. А html и body в принципе должны встречаться на странице документа только один раз. Есть еще универсальный селектор, обозначаемый звездочкой, которая означает, что данное правило будет применяться вообще к любому Html тегу в коде:

* {color: #000;}

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

/* A2.2 */
.punbb * {
  margin: 0
  }

Как читаем: "Каждый элемент, заключенный в классе punbb (который, в свою очередь, входит в состав/накладывается поверх #pun), по умолчанию не будет иметь отбивки (отступов от иных частей)"

И сразу вопрос: может, сразу начнем разбирать форумный css-код? Разберем почти каждую строку (кроме тех, что трогать вообще не рекомендуется в принципе, да и не требуется обычно), а по ходу дела буду рассказывать, как с отступами работать, что с одинаковыми селекторами делать, как код оптимизировать и прочее-прочее.
Украшательства в виде теней для текста и блоков, задержки эффектов и прочие примочки рассмотрим в последнюю очередь. Они в целом простенькие, там главное следить и знать, что подобные украшательства не всеми браузерами поддерживаются.

В любом случае, сейчас очень востребованным будет вот этот справочник:  http://htmlbook.ru/css
Вообще радость подобных справочников в том, что не надо держать все значения в голове, достаточно примерно помнить название свойства (например, background-attachment), а в справочнике уже выведется и то, какими браузерами (и с какой версии) поддерживается подобное свойство, какие значения мы ему можем задать (например, scroll или fixed)

+1

6

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

Задание выполнено на ура! Здорово!

Когда понятно объясняют, все становится просто ^ ^

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

Эти селекторы называют самыми простыми - селекторами тега.

А, теперь вроде поняла)

И про звездочки эти. Я правильно поняла, что каждый элемент с ней, будет так сказать более важным, чем такой же элемент без нее? Или я чуток запуталась? оО

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

И сразу вопрос: может, сразу начнем разбирать форумный css-код?

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

0

7

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

Я правильно поняла, что каждый элемент с ней, будет так сказать более важным, чем такой же элемент без нее?

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

Хорошо, как сделаю часть скриншотов, выложу первую часть обзора.

оффтоп

Вообще для чего я именно так делаю - сначала показываю, где что расположено, а потом уже обращаю внимание на макет: потому что понимая, хотя бы немного, как расположены элементы и как с ними можно работать, можно более осмысленно браться за графику, понимая, что вот кучу закорючек в ту или иную область не впихнешь, а вот "растащить" два элемента (например, раскидать Форум  и Выход наверх форума) - вполне возможно.

0

8

Все, теперь поняла) А то сначала немного не так информацию восприняла)
Про !important немного знаю, приходилось уже пару раз использовать.

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

Вообще для чего я именно так делаю

Это на самом деле очень удобно, запоминать и понимать намного проще ^ ^

0

9

Ну ладно. Для начала устанавливаем на свой тестовик классический стиль - тот, который так нелюбим дизайнерами и который называется "стиль из генератора" (хотя генератором уже сто лет как никто не пользуется, похоже):

Код:
/*************************************************************
 - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
  margin: 0
  }

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;
  }

/* A2.4 */
.punbb img {
  border:none
  }

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
  }

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }


 /* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;
  }

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
  }

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-size: 1em;
  font-weight: normal;
  }

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* A3.7 */
.punbb address, .punbb em {
  font-style: normal
  }

/* A3.8 */
.punbb .post-content em {
  font-style: italic
  }

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
  }

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

/* A3.11 */
.punbb optgroup {
  font-weight: bold;
  }


/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
  }

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
  }


/* A5 Basic page layout and borders
-------------------------------------------------------------*/

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

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

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

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

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

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

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

/* 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
  }

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

/* 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;
  }


/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */
.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  }

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #888;
  width: 250px;
  margin: 5px 0;
  }

/* B1.3 */
.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
  }

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom
  }

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;
  }

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
  }

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
  }

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  border-style: solid;
  border-width: 1px;
  }

/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;
  }

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em 0;
  }

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
  }

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;
  }


/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */
.punbb .linkst {
  float: left;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  height: 0;
  }

/* B3.2 */
.multipage {
  margin-top: 3em;
  }

/* B3.3 */
.linkst .pagelink {
  position: absolute;
  top: -4em;
  left: 1em;
  width: 24em;
  }

/* B3.4 */
.linkst .postlink {
  position: absolute;
  top: -4em;
  right: 1em;
  width: 16em;
  text-align: right;
  font-weight: bold;
  }

/* B3.5 */
.punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 1.1em;
  }

/* B3.6 */
.linksb .pagelink {
  float: left;
  width: 24em;
  text-align: left;
  }

/* B3.7 */
.linksb .postlink {
  float: right;
  width: 16em;
  font-weight: bold
  }

/* B3.8 */
.subscribelink {
  clear:both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  }


/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  padding: 1.7em 2.3em 1.1em 2.3em;
  }

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;
  }

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {
  margin: 0 0.6em 0 0
  }

/* C1.4 */
.punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0
  }

/* C1.5 */
.punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 1.1em
  }

/* C1.6 */
.punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;
  }

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0
  }

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
  }

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0
  }

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
  }

/* C1.11 */
.punbb .inline .infofield {
  clear:both
  }

/* C1.12 */
.punbb .datafield br {
  display: none
  }

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {
  font-weight: bold
  }

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal;
  }

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%; /* For IE */
  }

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
  margin: 0;
  }

/* C1.17 */
.punbb .hashelp {
  position: relative;
  }

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
  }

/* c1.19 */
.punbb #profile .helplinks {
  top: 1.5em;
  }

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
  }

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
  }


/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
  }

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  text-align: center;
  width: 10%;
  }

/* C2.3 */
.punbb .main .tcr {
  overflow: hidden;
  text-align: left;
  width: 30%;
  }

/* C2.4 */
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
  width: 40%
  }

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
  text-align: left;
  width: 20%;
  }

/* C2.6 */
#pun-debug table .tcl {
  width: 15%;
  white-space:normal;
  }

/* C2.7 */
#pun-debug .tcr {
  width: 90%;
  white-space: normal;
  }

/* C2.8 */
#pun-index .tcl h3 {
  font-size: 1.2em;
  font-weight: bold;
  }

/* C2.9 */
.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;
  }

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em
  }

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 0.8em 1em;
  }

/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em;
  }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0
  }

/* C2.14 */
.punbb tbody.hasicon td.tcl {
  padding-left: 3.2em
  }

/* C2.15 */
.punbb div.icon {
  border-style: solid;
  border-width: 0.6em 0.6em 0.6em 0.6em;
  height: 0;
  line-height: 0.0;
  margin-top: 0.1em;
  width: 0;
  }

/* C2.16 */
.punbb  table div.icon {
  font-size: 1.05em;
  position: absolute;
  margin-left: -2.2em;
  }

 /* C3 Topics
-------------------------------------------------------------*/

/* C3.1 */
.punbb .post .container {
  border-style: none solid solid solid;
  border-width: 1px;
  margin-top: -1px;
  padding-bottom: 1px;
  }

/* C3.2 */
.punbb .post h3 {
  border-style: solid solid none solid;
  border-width: 1px;
  }

/* C3.3 */
.punbb .post h3 span {
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px
  }

/* C3.4 */
.punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: right;
  font-weight: normal;
  }

/* C3.5 */
.punbb .post .post-author {
  float: left;
  width: 19em;
  margin-top: -1.5em;
  overflow: hidden;
  }

/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%;
  }

/* C3.7 */
.pa-author {
  font-size: 1.1em;
  font-weight: bold;
  }

/* C3.8 */
.pa-author a {
  text-decoration: none
  }

/* C3.9 */
li.pa-title {
  padding-bottom: 0.4em;
  font-weight: bold;
  }


li.pa-online {
  line-height: 0.8em;
  border-left-style: solid;
  border-left-width: 0.7em;
  padding-left: 0.4em;
  margin-top: 0.7em;
  }

/* C3.11 */
.punbb .post-body {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px 0;
  }

/* C3.12 */
.punbb .post-box {
  padding: 1em;
  }

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em
  }

/* C3.14 */
.punbb .post-links {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  }

/* C3.15 */
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border-top-style: dashed;
  border-top-width: 1px;
  background: transparent;
  text-align: right;
  }

/* C3.16 */
.punbb .post-links li {
  display: inline;
  padding-left: 1em;
  }

/* C3.17 */
.pl-email, .pl-website {
  float: left;
  }

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
  }


/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right;
  }

/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
  }

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;
  }

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em;
  }


/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em
  }

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;
  }


/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;
  }

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
  }

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
  }

/* C6.4 */
#viewprofile ul, #profilenav ul {
  border-style: solid;
  border-width: 1px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;
  }

/* C6.5 */
#viewprofile h2, #profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
  }

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative;
  }

/* C6.7 */
#viewprofile li, #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
  }

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;
  }

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
  }

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
  }

/* C6.11 */
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em
  }


/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
  }

/* C7.3 */
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
  }


/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
  margin: 0;
  border-style: solid solid none solid;
  border-width: 1px 1px 0 1px;
  }

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 40px;
  padding: 2em 1em 0 1em;
  }

/* D1.3 */
#pun-title .container {
  border-style: none solid none solid;
  }

/* D1.4 */
#pun-title h1 span  {
  font-size: 1.5em;
  }

#pun-title table {
        border: none;
        height: 40px;
        width: 100%;
}

#pun-title td.title-logo-tdl {
        border: none;
        width: 100%;
}

#pun-title td.title-logo-tdr {
        border: none;
        width: 468px;
        vertical-align: top;
        padding-top: 2px;
}

/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
  }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline
  }

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;
  }

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;
  }

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  }

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
  border-left-style: solid 1px;
  border-right-style: solid 1px;
  margin: 0;
  }

/* D3.2 */
#pun-navlinks .container {
  padding: 0.7em 1em;
  }

/* D.3 */
#pun-navlinks li {
  display: inline;
  padding-right: 1em;
  }

/* D3.4 */
#pun-navlinks li a {
  font-size: 1.1em;
  }

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
  margin-top: 0;
  }

/* D4.2 */
#pun-ulinks .container {

  padding: 0.7em 1em;
  }

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 1px;
  white-space: nowrap;
  }

/* D4.4 */
#pun-ulinks li a {
  padding: 0 0.3em 0 0.6em
  }

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0
  }

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status, #pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* D5.2 */
#pun-status .container {
  padding: 0.8em 1em 1em 1em;
  }

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
  }

/* D5.4 */
#pun-crumbs1 {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;
  }

/* D5.5 */
#pun-crumbs1 p.container {
  border-top: none;
  padding: 1em 1em 0.8em 1em;
  font-size: 1.1em;
  }

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;
  }

/* D6 Announcement
-------------------------------------------------------------*/

/* D6.1 */
#pun-announcement h2 {
  padding: 0;
  margin: 0 1em -3.5em 1em;
  border-style: none none solid none;
  border-width: 0 0 1px 0;
  position: relative;
  font-weight: bold;
  }

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  }

/* D6.3 */
#pun-announcement .container {
  padding: 4.3em 1em 1em 1em;
  }

/* D7 Statistics
-------------------------------------------------------------*/

/* D7.1 */
#pun-stats .container {
  padding: 0.8em 1em
  }

/* D7.2 */
#pun-stats li.item1, #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
  }

/* D7.3 */
#pun-stats li.item3, #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
  }

/* D7.4 */
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 1px;
  float: left;
  width: 100%;
  line-height: 130%;
  }

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px;
  padding: 0.7em 0 0 0;
  }

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
  }

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
  }

/* D8.3 */
#pun-about {
  margin-top: 0;
  }

/* D8.4 */
#pun-about .container {
  border-top-style: none;
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em;
  }

/* D8.5 */
#pun-about p span {
  display:block;
  padding-left: 50%;
  }

/* D8.6 */
#pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
  }

/* D8.7 */
#pun-crumbs2 .container {
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;
  }

/* D8.8 */
#pun-break4 {
  margin: -2px 1em;
  border-style: solid none;
  border-width: 1px 0;
  position: relative;
  height: 0;
  z-index: 1;
  }

/* D8.9 */
div.punbb-admin #pun-about .container {
  border-top-style: solid;
  border-top-width: 1px;
  }


/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */
#pun-help .formal .info-box h3.legend {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 0;
  margin-bottom: 0.8em;
  }

/* D9.2 */
#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 1.1em;
  }

/* D9.3 */
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em
  }

/* D9.4 */
#pun-help .formal ul, #pun-help .formal dl {
  padding: 0 0 0 1em
  }

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%
  }

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top
  }

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
  }
Код:
/* CS1 Background and text colours  background-color: #E139F1;
-------------------------------------------------------------*/

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #dedfdf;
  color: #333;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #d1d1d1;
  color: #333;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #aac9eb;
  color: #fff;
  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #aac9eb;
  color: #333;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #d1d1d1;
  color: #005EAB
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #d1d1d1;
  color: #333
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #f9f9f9;
  color: #333
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #dedfdf;
  color: #f1f1f1;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #606060
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #f5f5f5
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #606060;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #606060;
  }

/* CS2.5 */
.punbb th {
  border-color: #606060
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #ccc #fff #fff #ccc;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #ccc
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #fff
  }

.punbb .divider {
  border-color: #ccc #fff #fff #fff
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #dedfdf
  }

li.pa-online {
  border-left-color: #aac9eb;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #005EAB
  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #333
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #B42000;
  }

/* CS3.3 */
#pun-navlinks a {
  color:#005cb1;
  text-decoration: none
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #005cb1;
  text-decoration: underline
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {border-color: #E6E6E6 #DEDEDE #DADADA #E2E2E2}
tr.iredirect div.icon {border-color: #F7F7F7 #F7F7F7 #F7F7F7 #f7f7f7}
div.inew {border-color: #0080D7 #0065C0 #0058B3 #0072CA}

#pun-main div.catleft, #pun-main div.catright {display: none}

Ох, намучаюсь я сам со стилем этим, чувствую.. хех, буду память освежать )
Для удобства сначала сразу же "ужмем" его. Заменяем

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

на

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


__________________________________

Сам стиль форума у нас "дробится" на два файла. Один называется style.css, второй - style_cs.css

/* A1.1 */
  @import url(style_cs.css);

@import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. В данном случае оно "подключает" к первому окошку содержимое второго.

Сразу пропускаем  пункты A1 и А2, там трогать ничего не стоит. Во избежание, да.

A3 Text setup

/* A3.1 */
body {
  font-size: 100.01%;
  }

Итак, у нас есть селектор тега и заданное значение размера шрифта. Оно будет применяться ко всем объектам на странице по умолчанию. В данном случае можно изначально изменить размер шрифта. Поставим, например, вместо 100 - 80. Сохраняем, смотрим на разницу:
http://uploads.ru/t/d/y/t/dytnx.gif

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
  }

Класс .punbb, находится внутри слоя #pun. Опять же - устанавливает размер шрифта на нашем форуме. Заменим 68 на 100:
http://uploads.ru/t/8/C/W/8CWYb.gif
Заметка: почему у шрифта кроме жирности и размера указано не одно семейство, а несколько? Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на компьютере.

Так вот ты целыми двумя способами можешь изменить размер шрифта на всем форуме сразу (тоже один из распространенных вопросов на техподдержках.)

/* A3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }

Вот, встречаем несколько элементов, объединенных для прописывания одного свойства. Разберем подробнее:
.punbb textarea {...} - http://uploads.ru/t/l/A/R/lARmy.gif
Т.е. это почти все поля ввода. Для наглядности можешь поставить куда-нибудь во второе окошко следующий код и посмотреть, где цвет фона изменится на ядовито-розовый: 

Код:
.punbb textarea {background-color: #E139F1; }

Таким же образом можем проверить
.punbb input {...} - http://uploads.ru/t/9/W/g/9WgXI.gif
(все мелкие поля ввода, кнопки, места для галочек и прочее)
.punbb select {...} - http://uploads.ru/i/p/E/J/pEJ1c.gif
(выпадающие списки)

И везде - устанавливается размер шрифта в 1em. Можешь изменить на пиксели, но все же не стоит. Изменим 1em на 1.8em:
http://uploads.ru/t/v/N/J/vNJK8.gif

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-size: 1em;
  font-weight: normal;
  }

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

.punbb h1
http://uploads.ru/t/R/v/w/RvwMK.gif

.punbb h2
http://uploads.ru/t/B/A/j/BAjkP.gif

.punbb h3
http://uploads.ru/t/w/Y/L/wYL4X.gif

.punbb table
http://uploads.ru/t/h/q/6/hq6N5.gif

.punbb th
http://uploads.ru/t/e/p/a/epaFy.gif


http://uploads.ru/t/N/6/L/N6LuA.gif
Дальше не очень интересные вещи, остановиться подробнее следует на этом пункте:

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
  }

Он отвечает за подчеркивание на форумах. Подчеркивание обеспечивается свойством text-decoration: underline; (ссылка на htmlbook) . Иногда на форумах спрашивают, почему не работает кнопка подчеркивания, и чаще всего именно из-за этого пункта - потому что убрали underline, заменив его на none, который отменяет подчеркивание.

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

Устанавливает подчеркивание для всех ссылок на форуме.

huh, на сегодня хватит, Дальше - завтра.

+1

10

Wilhelm
У меня специально этот "стиль из генератора" на отдельном тестовике постоянно припасен, по моему просто с ним наоборот работать удобнее оО Ну или просто я уже привыкла так)

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

Ох, намучаюсь я сам со стилем этим, чувствую.. хех, буду память освежать )

Ну это дело полезное)

Честно, с разделом текста, раньше катастрофически боялась работать. Везде обычно пишут, что в него лезть только в крайних случаях, вот я и не лезла - угрожающе ведь :\
А сейчас, все стало понятно, и оказалось ничего смертельного совсем нет)

И очень полезный совет, по поводу выделения отдельных частей яркими цветами - удобно) Сама раньше до этого не додумывалась. Я конечно меняла некоторые вещи поэтапно и смотрела, что меняется, но не всегда заметно получалось.
/пошла пока копаться со всем этим на тестовике/ х)

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

huh, на сегодня хватит, Дальше - завтра.

Буду ждать) Замечательные уроки ^ ^

+1


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


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