-Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Стена СтенаСтена: мини-гостевая книга, позволяет посетителям Вашего дневника оставлять Вам сообщения. Для того, чтобы сообщения появились у Вас в профиле необходимо зайти на свою стену и нажать кнопку "Обновить

 -Цитатник

Без заголовка - (2)

Как отделить одним движением селёдку от костей Читать дальше... http://kapitoshka70.livejournal....

Без заголовка - (0)

Баклажаны по-гречески: 3 шт. - баклажана4 ст. ложки - оливкового масла500 гр. - мясного фарша1 шт...

Памяти Михаила Евдокимова: - (4)

Памяти Михаила Евдокимова: Без заголовка Памяти Михаила Евдокимова: Тимофей п...

Как тёща познакомилась с будущим зятем - (0)

Забавный случай в ванне: Как тёща познакомилась с будущим зятем

Японский стиль. Фоны. - (4)

Японский стиль. Фоны. //s46.radikal.ru/i114/0909/1c/cbe53a2f34dat.jpg http://s43.radi...

 -Видео

 -Шутливый гороскоп блоггера

Гороскоп для «Великовозрастное_дитя» на 08 сентября 2009

Сегодня блогосфера источает особенно сильную ауру, что может сподвигнуть вас выбраться в клуб вместе с Kapitoshka_70. Апогей Яндекса входит в резонанс с пульсом блогосферы, и это побуждает помочь по мере возможностей intdiz. Постарайтесь не высказываться слишком резко в дневнике XAH-XAM. Сегодня вас жутко тянет познакомиться с SweetSugarLady.

Получить свой гороскоп

 -Поиск по дневнику

Поиск сообщений в Великовозрастное_дитя

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 15.04.2009
Записей:
Комментариев:
Написано: 5475


Делаем открытку со стихами

Воскресенье, 12 Июля 2009 г. 13:08 + в цитатник

Сделаем открытку со стихами. Ввиду того что я ленивый и мне лень искать для примера фоны и текст стихов, я позаимствовал все это у inmira с её поста http://www.liveinternet.ru/users/inmira/post99542587/.

Фон таблицы - Фон для рамки

Фон ячеек таблицы - Фон для текста и картинки

Рисунок 1 - Картинка.

Коды картинок ( видны при редактировании черновика или поста )

Размеры картинок уменьшены что бы они не занимали много места в посте

Сделаем рамку для открытки. Для этого построим таблицу 1х1 - одна строка, один столбец. Для таблицы пропишем background.
В background укажем ссылку на фоновую картинку для рамки



Что бы получилась рамка нужно "лишнее" пространство залить фоном для текста и рисунка.
Что бы это сделать нужно указать background для ячейки тяблицы



Получилось не совсем то что мы хотели. Это потому что мы "забыли" указать отступ от границы таблицы до ячейки таблицы.
Исправим это дописав в тег <table> параметр cellspacing



И все равно ничего не получилось. Все это потому что в дневнике, для таблицы в глобальных стилях указано border-collapse: collape и из-за этого cellspacing игнорируется
Что бы это исправить нужно к <table> добавить стиль style="border-collapse: separate;"



Ура! У нас есть рамка :). Все что нам осталось это вставить в ячейку таблицы рисунок и текст стихов



Рисунок 1 Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля!

Не все так просто :). Во первых текст расположен не справа от рисуна, а под ним. Во вторых текст нечитаемый из-за того что цвет текста черный и размер шрифта маленький.
Что бы текст располагался справа от рисунка добавим в код рисунка align="left" в этом случае рисунок будет располагаться слевой стороны ячейки, а текст будет "обтекать" его справа.
Что бы изменить цвет текста и размер шрифта добавим к <td> стиль style="color: #fffcfc; font-size: 18px;". Цвет текста #fffcfc, размер шрифта 18px.



Рисунок 1 Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля!

Уже лучше :) Но есть недоработка. Текст заползает под рисунок. Что бы этого не было поместим рисунок текст стихов в тег <div>. со стилем style="float: left" для рисунка и style="float: right" для текста.
Я приведу пример сокрашенного кода что бы было понятнее

Рисунок 1
Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля!

Получили практически то что хотели. Осталось привести текст стихов в "божеский" вид. Можно установить галочку "Сохранять переводы строк в тексте.", но я лучше уберу это галочку и добавлю еще один тег <pre>. Все что находится внутри этого тега будет выводится со всеми пробелами и переносами строк.

Вот мы и получили то что хотели.

Рисунок 1
Весь год, не соврав никому ни на грошь,
Мы ждем, как небесную манну,
Тот день, когда можно удариться в ложь,
Невинно придаться обману!
Набрав арсенал завиральный идей,
С кощунственным трепетом в теле
Мы ловим доверчивых честных людей,
Забывших о первоапреле.
И мы их находим, смиренных ягнят,
Простецки развесивших уши.
И стрелы обмана со свистом летят
В их светлые, чистые души.
Но первоапрельский веселый обман -
Сердечная наша потеха.
И стрелы не кровь высекают из ран,
А добрые искорки смеха.
О, как же он весел и как же хорош,
Пришедший на смену метелям,
Тот праздник, во смех превращающий ложь!
Сограждане, с первым апреля!
                           
Метки:  

Процитировано 86 раз
Понравилось: 1 пользователю

Vikylia68   обратиться по имени Воскресенье, 12 Июля 2009 г. 13:09 (ссылка)
Спасибо за урок.
Ответить С цитатой В цитатник
На_Пути_К_ВЕЧНОСТИ   обратиться по имени Re: Делаем открытку со стихами Воскресенье, 12 Июля 2009 г. 13:19 (ссылка)
спасибо!

LI 5.09.15
Ответить С цитатой В цитатник
NATALIU   обратиться по имени Воскресенье, 12 Июля 2009 г. 16:05 (ссылка)
спасибо большое
Ответить С цитатой В цитатник
Inmira   обратиться по имени Воскресенье, 12 Июля 2009 г. 18:25 (ссылка)
Молодец)))))) где обещанная таблица? )))))))))))))
Спасибо))))
Ответить С цитатой В цитатник
ЭМИЛЛИ   обратиться по имени Воскресенье, 12 Июля 2009 г. 22:19 (ссылка)
Вот это здорово!
Ответить С цитатой В цитатник
Kleooa   обратиться по имени Воскресенье, 12 Июля 2009 г. 23:17 (ссылка)
Супер урок спасибо, все так доступно и наглядно.
Ответить С цитатой В цитатник
Sillia   обратиться по имени Понедельник, 13 Июля 2009 г. 00:18 (ссылка)
спасибо, всё понятно и самое главное, объяснено.
Ответить С цитатой В цитатник
Sabine_Astana   обратиться по имени Среда, 15 Июля 2009 г. 01:33 (ссылка)
Вот здорово, я всё никак не могла найти где так понятненько обрисовано, как текст ниже картинки расположить, что бы он был по одной полосочке. Спасибоньки!!!!
Ответить С цитатой В цитатник
martisha62   обратиться по имени Среда, 15 Июля 2009 г. 12:06 (ссылка)
Большое спасибо !!!:give_rose
Ответить С цитатой В цитатник
Бархатная_Шляпка   обратиться по имени Вторник, 21 Июля 2009 г. 18:35 (ссылка)
Я по этому уроку училась делать рамку. Спасибо, что с тегами научили обращаться. Хорошо объясняете Спасибо!
Ответить С цитатой В цитатник
Dreamere   обратиться по имени Четверг, 23 Июля 2009 г. 15:57 (ссылка)
Спасибо! Полезная инфа.
Ответить С цитатой В цитатник
Nymphea_alba   обратиться по имени Понедельник, 27 Июля 2009 г. 11:41 (ссылка)
спасибо!!!
Ответить С цитатой В цитатник
Eleonora_Krumen   обратиться по имени Воскресенье, 28 Марта 2010 г. 18:34 (ссылка)
Спасибо.....
Ответить С цитатой В цитатник
Танго_Х   обратиться по имени Суббота, 24 Апреля 2010 г. 22:48 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
ЭМИЛЛИ   обратиться по имени Суббота, 08 Мая 2010 г. 07:34 (ссылка)
Ответить С цитатой В цитатник
LebWohl   обратиться по имени Воскресенье, 09 Мая 2010 г. 03:43 (ссылка)
спасибо
Ответить С цитатой В цитатник
Valysha-66   обратиться по имени Воскресенье, 09 Мая 2010 г. 13:11 (ссылка)
Spasibo!
Ответить С цитатой В цитатник
Наталья_Петрова11   обратиться по имени Воскресенье, 09 Мая 2010 г. 22:39 (ссылка)
Спасибо!!
Ответить С цитатой В цитатник
НИФРИТ_78   обратиться по имени Вторник, 13 Июля 2010 г. 14:00 (ссылка)
СПАСИБО!
Ответить С цитатой В цитатник
ВасилисаСчастливаяЯ   обратиться по имени Среда, 01 Февраля 2012 г. 04:02 (ссылка)
СПАСИБО! БУДУ УЧИТЬСЯ!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку