• Авторизация


Разместим текст в несколько колонок 30-07-2009 00:07 к комментариям - к полной версии - понравилось!


Разместим текст в две колонки. Что бы было веселее читать пост я позаимствовал стишок 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> и еще один общий див с шириной равной суммарной ширине колонок со всеми отступами и бордерами

Должно получиться вот так

вверх^ к полной версии понравилось! в evernote
Комментарии (15):
Inmira 30-07-2009-00:15 удалить
Спасибо))) а как терь это все в центр поста впихнуть?)))
Inmira 30-07-2009-00:37 удалить
Ответ на комментарий Великовозрастное_дитя # Великовозрастное_дитя, спасибо))))
solemia45 30-07-2009-00:46 удалить
Спасибо!!Завтра начну пробывать,если получиться пришлю....,а если нет ...все равно пришлю=)))
LebWohl 30-07-2009-00:58 удалить

Как здорово!

Как здорово!

LebWohl 30-07-2009-01:00 удалить
Что то не то, а в черновике нормально было.
Спасибки за урок!!! Как-нибудь попробую...
Inmira 30-07-2009-03:07 удалить
Ответ на комментарий LebWohl # Kisska67, чичас попробую))) надо подтягивать, чтоб без пробелов было.. итак проба:
[414x239]

пасиб

пасиб

я циферки поменяла и br добавила.. как-то нинаю почему тут так, но воть так((( иначе не выходит.
LebWohl 30-07-2009-03:45 удалить
Inmira, Самое интересное у меня в черновике тоже хорошо было [показать]
Ивелена 30-07-2009-10:04 удалить
Молодчина! Спасибо!!! Изучаю, стараюсь повторить...)))
Kapitoshka_N 30-07-2009-13:26 удалить
Спасибо:)Попробую:)
Sabine_Astana 31-07-2009-22:15 удалить
Простите, наверно я не допоняла, но у меня не получается совершенно с этими наборами кодов, может поможите мне? Вот этот пост разделить на две колонки.







[500x375]
[показать]
Жёлтые листья Были напрасными наши старания. Под листопад, молчаливою осенью Снова туманы сменились обманами. Я не скажу как, а Вы и не спросите. Жёлтые листья с прожилками броскими, Недоумения, непонимания. Вы, как тогда, в платье шёлковом с блёстками. И, как всегда, не готовы к признанию. Ветер-проказник испортил причёску Вам. Право, напрасно пугаетесь проседи. Можно сплести ваши волосы косами. Я бы сказал как, но Вы ведь не спросите... Василий Алоев


[показать]
Сабина_Солдатова, слишком большой рисунок и слишком большой размер шрифта текста. Максимальная ширина поста порядка 600 пикселей, а у Вашего рисунка ширина - 500 пикселей.
REMEUR 16-02-2010-00:28 удалить
пойду разбираться!


Комментарии (15): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Разместим текст в несколько колонок | Великовозрастное_дитя - Дневник Великовозрастное_дитя | Лента друзей Великовозрастное_дитя / Полная версия Добавить в друзья Страницы: раньше»