Разместим текст в несколько колонок |
Разместим текст в две колонки. Что бы было веселее читать пост я позаимствовал стишок http://kievforum.org/showthread.php?t=1183. ( не рекламы ради, а гуглю спасибо :))) )
Познакомились мы в чате Ты представилася Катей Оказалось - ты Иван... ах, какой ты хулиган
Все сайты умерли, осталось только ICQ, И лишь ReGet качает тихо мне игру, И звук "ха-ха" писклявым тихим тоном, С забытья голову мою срывает стоном... Неоднозначно, непонятно, не всегда, Не видя, как опять бегут года, Просаживая сутки напролет, Мы ждем, когда же время то придет. Что из страны не грез, не сновидений, Нас вырвет, прекратя весь круг сомнений, И встретиться возможно станет наяву, Мерцает монитор, я всё же сплю... Нас двое лишь на эту Сеть, И мы не верим в нашу смерть...
Это можно было бы сделать таблицей, но есть вариант проще - использовать div.
Попробуем разместить каждый стих в своем диве
В примере кода я не указал что бы было проще читать код, а при выводе добавлю рамку к каждому диву
Вот что получится
Познакомились мы в чате Ты представилася Катей Оказалось - ты Иван... ах, какой ты хулиган
Все сайты умерли, осталось только ICQ, И лишь ReGet качает тихо мне игру, И звук "ха-ха" писклявым тихим тоном, С забытья голову мою срывает стоном... Неоднозначно, непонятно, не всегда, Не видя, как опять бегут года, Просаживая сутки напролет, Мы ждем, когда же время то придет. Что из страны не грез, не сновидений, Нас вырвет, прекратя весь круг сомнений, И встретиться возможно станет наяву, Мерцает монитор, я всё же сплю... Нас двое лишь на эту Сеть, И мы не верим в нашу смерть...
Во первых ширина дивов равна максимальной ширине, а во вторых они размещены не рядом, а друг под другом
Зададим ширину дивов добавив стиль width, для того что бы дивы размещались рядом, а не друг под другом нужно к каждому диву добавить стиль float: left это выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
Вот теперь мы получили 2 колонки
Познакомились мы в чате Ты представилася Катей Оказалось - ты Иван... ах, какой ты хулиган
Все сайты умерли, осталось только ICQ, И лишь ReGet качает тихо мне игру, И звук "ха-ха" писклявым тихим тоном, С забытья голову мою срывает стоном... Неоднозначно, непонятно, не всегда, Не видя, как опять бегут года, Просаживая сутки напролет, Мы ждем, когда же время то придет. Что из страны не грез, не сновидений, Нас вырвет, прекратя весь круг сомнений, И встретиться возможно станет наяву, Мерцает монитор, я всё же сплю... Нас двое лишь на эту Сеть, И мы не верим в нашу смерть...
Что дальше делать с колонками зависит только от Вашей фантазии :). Можно добавить фоновый рисунок прописав в стиле background: url('ссылка на фоновый рисунок'), выравнивание в каждой колонке можно делать любым прописав в стиле каждого дива text-align: left, center, right
Пример кода колонок, размещенных в начале поста
Если суммарная ширина колонок будет больше чем максимальная ширина поста, то дивы разместяться не рядом, а друг под другом
Что бы разместить колонки по центру нужно добавить <center> и еще один общий див с шириной равной суммарной ширине колонок со всеми отступами и бордерами
Должно получиться вот так
Метки: урок |
Плагин ReDynaMix HDR для Photoshop |
Ответ на предыдущий вопрос
ReDynaMix для Photoshop предназначен для получения эффекта HDR-изображения. Иными словами, плагин делает так, что обычная фотография приобретает совершенно иной вид и становится похожа на HDRI.
Среди настроек плагина можно отметить возможность преобразования в черно-белое изображение, применение фильтра Ортона и эффекта сепии. Кроме этого, можно управлять изображением при помощи настроек изменения насыщенности цветов, оттенков, кривых.
Год выпуска: 2008
Платформа: Windows
Совместимость с Vista: Да
Таблэтка: Присутствует
Скачать (2.14 Mb): ReDynaMix HDR plugin для Photoshop (бесплатно, без ожиданий и кликов)
Метки: плагин |
Ретушь кожи без проблем. |
Нашла програмку в которой даже не зная фотошопа можно отретушировать фотографию . Скачивание как всегда бесплатное )))))
Метки: плагин |
Без заголовка |
Метки: урок |
Без заголовка |
|
Примочки для блога - выпуск 2 |
Метки: примочки для блога |
Без заголовка |
Метки: примочки для блога |
Трюки и эффекты в Photoshop CS3 |
Метки: урок |
Без заголовка |
Метки: рамочки |
Без заголовка |
Метки: рамочка |
Без заголовка |
Метки: урок |
Делаем таблицы для фонов. |
Метки: урок |
Селедочка и блюда из неё. |
Сегодня все прогрессивное человечество тщательно следит за своим весом и внешним видом. Успех сопутствует тем, кто хорошо разбирается в потребностях организма и полезных свойствах продуктов, умело сочетает самые простые, доступные и, главное, полезные из них.
Прогресс на лицо, а также …на тело, волосы и ногти...
Метки: рецепт |
101 спецэффект в Photoshop CS3. Полное руководство |
Метки: книга |
Без заголовка |
Приходит пора заготовок на зиму.. Я дам Вам 2 рецепта маринада "на все случаи жизни".
1 рецепт
Маринад:
Я варю сразу 9 литров:
630 гр. сахара + 270 гр. соли + 630 гр. уксуса.
Метки: рецепты |
Без заголовка |
Метки: для поста |
Без заголовка |
Сделаем список песен в дневнике. Если есть прямая ссылка на музыкадьный файл можно в дневник добавить код
Вместо MP3_URL нужно прописать ссылку на mp3 файл!!!!!!
Например ссылка на музыкалный файл:
код должен выглядеть следущим образом
Вот какой вид плеера мы получим
Можно сделать что бы плеер открывался в новом окне при нажатии на кнопку "слушать":
Название песни: real_snow_whiteНо для этого нужно разрешить в Вашем браузере всплывающие окна с сайта vln.dp.ua.
Код для такого варианта:
Не забываем вместо MP3_URL прописывать ссылку на mp3 файл, а вместо NAME - название песни!!!!!!
Ну и для тех кто не хочет возится с кодом, зайдите на http://vln.dp.ua/mp3.php, заполните два поля с названием песни и ссылкой на файл и вы получите готовые коды для вставки в дневник
Метки: музыка |
Делаем открытку со стихами |
Сделаем открытку со стихами. Ввиду того что я ленивый и мне лень искать для примера фоны и текст стихов, я позаимствовал все это у inmira с её поста http://www.liveinternet.ru/users/inmira/post99542587/.
- Фон для рамки - Фон для текста и картинки - Картинка.Коды картинок ( видны при редактировании черновика или поста )
Размеры картинок уменьшены что бы они не занимали много места в посте
Сделаем рамку для открытки. Для этого построим таблицу 1х1 - одна строка, один столбец. Для таблицы пропишем background.
В background укажем ссылку на фоновую картинку для рамки
Что бы получилась рамка нужно "лишнее" пространство залить фоном для текста и рисунка.
Что бы это сделать нужно указать background для ячейки тяблицы
Получилось не совсем то что мы хотели. Это потому что мы "забыли" указать отступ от границы таблицы до ячейки таблицы.
Исправим это дописав в тег <table> параметр cellspacing
И все равно ничего не получилось. Все это потому что в дневнике, для таблицы в глобальных стилях указано border-collapse: collape и из-за этого cellspacing игнорируется
Что бы это исправить нужно к <table> добавить стиль style="border-collapse: separate;"
Ура! У нас есть рамка :). Все что нам осталось это вставить в ячейку таблицы рисунок и текст стихов
Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля! |
Не все так просто :). Во первых текст расположен не справа от рисуна, а под ним. Во вторых текст нечитаемый из-за того что цвет текста черный и размер шрифта маленький.
Что бы текст располагался справа от рисунка добавим в код рисунка align="left" в этом случае рисунок будет располагаться слевой стороны ячейки, а текст будет "обтекать" его справа.
Что бы изменить цвет текста и размер шрифта добавим к <td> стиль style="color: #fffcfc; font-size: 18px;". Цвет текста #fffcfc, размер шрифта 18px.
Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля! |
Уже лучше :) Но есть недоработка. Текст заползает под рисунок. Что бы этого не было поместим рисунок текст стихов в тег <div>. со стилем style="float: left" для рисунка и style="float: right" для текста.
Я приведу пример сокрашенного кода что бы было понятнее
Весь год, не соврав никому ни на грошь,
Мы ждем, как небесную манну,
Тот день, когда можно удариться в ложь,
Невинно придаться обману!
Набрав арсенал завиральный идей,
С кощунственным трепетом в теле
Мы ловим доверчивых честных людей,
Забывших о первоапреле.
И мы их находим, смиренных ягнят,
Простецки развесивших уши.
И стрелы обмана со свистом летят
В их светлые, чистые души.
Но первоапрельский веселый обман -
Сердечная наша потеха.
И стрелы не кровь высекают из ран,
А добрые искорки смеха.
О, как же он весел и как же хорош,
Пришедший на смену метелям,
Тот праздник, во смех превращающий ложь!
Сограждане, с первым апреля!
|
Получили практически то что хотели. Осталось привести текст стихов в "божеский" вид. Можно установить галочку "Сохранять переводы строк в тексте.", но я лучше уберу это галочку и добавлю еще один тег <pre>. Все что находится внутри этого тега будет выводится со всеми пробелами и переносами строк.
Вот мы и получили то что хотели.
Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля! |
Метки: открытки |
Отступы |
Текст
Что бы сделать отступ от рисунка до текста, обтекающего его, добавте к коду рисунка 2 параметра vspace="10" - отступ по вертикале, и hspace ="10" - отступ по горизонтале. 10 - это значение отступа в пикселях.
Например. Нужно текст поместить в рамку. Если мы не делаем отступов то результат будет такой
Метки: отступы |
Таблицы. Часть 2-я |
Создадим таблицу 4 строки 2 колонки
В первой строке текст размещен слева, в последней строке - справа, а в централной строке - посредине
Первая строка. Текст1 | Первая строка. Текст2 |
Последняя строка. Текст1 | Последняя строка. Текст2 |
Текст1 | Текст2 |
Добавим заголовок к нашей таблице. Для этого используем тег . Для этого тега есть два параметра align - задает выравнивание заголовка и valign - определяет вверху таблицы или внизу будет выводится заголовок.
допустим только внутри тега сразу после открывающего тега.
Вид заголовка в зависимости от align будет отличаться в разных браузерах.
Первая строка. Текст1 | Первая строка. Текст2 |
Последняя строка. Текст1 | Последняя строка. Текст2 |
Текст1 | Текст2 |
Если задать align="bottom" то заголовок будет внизу таблицы
Первая строка. Текст1 | Первая строка. Текст2 |
Последняя строка. Текст1 | Последняя строка. Текст2 |
Текст1 | Текст2 |
Тег предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
Располагается этот тег только внутри тега
Таблица с заголовками
Заголовок1 | Заголовок2 |
---|---|
Текст1 | Текст2 |
Тег задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег можно использовать совместно с тегом , который задает группу колонок, обладающих общими параметрами.
Текст1 | Текст2 |
Текст3 | Текст4 |
Объеденим несколько ячеек таблицы. Для этого в теге нужно указать colspan - объеденяет горизонтальные ячейки, rowspan - вертикальные
Объеденим 2 ячейки первой строки в одну ячейку
Текст1 | |
Текст2 | Текст3 |
Объеденим 2 ячейки первого столбца в одну ячейку
Текст1 | Текст2 |
Текст3 |
И последнее. Параметры тега cellpadding - отступ от рамки до содержимого ячейки и cellspacing- расстояние между ячейками.
Текст1 | Текст2 |
Текст3 | Текст3 |
Вот собственно и все :))
Метки: таблицы |