Как украсить блог.

Мне захотелось приукрасить блог и получилась интересная статья. Здесь мы не будем использовать фоновый рисунок и тени, а обратимся к теме позиционирования.

Забудем о теории, а сразу перейдем к практике. Что я сделала, чтобы на блоге появились кот и птица?
  1. Взяла вот этот разделитель сайта:
    Кот свисающий с цветка.
    Кот свисающий с цветка.
    В Фотошопе сначала повырезала из него несколько фрагментов, выделив нужную область инструментом Обрезать картинку в Photoshop. и нажав Enter. Там же оптимизировала рисунки.
  2.  
  3. Далее добавила гаджет HTML/JavaScript в боковую панель в самый низ и удалила его заголовок. Теперь присутствие виджета не видно.
  4.  
  5. В гаджет включила код нарезанных изображений, предварительно загрузив их в Picasa. Данный код поместила в тег div:
    <div style="position: absolute; left: -15em; top: -1294px; z-index:10; overflow:visible;">...</div>
    position: absolute;фиксируем элемент на странице
    position: fixed;элемент не будет перемещаться при прокручивании окна браузера
    left: -15em;расстояние от левого края контейнера (объекта, содержащего данный элемент) составляет -15 em
    top: -1294px;расстояние от верхнего края контейнера составляет -1294px
    z-index:10;определяем порядок, в котором элементы будут перекрывать друг друга, т.е. кот должен быть поверх других составляющих блога
    overflow:visible;если элемент выйдет за пределы фрагмента, то он все равно будет показан
    Методом подбора значений left и top добилась нужного размещения на странице.
  6.  
  7. Затем ещё я добавила анимированную птичку таким же образом. Большой выбор рисунков можно найти на сайте http://smajliki.ru/. И образ был закончен.
Позиционирование элементов.
Позиционирование элементов.
в f t
наверх ↑

15 комментариев:

ольга
теперь пробую отправить ком. через Хром.
ольга
теперь из Оперы через имя
Катерина
теперь через аккаунт Гуугла из Хром, Катерина это опять Ольга
Катерина
из Оперы ч/з аккаунт Гуугла нет реакции
NMitra
Эмперическим путём были выявлены проблемы при комментировании пользователей "Опера". IE и Мозила, такая проблема не наблюдается.
dangina
Отличные статьи. И полезные.
Для меня очень актуальные, как для начинающей.
Спасибо.
Борис Василенко
спасибо, хотя для меня как для новичка зелёного это всё равно китайская грамота но здесь по крайней мере есть с чего начать... буду учится...
NMitra
Если нужно добавить картинку в заголовок, то посмотрите ещё здесь http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html
Nyukers
Здравствутйе.
Можно ли сделать так чтобы определенная статья на моем блоггере всегда оставалась _первой_ сверху ?
NMitra
Здравствуйте

http://shpargalkablog.ru/2010/07/vsegda-sverhu.html
illyuziya
Здравствуйте!
А можно зафиксировать Гаджеты, которые сбоку от сообщений? Или сделать, что бы содержимое левой и правой колонок не прокручивалось вместе со страницей..?
NMitra
См. http://shpargalkablog.ru/2012/04/position-fixed-html.html

Код CSS в шаблоне ( http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html )

aside {
position: fixed;
}
illyuziya
Ой.., как здОрово!!!
СПАСИБО БОЛЬШОЕ! :)
Salon Renesans
Большое Вам спасибо. Вы мне очень помогли! :3
NMitra
Благодарю за комментарий! Рада быть полезной!