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 выпускает тренажер для хакеров Jarlsber

Google объявила о выпуске специализированного микроблоггерского приложения Jarlsberg в рамках Google Labs и Google Code University. Его главное назн...

News image

Solaris больше не бесплатен

Oracle постепенно начинает прикрывать «бесплатные лавочки», доставшиеся ей в нагрузку с Sun Microsystems. Первой попала под раздачу операционная сис...

News image

Наиболее полное руководство по Internet Explorer 9 для разработчиков (

4 августа строго по графику (период 6-8 недель) вышла четвертая тестовая сборка Internet Explorer 9. На Хабре уже успели написать про этот релиз и р...

News image

Android NDK r3 – приложения для платформы Android получат скоростную г

Компания Google осуществила третий по счету выпуск своего инструментария для разработчиков Android NDK (Native Developer Kit) для создания приложени...

News image

Microsoft LightSwitch – фирменный инструмент для ускоренной разработки

Компания Microsoft анонсировала выпуск пакета Visual Studio LightSwitch (ранее носившего кодовое наименование «Кити Хоук»), новейшего пополнения в с...

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

News image

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

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

News image

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

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