crimson soda
Я то с сафари сижу. Теперь у тебя с фоном все хорошо и с ссылками? У меня все хорошо, блин, меня реально прет шапка и фон, ну о.о 5+ тебе) следующий урок кидать?)
`tsunami | crimson soda
Сообщений 21 страница 30 из 56
Поделиться212013-02-15 17:53:40
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
Поделиться222013-02-15 19:01:20
- give us the absolute
- Зарегистрирован: 2012-07-03
- Приглашений: 0
- Сообщений: 134
- Уважение: +13
- Позитив: +10
- Возраст: 29 [1995-02-22]
- Провел на форуме:
1 день 17 часов - Последний визит:
2013-09-16 21:25:02
`tsunami
не с ссылками та же фигня. с фоном не уверена уже). теперь на том месте черная область - возможно тоже часть шапки.
да, давай следующий)
Поделиться232013-02-15 19:05:13
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
crimson soda
Да хороше все))
Добавим чего-то нового
Часть 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. Кидаешь очередной раз ссылку на тестовик мне.
Поделиться242013-02-15 19:16:38
- give us the absolute
- Зарегистрирован: 2012-07-03
- Приглашений: 0
- Сообщений: 134
- Уважение: +13
- Позитив: +10
- Возраст: 29 [1995-02-22]
- Провел на форуме:
1 день 17 часов - Последний визит:
2013-09-16 21:25:02
`tsunami
ссылка
Поделиться252013-02-15 19:20:24
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
crimson soda
Быстро же ты, отлично. Ты когда-то уже делала такую работу? Только честно.
Поделиться262013-02-15 19:57:08
- give us the absolute
- Зарегистрирован: 2012-07-03
- Приглашений: 0
- Сообщений: 134
- Уважение: +13
- Позитив: +10
- Возраст: 29 [1995-02-22]
- Провел на форуме:
1 день 17 часов - Последний визит:
2013-09-16 21:25:02
`tsunami
нуу.. я говорила уже, что дизайны раньше делала, но методом тыка. самоучка в этом вопросе, однако без использования учебников и статей. решила разложить все по полочкам.
кстати, пыталась иконки сделать по левому краю, но они обрезались вполовину. :С
следующий урок?
Поделиться272013-02-15 20:47:21
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
crimson soda
Да, они будут пока обрезаться, это мы разберем в шестом уроке. Понятно, ну молодец.
Поделиться282013-02-15 20:48:33
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
Добавим чего-то нового
Часть 2. А на сей раз мы будем добавлять картинку в самый низ. Помнишь, мы даже вставляли специально для этого еще один пункт во второе окно стиля? Я очень много где использую такую картинку:
http://s3.uploads.ru/FgQU4.png
Ее взяла из классного урока на этом же сайте "Делаем дизайн [супернатурал]". Раньше делала каждый раз что-то разное, а теперь просто перекрашиваю такую и ставлю на ней свой копирайт. Копирайт можешь себе придумать и поставить, можешь не придумывать. Только ставь не очень высоко, в самом-самом низу, так как картинка по своему формату не соответствует нашему коду.
Загружаешь картинку через сервер, ссылку в этот код, если не помнишь:
/* CS1.9 */
#pun-about p.container {
background: transparent url("...")
bottom center no-repeat;
}
Но перед этим в фотошопе ты должна перекрасить картинку, чтобы она соответствовала телу форума. Заливаешь и рамочку (темно-коричневая), и саму картинку (бежевую часть) тем цветом (точно таким же!) каким у тебя залито тело форума. А те уголки светло-серые, которые по бокам, заливаешь цветом своего фона. Запутаться, вроде, не должна. Здесь все предельно просто.
Задание
1. Часть его была в уроке (перекрасить, вставить и пр.)
2. Выполняешь и кидаешь ссылку на исходник опять в тему.
Отредактировано `tsunami (2013-02-16 20:55:01)
Поделиться292013-02-16 06:28:26
- give us the absolute
- Зарегистрирован: 2012-07-03
- Приглашений: 0
- Сообщений: 134
- Уважение: +13
- Позитив: +10
- Возраст: 29 [1995-02-22]
- Провел на форуме:
1 день 17 часов - Последний визит:
2013-09-16 21:25:02
`tsunami
картинка маленькая, и не тыкается.
могу попробовать делать сама, но цель урока пока ведь не в этом?
Поделиться302013-02-16 11:46:40
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
crimson soda
У всех нормально получается с простым сохранением этой картинки. Она нормальная. Попробуй сделать так, если не получится, кину тебе ее ссылкой. Но сначала покажи мне, что у тебя получится.
