Кот

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

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


Вы здесь » Кот » Архив обучения от 03.12 » Воображение важнее, чем знание


Воображение важнее, чем знание

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

11

все сделала

0

12

Нееель, я просила сделать ширину в пикселях или емах)

Получилось, что дизайн у тебя так и остался резиновым, но при этом и тело контента стало уже, чем тело форума)
Тут все дело в относительности, в #pun ты задала ширину в 90%, эти 90% берутся от общей ширины страницы.
А вот ширина в 90% для .punbb - это уже 90% процентов ширины #pun, а не всей странички)
Подправь ширину для обоих селекторов)

Далее у нас идет выравнивание тела форума. Выравнивание задается только для #pun, если у тела нет рамки.
Выравнивание слева/справа делается в одну строчку:
float: left|right; - слева/справа соответственно
Запомни, этот параметр используется для выравнивания блочно-табличных элементов, но не для текста, для текста берется уже другой параметр.

Перед тем, как сделаешь выравнивание, открой дерево нашей странички (через просмотр кода), и найди там вот такую строку (справа вверху этого окошечка есть тоже строка поиска):

<div id="pun">

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

element.style {

}

Этой частью ты будешь пользоваться почти постоянно. Объясняю, почему. В стандартном стиле майббов некоторые элементы с одинаковыми свойствами прописаны через запятую: #селектор1, #селектор2, #селектор3 {параметр: аттрибут;}
Естественно, далеко не всегда тебе нужны будут у этих элементов одинаковые свойства.
А тот код, который в цитате выше - это код именно для этого селектора, без затрагивания остальных.
Сейчас ты кликаешь по пустому месту между фигурных скобочек, и там появляется маленькое окошечко для ввода. Начинаешь вводить слово float. Как только ты начнешь его набирать, в окошечке полупрозрачным появится это твое недописанное слово. Это на самом деле очень удобно, потому что ты не ошибешься в написании)
Как только дописала параметр, ставь ":" - тебя автоматически перебросит на ввод аттрибута. Там введи "right" - и сразу же у тебя форум встанет по правую сторону. НО! - у тебя еще не перенесены эти коды в сам стиль, поэтому открой новую вкладку с администрированием стиля и внеси в A5.1 прописанное в окошке справа и сохрани.
Пользоваться этим свойством Хрома очень легко и удобно, особенно если нужно что-то срочно поправить в коде. Например, ты случайно ввла ширину форума в 100 пикселей, и не можешь ни сохранить, ни что-то поменять - все настолько сплющено, что ты не видишь даже самого окна с кодами стиля. С помощью этого окошка ты увеличиваешь ширину форума, а потом исправляешь косяк) Все просто)
Сейчас ты ставишь форум с правой стороны + делаешь фиксированную ширину тела форума.

0

13

Джонни Д. написал(а):

Нееель, я просила сделать ширину в пикселях или емах)
Получилось, что дизайн у тебя так и остался резиновым, но при этом и тело контента стало уже, чем тело форума)
Тут все дело в относительности, в #pun ты задала ширину в 90%, эти 90% берутся от общей ширины страницы.
А вот ширина в 90% для .punbb - это уже 90% процентов ширины #pun, а не всей странички)
Подправь ширину для обоих селекторов)


Я не знаю, вроде исправила.
Дизайн уже не резиновый.

Джонни Д. написал(а):

Сейчас ты ставишь форум с правой стороны + делаешь фиксированную ширину тела форума.

все

0

14

Умница) Теперь - что делать, если нам надо выровнять форум по центру?
Первое, что тебе нужно запомнить железно:
float: center; - это полная и безоговорочная ересь) Такого быть не может, а если вдруг встретится в каком-то коде - безжалостно удаляй, потому что ошибка)

А что же, собственно, значит "форум по центру (страницы)"? Вполне нетрудно догадаться, что "по центру" - это по середине, элемент находится на одинаковом расстоянии и от правого края страницы, и от левого.
И вот мы плавно подходим к следующему параметрам, которыми придется довольно часто оперировать)
margin и padding
Оба эти параметра отвечают за отступы, но все же есть весомое различие.
margin - отступ какого-либо блока от границ его родительского элемента, т.е. того элемента, в котором лежит искомый блок:
http://htmlbook.ru/sites/default/files/images/css/css_margin_1.png

padding - отступ содержимого блока от его границ (самый частый пример использования - отступы для контента форума, чтобы тот не налезал на границы)
http://htmlbook.ru/sites/default/files/images/css/css_padding_1.png

В данном случае ты рассуждаешь так: мы работаем с #pun, его надо поставить отступами по центру. Нам нужно поставить по центру сам блок, а не его "начинку", поэтому сразу видно, что нам нужен не padding, а margin.

Прописывать аттрибуты для отступов можно точно так же, как это мы делали для высоты и ширины, но с небольшой оговоркой - самих значений после параметра может быть от 1-го - до четырех.
1) margin: 10px; - сделает отступ от всех границ на 10 пикселей
2) margin: 0px auto; - уберет отступ сверху и снизу, а слева и справа сделает одинаковый отступ (как раз искомое выравнивание по центру)
3) margin: 50px auto 10px; - отступ сверху станет в 50 пикселей, сам форум по центру (отступы слева-справа равны), а отступ снизу - 10 пикселей
4) margin: 50% 10em 60px 20%; - аттрибуты смотрим в таком порядке: сверху справа снизу слева (т.е. по часовой стрелке сверху)

Сейчас ты ставишь форум по центру сначала через просмотр кода, а уже потом в самом стиле)

0

15

Джонни Д. написал(а):

float: center;

Спасибо)) буду знать
У меня получилось

0

16

Теперь, когда у нас форум зафиксирован и стоит по центру, мы можем приступить к оооочень важной части)

Сейчас мы будем работать с фоном.
На самом деле используемых фона два, а не один, но работать с обоими мы будем работать и разбираться позже)

Сейчас нас интересует самый первый селектор во втором окне стиля

body {

}

Это и есть наш фон. Для него мы можем задать несколько особо нужных нам параметров:
background-color: цвет | transparent; - собственно, заливает фон нужным нам цветом. Либо делает его прозрачным. Примечательно, что если ты будешь вводить через просмотр кода, то при непосредственно вводе цвета можно ввести туда не сам шестнадцатиричный код цвета, а набрать его словом, например red, cyan, goldenrod, gold, silver. Понажимай английскую раскладку, на многие из букв тебе будет раскрываться небольшой списочек всех доступных в словесном виде цветов. Причем ты в сам стиль можешь тоже вводить эти же названия - все будет работать. Так-то)
background-image: url(путь к файлу) | none; - задает для элемента фоновую картинку. Если на этой самой фоновой картинке есть прозрачные области, а в параметре выше мы не задали никакого цвета, то фон страницы будет белый, что, как ты понимаешь, иногда совсем "не в строчку". А если мы пропишем к параметру аттрибут none - то у нас картинки не будет вовсе.
background-attachment: fixed | scroll; - указывает на то, будет ли у нас фон статичным (сколько колесиком не крути - фон все время на месте стоит) или же прокручивающимся.
background-position: left/right/center bottom/top/center; - указывает на расположение фона на странице. У этого параметра два и только два аттрибута: расположение по горизонтали и по вертикали.
А теперь если конкретно, словами и в процентах, все возможные варианты:

top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)

Заметь, что при использовании процентного вида аттрибуда по порядку ВСЕГДА идет сначала горизонталь, потом вертикаль - и только так.
background-repeat: no-repeat | repeat | repeat-x | repeat-y; - определяет то, будет ли наш фон повторяться при наличии свободного места или нет. Расшифровываю аттрибуты в том порядке, в котором они написаны: фон не повторяется | фон повторяется во все стороны | фон повторяется только по горизонтали | фон повторяется только по вертикали.

Очень много прописывать для несчастного фона, да? НО, сейчас мы подходим к очень важному моменту - все эти пять строк ты можешь записать в одну:

background: #color url() no-repeat scroll bottom center;

То есть ты пишешь параметр background, а потом после двоеточия прописываешь все нужные тебе аттрибуты через пробел. И тебе необязательно прописывать вот прям все-все те, которые я дала выше. Нужны тебе только картинка и цвет - пожалуйста, пропиши эти два) Еще один плюс - ты можешь писать их в любом порядке, браузеры способны сами определить, что к чему относится)

Сейчас ты делаешь следующее - заливаешь фон каким-либо не очень рвущим глаз цветом, выбираешь любую виньетку отсюда: http://www.lenagold.ru/fon/clipart/v/vgor.html и уменьшаешь до приличных размеров. Ставишь картинкой на фон, причем фон должен находиться снизу по центру, прокручиваться и повторяться по горизонтали. Дерзай)

0

17

Джонни Д. написал(а):

Сейчас нас интересует самый первый селектор во втором окне стиля
body {
}


Я найти не могу. Писала все параметры, но ничего не получилось. Может не туда писала

0

18

Скинь мне, плиз, под спойлер второе окно стиля

0

19

вот

/* CS1 Background and text colours
-------------------------------------------------------------*/

/* 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: #f1f1f1;
  color: #333;   
  }
/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #f7f7f7;
  color: #333;
  }

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

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

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

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

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

/* CS1.8 */
#pun-navlinks .container {
  background-color: #0F5995;
  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: #ccc #ccc #aaa #ccc
  }

/* 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: #004F90;
  }

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

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

/* 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: #005EAB;
  }

/* 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: #eee;
  text-decoration: none
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #fff;
  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}

0

20

Оу оО Тогда ты прописываешь это все дело сама, вот после этой строки:

/* CS1 Background and text colours
-------------------------------------------------------------*/

0


Вы здесь » Кот » Архив обучения от 03.12 » Воображение важнее, чем знание


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