<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Context Menu Alpha</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.cloud_tags {
font-family: Arial;
font-weight: bold;
font-size: 16px;
}
.line_cloud span {
padding: 0 15px 0 15px;
}
</style>
</head>
<body>
<div class="cloud_tags">
<div class="line_cloud">
<span style="margin-left:150px;vertical-align:-10px;">feeds</span><span style="line-height: 40px;font-size:26px;vertical-align:bottom;">GTD</span><span style="font-size:18px;">Podcast</span>
</div>
<div class="line_cloud">
<span style="margin-left:100px;vertical-align:top;font-size:26px;">WEB Standarts</span><span style="line-height: 40px;font-size:14px;">Rich User Expirience</span>
</div>
<div class="line_cloud">
<span style="margin-left:120px;vertical-align:bottom;font-size:26px;">Folksonomies</span><span style="line-height: 50px;font-size:22px;">Blogging</span>
</div>
<div class="line_cloud">
<span style="margin-left:80px;font-size:18px;">Tagging</span><span style="line-height: 50px;font-size:30px;vertical-align:bottom;">WEB 2.0</span><span style="font-size:18px;">Life-hacking</span>
</div>
</div>
</body>
</html>
"Облако" тэгов.
Друья, никто не сталкивался с адачей реалиовать нечто подобное:
http://itsfor.narod.ru/safety/5/200704152009.jpg ?
Очень интересен принцип. Понимаю, что можно сделать всё жёстко, но хотелось бы мобильности. Или кто-то может сталкивался с сайтами, где реализовано такое.
ЗЫ: Такое - это не просто облако, а именно хаотичное, без чётких строк.
http://itsfor.narod.ru/safety/5/200704152009.jpg ?
Очень интересен принцип. Понимаю, что можно сделать всё жёстко, но хотелось бы мобильности. Или кто-то может сталкивался с сайтами, где реализовано такое.
ЗЫ: Такое - это не просто облако, а именно хаотичное, без чётких строк.
Мне кажется, что на этой картинке все реализовано как раз с помощью строк (таблицы), отдельные фразы выравнены по горизонтали по нижнему/верхнему краям и по центру.
Да и облако не совсем хаотичное - в центре всего этого безобразия "Web 2.0", сверху и снизу "GTD" и "Wiki", по диагоналям "WebStandarts"-"Ajax" и "Blogging"-"Mash-up". При желании можно также выделить три блока (добавлено: имеются в виду логические блоки), см. вторую кратинку.
Да и облако не совсем хаотичное - в центре всего этого безобразия "Web 2.0", сверху и снизу "GTD" и "Wiki", по диагоналям "WebStandarts"-"Ajax" и "Blogging"-"Mash-up". При желании можно также выделить три блока (добавлено: имеются в виду логические блоки), см. вторую кратинку.
По поводу строк, согласен - очень похоже на правду.
Диаганали - ну, естественно, что полного хаоса не будет (гыгы, сверстать бы красивый хаос!), все-таки это упорядоченный рисунок. Я имею в виду, как бы его так похитрее сделать, чтобы при изменении размеров разных тэгов, они не рушили всю структуру? А еще лучше - меняли бы свое местоположение в зависимости от размера и при этом не рушили структуру. Впрочем, дальше я сам. Идея с таблицей мне понравилась - подумаю в эту сторону.
Спасибо!
Диаганали - ну, естественно, что полного хаоса не будет (гыгы, сверстать бы красивый хаос!), все-таки это упорядоченный рисунок. Я имею в виду, как бы его так похитрее сделать, чтобы при изменении размеров разных тэгов, они не рушили всю структуру? А еще лучше - меняли бы свое местоположение в зависимости от размера и при этом не рушили структуру. Впрочем, дальше я сам. Идея с таблицей мне понравилась - подумаю в эту сторону.
Спасибо!
Навскидку видится два типа измениния размеров: шрифта в IE и размеров блока.
Для первого случая все размеры (блоков и шрифтов) задаем в em, со вторым сложнее, тут без JS не обойтись.
Для первого случая все размеры (блоков и шрифтов) задаем в em, со вторым сложнее, тут без JS не обойтись.
А помоему таблицы здесь по определению не подходят. Ты же хочешь хаос изобразить а таблица это структура и причем жестко заданная.
По моему здесь нужно каждое слово заключать в отдельный див. Если делать это на серверной части, то можно определять величину площадки которую займет этот див в зависимости от текста, размеров и типа шрифта. Формируя так каждый див можно будет последовательно размещать их в рамках допустимой области следя чтобы они не пересекались с предидущими дивами.
Ну вот где-то так я бы это делал.
По моему здесь нужно каждое слово заключать в отдельный див. Если делать это на серверной части, то можно определять величину площадки которую займет этот див в зависимости от текста, размеров и типа шрифта. Формируя так каждый див можно будет последовательно размещать их в рамках допустимой области следя чтобы они не пересекались с предидущими дивами.
Ну вот где-то так я бы это делал.
Цитата: Carpus
Навскидку видится два типа измениния размеров: шрифта в IE и размеров блока.
Для первого случая все размеры (блоков и шрифтов) задаем в em, со вторым сложнее, тут без JS не обойтись.
Для первого случая все размеры (блоков и шрифтов) задаем в em, со вторым сложнее, тут без JS не обойтись.
Не-не, с изменением всё просто: к самым большим разделам (с бОльшим количеством статей) программно будет приковыриваться css-класс с бОльшим размером шрифта. Тут-то всё просто.
[QUOTE=shine]А помоему таблицы здесь по определению не подходят. Ты же хочешь хаос изобразить а таблица это структура и причем жестко заданная.
По моему здесь нужно каждое слово заключать в отдельный див. Если делать это на серверной части, то можно определять величину площадки которую займет этот див в зависимости от текста, размеров и типа шрифта. Формируя так каждый див можно будет последовательно размещать их в рамках допустимой области следя чтобы они не пересекались с предидущими дивами.
Ну вот где-то так я бы это делал.[/QUOTE]
Я боюсь, что совсем уж хаотичное разположение элементов не позволит организовать это самое облако, получится только бесформенная куча тэгов. Как я и говорил (а Carpus даже обрисовал) не такой уж там и хаос.
Можно организовать и без таблиц, div'ами. Но совсем бесструктурно - очень опасно, можно получить искривленную в одном из браузеров страницу, а следить за облаком или, еще хуже, тестить его со всеми категориями - это просто капец, простите. Не пожелаю никому )
Я как-то не сильно уверен, что облака вообще должны иметь структуру. Да есть традиция их изображать построчно, но ведь это не более чем традиция. А вот насчет тестинга в разных браузерах и при разных размерах окна ты прав: гемороя будет много. :)
А вообще поищи такие разработки в инете. Мне как-то не верится что никто раньше такой штуки не делал.
А вообще поищи такие разработки в инете. Мне как-то не верится что никто раньше такой штуки не делал.
Ога, именно это я и спросил в первом посте - никто не видел?
На самом деле, мысль, озвученная Carpus'ом будет обдумана и, вероятно, реализована.
На самом деле, мысль, озвученная Carpus'ом будет обдумана и, вероятно, реализована.
Лично мне так видиться, что это div-ы растянутые по ширине контейнера с вложенными span-им для которых дадано разное положение внутри div-а. Соотвественно такая структура ни когда не будет разрушена при любых настройках для шрифтов.
+1.
Пришел к такому же выводу. И просто, и то, что нужно.
Пришел к такому же выводу. И просто, и то, что нужно.
Ужасть))) Вообще, на даном этапе мне тоже предстоит реализация этого чуда). Мой выбор пал далеко не на спаны, а на заголовки)) По семантике это верно (ИМХО), т.к. это и есть описательные заголовки, поисковики будут рады, да и формирование не займёт много времени + отсутствие CSS в тэгах.... красота (даже классы необязательно писать, т.к. 7 уровне (6 заголовков + простой текст) за глаза)).
shaelf, Вы самого главного не сказали - как будут позиционироваться эти самые заголовки.
К тому же очень сомнительно, что ПС "будут рады" множеству заголовков без основного текста, при том, что текст заголовка содержит ключевые слова и является ссылкой.
К тому же очень сомнительно, что ПС "будут рады" множеству заголовков без основного текста, при том, что текст заголовка содержит ключевые слова и является ссылкой.
>>Вы самого главного не сказали - как будут позиционироваться эти самые заголовки. display:inline;))
>>К тому же очень сомнительно, что ПС "будут рады" множеству заголовков без основного текста, при том, что текст заголовка содержит
А вот это мы и проверим, но это же не спам, поэтому основы для бана у них не будет.))
>>К тому же очень сомнительно, что ПС "будут рады" множеству заголовков без основного текста, при том, что текст заголовка содержит
А вот это мы и проверим, но это же не спам, поэтому основы для бана у них не будет.))
shaelf, в принципе это спам. Тэги h* ведь задуманы для отображения заголовков, а в твоем варианте они будут обозначать простую ссылку никак не связанную с основным содержимым страницы. Хотя если тебе и твоему заказчику нужны острые ощущения... :D
В прошлой редакции лицензии на использование поисковой системы Яндекса в пункте 3.5 "Посковый спам" была такая фраза "использование на странице элементов, вводящих в заблуждение поисковую систему". Бан не бан, а пессимизацию заработать можно, ИМХО.
Время (яндекс ))))) рассудит. Я не оптимизатор, но и спамом я это не считаю, т.к. я не "спамлю" текстом, я просто выделяю более релевантные вещи.
PS Мне кажется, что всё же теги к тексту имеют отношение... Поживём, увидим)
PS Мне кажется, что всё же теги к тексту имеют отношение... Поживём, увидим)
Цитата: Комаджу
Друья, никто не сталкивался с адачей реалиовать нечто подобное:
http://itsfor.narod.ru/safety/5/200704152009.jpg ?
Очень интересен принцип. Понимаю, что можно сделать всё жёстко, но хотелось бы мобильности. Или кто-то может сталкивался с сайтами, где реализовано такое.
ЗЫ: Такое - это не просто облако, а именно хаотичное, без чётких строк.
http://itsfor.narod.ru/safety/5/200704152009.jpg ?
Очень интересен принцип. Понимаю, что можно сделать всё жёстко, но хотелось бы мобильности. Или кто-то может сталкивался с сайтами, где реализовано такое.
ЗЫ: Такое - это не просто облако, а именно хаотичное, без чётких строк.
В данном случае это список - ul
Если бы мы вставили эту картинку в html, то было бы логично определить описание картинки параметром longdesc. А именно longdesc="feeds, GTD, Podcast, Web Standarts,...."
Именно поэтому это не div, hX, p, span...
Для того что бы реализовать как на картинке, можно и достаточно воспользоваться css параметрами: margin, font-size; float:left, display:block, list-style:none, padding:0.
Если же нужно зафиксировать то соответственно указываем нужную ширину параметром width для ul или выше стоящего.
Всего величин font-size должно быть не больше 4. т.е. основной текст, большой текст, огромый текст, очень большой.
Никаких line-height, width, position использовать нельзя, потому что можно легко запутатся и к тому же это не нужно.
Таким образом, параметр margin и font-size будут как бы разделителем текста заменяющий запятые в перечислении.
Цитата: assume
Для того что бы реализовать как на картинке, можно и достаточно воспользоваться css параметрами: margin, font-size; float:left, display:block, list-style:none, padding:0.
Если же нужно зафиксировать то соответственно указываем нужную ширину параметром width для ul или выше стоящего.
Всего величин font-size должно быть не больше 4. т.е. основной текст, большой текст, огромый текст, очень большой.
Никаких line-height, width, position использовать нельзя, потому что можно легко запутатся и к тому же это не нужно.
Таким образом, параметр margin и font-size будут как бы разделителем текста заменяющий запятые в перечислении.
Кроссбраузерный код в студию, плиииизззз.
Согласен, посмотреть хочется.
Я думал про списки и даже сначала стал делать ими. Но встретился с определнными трудностями, перечислять которые делго. Код был бы действительно кстати.
Я думал про списки и даже сначала стал делать ими. Но встретился с определнными трудностями, перечислять которые делго. Код был бы действительно кстати.
Цитата: assume
В данном случае это список - ul
В общем кода мы так и не дождались... видимо как мне и думалось данное утверждение голословно.
примите как аксиому, если что то должно было произойти.
Какая к чертовой матери аксиома? Утверждение не доказанное примером кода ламерство и пустозвонство.
Доказательство кодом, для утверждения примера не требует исполнения в доказательство не ламерства и не пустозвонства.
И между прочим, чертава мама тут ни при чем. Ее не нужно сюда вмешивать.
И между прочим, чертава мама тут ни при чем. Ее не нужно сюда вмешивать.
Тише, тише)) Всё личное в личку... Устроили, понимашь тут...
Цитата: alekciy
Кроссбраузерный код в студию, плиииизззз.
Ну вот уже другое дело.