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. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..




Навигатор

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

навигатор

Задача: создать навигатор страниц. Вот такой:



1. Подбираем цвета

Так как навигатор делается для использования в конкретном сайте, цвет нам уже известен: #0aaafd. Этот цвет используется для обозначения ссылок. И он нам нужен для создания скругленных квадратов-подложек (один — для выделения текущей страницы, второй — для выделения при эффекте :hover). Для подложки текущей страницы я использую 80% насыщенности цвета, то есть #3bbbfd. Для подложки, появляющейся при эффекте :hover я использую 20% насыщенности цвета, то есть #ceeeff.


2. Элементы навигатора

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

3. Переходим к верстке
HTML

Сначала нам надо создать html-разметку, с которой мы будем работать. Что из себя представляет навигатор? Список с определенным порядком нумерации. Под это определение подходит нумерованный список (ol). Создаем разметку:

<ol class= page-scroll >
<li><a href= # title= Полный назад ><img src= img/ps-begin.gif alt= /></a></li>
<li><a href= # title= Назад ><img src= img/ps-back.gif alt= /></a></li>
<li><a href= # title= >7</a></li>
<li><a href= # title= >8</a></li>
<li><strong>9</strong></li>
<li><a href= # title= >10</a></li>
<li><a href= # title= >11</a></li>
<li><a href= # title= Вперед ><img src= img/ps-forward.gif alt= /></a></li>
<li><a href= # title= Полный вперед ><img src= img/ps-end.gif alt= /></a></li>
</ol>

Присваиваем класс к списку, чтобы можно было манипулировать именно этим контейнером и элементами, находящимся внутри него. Первые и последние 2 элемента навигатора (первая страница, предыдущая страница, следующая страница, последняя страница) я решил сделать в виде картинок, так как они «заменяют» собой контент. Текущую страницу выделяем стронгом (нам как раз нужен жирный шрифт).

Теперь переходим к самому интересному —

CSS

Рассмотрим наш навигатор поближе:

Расстояние между верхней и нижней горизонтальными полосами 18 пикселов.
Ширина полупрозрачного серого прямоугольника 20 пикселов.
Остальное видно благодаря масштабу 500%, любезно предоставленному Фотошопом.

Правила для тега ol:

clear:both;
display:block;
width:181px;
margin:0 auto;

Первое правило запрещает обтекание.
Второе правило «говорит» о том, что данный контейнер является блочным элементом — так как внутри будут блочные элементы (нельзя блочные элементы внутрь строчных класть).
Третье правило нужно нам для выравнивания навигатора по центру. Дело в том, что без указания ширины мы не смжем выровнять этт контейнер по центру. Значение ширины ol для нашего навигатора высчитывается по формуле:

[количество элементов списка ol] * ( [ширина контейнера li] + [отступ слева контейнера li] + [отступ справа контейнера li] )

То есть 9 * ( 18 + 1 + 1 ), получаем 180. Однако 180 пикселов IE не хватает, и навигатор плывет:

Увеличиваем ширину на 1 пиксель, и все приходит в норму.

Можно не заморачиваться, и подобрать ширину приблизительно, однако всегда приятнее, когда существует порядок :)
Padding не учитываем, позже объясню почему.

Правила для тега li:

list-style:none;
display:block;
float:left;
margin:0 1px;

Первое правило запрещает показ порядкового номера элемента списка.
Второе правило нужно, т.к. внутри будет блочный элемент — ссылка.
Третье правило для того, чтобы элементы списка располагались не вертикально, а горизонтально.
Четвертое правило задает отступы слева и справа в 1 пиксель. Это нам нужно, так как размер подложки равен 18px, и необходимо небольшое расстояние, чтоб подложки текущей страницы и при наведении не «слипались».

Правила для тега a:

display:block;
width:18px;
background:none;
text-align:center;
font:normal 14px/18px Arial, Helvetica, sans-serif;

Первое правило нужно для того, чтобы работало второе. То есть в inline-элементах width не работает.
Второе правило нужно, так как у нас фиксированная ширина подложки. Если хочется нефиксированную, используем технику «sliding doors».
Третье правило запрещает использование подложки (бэкграунда) при обычном состоянии ссылки.

Четвертое правило выравнивает содержимое контейнера по центру по горизонтали.
Пятое правило — нормальный (не жирный) шрифт размером 14 пикселов, выравнивание текста по вертикали, и указание на используемое семейство шрифтов.

 


Читайте:


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


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

News image

Серия анонсов Google для Java-разработчиков - GWT 1.6, App Engine for

Целой серией интереснейших анонсов для Java-разработчиков порадовала накануне неутомимая Google. А именно: » cвежий релиз фрэймворка для разработ...

News image

Лабиринт технологий виртуализации Microsoft

Виртуализация всегда была непростой технологией, но компании Microsoft удалось еще больше усложнить ее, выпуская различные продукты виртуализации с ...

News image

LiveCycle: хорошее подспорье для разработчиков

Adobe LiveCycle Enterprise Suite, последняя версия которого вышла в ноябре, представляет собой набор веб-сервисов, которые позволяют организациям ст...

News image

Что такое Google Analytics?

При помощи Google Analytics можно собирать, просматривать и анализировать данные о посещаемости своего веб-сайта. Встроив на страницы наш основной ф...

News image

Google открывает исходный код системы Living Stories

В течение последних двух месяцев журналисты из New York Times и Washington Post экспериментировали с Living Story, новым форматом представления ново...

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

News image

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

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

News image

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

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