OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

Вы, конечно, знаете о свободной карте OpenStreetMap. Это настоящая народная карта, создаваемая такими же людьми как и вы! Это такой же opensource-проект как Linux и как Википедия. Конечно же, как и в других картах, в OpenStreetMap имеются ошибки, но в отличие от тех же Яндекс.Карт, где ошибки не исправляются годами из-за сложной бюрократической процедуры (я уже не говорю о намеренных ошибках), в OpenStreetMap всё гораздо проще и лучше для всех нас...
Подробнее..

CloudMade Navigation поддерживает ограничения манёвров

CloudMade Navigation поддерживает ограничения манёвров

Не так давно CloudMade выделил несколько приоритетных направлений, среди которых оказалась и навигация. Решено было создать специальный проект Navi Studio, который объединял бы в себе несколько более мелких сервисов и позволял пользоваться ими, для создания полноценного навигационного программного обеспечения. В Navi Studio вошли: Работа закипела и уже появилось несколько приложений использующих данный проект. Но полноценной навигации без соблюдения правил ПДД не существует, а потому данному вопросу было также уделено не мало времени...
Подробнее..

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Недавно наткнулся в сети на один занимательный интернет-сервис, именующийся Web 2.0 Suicide machine . Предназначен он для того, чтобы позволить людям, обремененным «социальной жизнью в интернете», в пару кликов удалить свои аккаунты на Facebook (в данный момент сервис блокирован администрацией по IP), Twitter, Linkedin и Myspace. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..




Многоуровневое дерево с маркерами (только HTML, CSS, без Javascript)

Веб разработка - CSS

многоуровневое дерево с маркерами (только html, css, без javascript)

До того как заняться верской гитарных аккордов (статьи 1,2,3) я столкнулся с необходимостью сделать человеку на сайте меню-дерево. Рисовать не хотелось вообще, поэтому я взял старый добрый HTML с CSS и начал делать это дерево, начал с простого одноуровневого, а позже сделал многоуровневое с маркерами, которое и представлю.

Позже это дерево дало мне плоды в виде <a href=«r3code.habrahabr.ru/blog/537

Многоуровневое дерево


В реализации используется исключительно HTML и CSS, никаких картинок.
Для отрисовки маркера раскрытия списка использовал CSS прием с границами нулевого размера блока.

HTML

<div id= multi-derevo >
<h4><a href= # >Ствол дерева</a></h4>
<ul>
<li><span><a href= #1 ><em class= marker open ></em>1. Ветка</a></span>
<ul>
<li><span><a href= #11 class= current title= Выбранный раздел ><em class= marker open ></em>1.1. Ветка</a></span>
<ul>
<li><span><a href= #111 >1.1.1. Листик</a></span></li>
<li><span><a href= #112 >1.1.2. Листик</a></span></li>
</ul>
</li>
<li><span><a href= #12 >1.2. Ветка</a></span></li>
</ul>
</li>
<li><span><a href= #2 ><em class= marker ></em>2. Ветка</a></span></li>
<li><span><a href= #3 ><em class= marker ></em>3. Ветка</a></span></li>
<li><span><a href= #4 ><em class= marker ></em>4. Ветка</a></span></li>
<li class= last ><span><a href= #5 title= Послледняя ветка ><em class= marker open ></em>5. Ветка, верхушка</a></span>
<ul>
<li><span><a href= #1 >5.1. Ветка</a></span></li>
<li><span><a href= #1 >5.2. Ветка</a></span></li>
</ul>
</li>
</ul>
</div><!-- /multi-derevo -->

* This source code was highlighted with Source Code Highlighter.

CSS

/* общий стиль */
body {font-family: Arial, Tahoma, sans-serif; margin: 2em; font-size: 62.5%;}
p {
font-size: 1.2em;
}
a {
color: #0066cc;
text-decoration: none;
outline: none;
}
/*a:link {
color: #0066cc;
}
a:visited {color: #00cc63; }*/
a:hover {
text-decoration: underline;
}
a:active, a:focus {
color: #666;
background-color: #f4f4f4;
}
a.current {
color: black;
font-weight: bold;
}

/* Дерево многоуровневое
-------------------------------- */
#multi-derevo {
width: 220px; /* блок под дерево */
border: solid; /* границы блока */
border-color: silver gray gray silver;
border-width: 2px;
padding: 0 0 1em 0; /* нижний отступ */
font-size: 1.3em;
}
span { /* обертка пункта */
text-decoration: none;
display: block; /* растянем до правого края блока */
margin: 0 0 0 1.2em;
background-color: transparent;
border: solid silver; /* цвет линий */
border-width: 0 0 1px 1px; /* границы: низ и лево */
}
span a {/* тест элемента дерева */
display: block;
position: relative;
top: .95em; /* смещаем узел на середину линии */
background-color: #fff; /* закраска в цвет фона обязательна иначе будет видно линию */
margin: 0 0 .2em .7em; /* делаем промежуток между узлами, отодвигаем левее */
padding: 0 0.3em; /* небольшой отступ от линии */
}
h4 {/* заголовок дерева */
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 0 .25em;
border-bottom: 1px solid silver;
}
h4 a {
display: block;
}
ul, li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
ul li {
line-height: 1.2em;
}
ul li ul {}
ul li ul li {
margin: 0 0 0 1.2em;
border-left: 1px solid silver; /* цвет вертикальной линии между узлами */
}
ul li.last ul li {/* последний узел, соединительную линию к след. узлу убираем */
border: none;
}
.marker { /* маркер раскрытия списка в закрытом состоянии */
border-color: transparent transparent transparent gray;
border-style: solid;
border-width: .25em 0 .25em .5em;
margin: .35em .25em 0 0;
float: left;
width: 0px;
height: 0px;
line-height: 0px;
}
.marker.open {/* маркер раскрытия списка в открытом состоянии */
border-color: gray transparent transparent transparent;
border-width: .5em .25em 0 .25em;
}
/* IE 6 Fixup */
* html #multi-derevo * { height: 1%;}
* html .marker { border-style: dotted dotted dotted solid; }
* html .open { border-style: solid dotted dotted dotted; }

* This source code was highlighted with Source Code Highlighter.

 


Читайте:


Добавить комментарий


Защитный код
Обновить

News image

Oracle выпустила новый набор плагинов для среды разработки Eclipse

Компания Oracle выпустила обновленную версию набора бесплатных плагинов Oracle Enterprise Pack for Eclipse 11g. Этот инструментарий позволит приверж...

News image

Microsoft для российских разработчиков: практика с элементами фундамен

26 марта 2010 года в Центре международной торговли на Краснопресненской набережной Москвы компания Microsoft впервые в России провела конференцию дл...

News image

Apple обновляет программы для Mac-разработчиков

Apple опустила ценовой порог до 99 долларов для желающих вступить в сообщество Mac-разработчиков. Согласно данным компании, новая цена членства сниж...

News image

Как бы шифрование

Одной из функций новых телефонных аппаратов iPhone 3GS является аппаратное шифрование данных, что вроде бы должно создавать у потребителей впечатлен...

News image

Apple заставила разработчиков писать приложения для iPad вслепую

Многие разработчики приложений для Apple iPad остались недовольны возможностями эмулятора устройства, пишет The New York Times. Они ждут поступления...

Топ технологий:

News image

Оздана новая система беспроводной связи - она в 10

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

News image

Как взломали Twitter

В Интернетах, наряду с iPad, сканерами в аэропортах и войне между Google и Apple, уже второй день подряд активно обсуждается тема взлома и...