Кот

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

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

Вы здесь » Кот » Архивы » `tsunami | Leona Verctos

`tsunami | Leona Verctos

Страница:   1 2 3 4 5  
Тема закрыта

Сообщений 21 страница 30 из 41

21

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56
Leona Verctos написал(а):

Цуми, у тебя, кстати, есть пара ошибок в кодах.
Кое-где не расставлены точки с запятыми, пропущена фигурная скобка в структуре и то, о чём уже говорили:
`tsunami написал(а):
#pun-title, #pun-title .container, .punbb .modmenu .container {
Зелёным - то, за что отвечает сей селектор (шапка); красным то, что лишнее.
В строке модераторских опций идёт повтор шапки из-за установленной туда шапки.
Подправь сразу, иначе потом и у остальных учеников будут баги.  о3о

У всех все хорошо работает.

Leona Verctos написал(а):

Дал цвет ссылкам, вставил няшную шапку и тёплый фон.

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

0

22

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Ладно, вот новый урок. Вернее, его первая часть, чтобы не откладывать. Потом вторую пришлю, и у тебя будут две оценки.

Добавим чего-то нового
Часть 1. Что именно мы будем добавлять? Иконки. Помнишь, мы убрали последний блок в одном из уроков. Это совсем не случайно, я хочу дать тебе более простой и хороший код, как мне кажется, для этого важного дела. Собственно, вот он. Вставляется в HTML-верх он.

<style>
.punbb table Div.icon {
float: right;
display: block;
width: ширина;
height: высота;
border-style: none;
background-image: url("иконка старых сообщений");
  background-repeat: no-repeat;
position: relative;
}
.punbb table div.inew {background: url("иконка новых сообщений") no-repeat;}
TR.isticky Div.icon {background: url("иконка важных сообщений") no-repeat;}
TR.iclosed Div.icon {background: url("иконка закрытых сообщений") no-repeat;}
</style>

Здесь все, думаю понятно. Ширину и высоту иконок я предпочитаю указывать 100х100. Пикселей, конечно. Если ты будешь делать так же, то тогда на месте моих слов "ширина" и "высота" пишешь 100px и 100px. Ты можешь взять и свои значения, но размер иконок обязательно должен соответствовать размерам, указанным в коде. Иначе ничего не получится.
На месте соответствующих слов ты вставляешь ссылки на соответствующие иконки, которые ты сделала или где-то нашла. Вот и все.

Задание
1. Делаешь или ищешь где-то иконки, подходящие по цвету и стилю к нашему дизайну.
2. Вставляешь в HTML-верх код, данный мной.
3. Делаешь в нем соответствующие исправления, вставляешь иконки.
4. Кидаешь очередной раз ссылку на тестовик мне.

0

23

  • Автор: Leona Verctos
  • — Hasta la vista, baby;
  • Leona Verctos
  • Откуда: Санкт-Петербург
  • Зарегистрирован: 2012-09-06
  • Приглашений: 0
  • Сообщений: 89
  • Уважение: +10
  • Позитив: +7
  • Пол: Женский
  • Возраст: 27 [1997-06-02]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2015-04-17 18:06:02

`tsunami, готово.
http://testinity.rusff.me/

0

24

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Leona Verctos
Молодец, 5.

0

25

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Добавим чего-то нового
Часть 2. А на сей раз мы будем добавлять картинку в самый низ. Помнишь, мы даже вставляли специально для этого еще один пункт во второе окно стиля? Я очень много где использую такую картинку:
http://s3.uploads.ru/t/9oj0s.png
http://s3.uploads.ru/FgQU4.png
Ее взяла из классного урока на этом же сайте "Делаем дизайн [супернатурал]". Раньше делала каждый раз что-то разное, а теперь просто перекрашиваю такую и ставлю на ней свой копирайт. Копирайт можешь себе придумать и поставить, можешь не придумывать. Только ставь не очень высоко, в самом-самом низу, так как картинка по своему формату не соответствует нашему коду.
Загружаешь картинку через сервер, ссылку в этот код, если не помнишь:

/* CS1.9 */
#pun-about p.container {
background: transparent url("...")
bottom center no-repeat;
  }

Но перед этим в фотошопе ты должна перекрасить картинку, чтобы она соответствовала телу форума. Заливаешь и рамочку (темно-коричневая), и саму картинку (бежевую часть) тем цветом (точно таким же!) каким у тебя залито тело форума. А те уголки светло-серые, которые по бокам, заливаешь цветом своего фона. Запутаться, вроде, не должна. Здесь все предельно просто.

Задание
1. Часть его была в уроке (перекрасить, вставить и пр.)
2. Выполняешь и кидаешь ссылку на исходник опять в тему.

0

26

  • Автор: Leona Verctos
  • — Hasta la vista, baby;
  • Leona Verctos
  • Откуда: Санкт-Петербург
  • Зарегистрирован: 2012-09-06
  • Приглашений: 0
  • Сообщений: 89
  • Уважение: +10
  • Позитив: +7
  • Пол: Женский
  • Возраст: 27 [1997-06-02]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2015-04-17 18:06:02

`tsunami
http://testinity.rusff.me/
Как-то так. Из-за тени в фоновой картинке, футер у меня будет заметен.
Если хочешь, я могу сделать чуть шире нижнюю картинку (860пкс) и закроется тень.

0

27

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Leona Verctos
Можешь попробовать. Или, если хочешь, вставь любую другую картинку в низ.

0

28

  • Автор: Leona Verctos
  • — Hasta la vista, baby;
  • Leona Verctos
  • Откуда: Санкт-Петербург
  • Зарегистрирован: 2012-09-06
  • Приглашений: 0
  • Сообщений: 89
  • Уважение: +10
  • Позитив: +7
  • Пол: Женский
  • Возраст: 27 [1997-06-02]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2015-04-17 18:06:02

`tsunami
Я готов :33

0

29

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Leona Verctos
Молодец)) правда, там небольшая несостыковка в пикселях - буквально 1-2.

0

30

  • Автор: Leona Verctos
  • — Hasta la vista, baby;
  • Leona Verctos
  • Откуда: Санкт-Петербург
  • Зарегистрирован: 2012-09-06
  • Приглашений: 0
  • Сообщений: 89
  • Уважение: +10
  • Позитив: +7
  • Пол: Женский
  • Возраст: 27 [1997-06-02]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2015-04-17 18:06:02

`tsunami
У меня очень маленькое разрешение экрана, но у меня при любом масштабе всё нормально.
В какую сторону поправить - влево, вправо? Я подвину :3

Отредактировано Leona Verctos (2013-02-17 19:43:39)

0

Тема закрыта
Страница:   1 2 3 4 5  

Вы здесь » Кот » Архивы » `tsunami | Leona Verctos

Рейтинг форумов | Создать форум бесплатно