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



Скругленные углы в 3 div-a

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

скругленные углы в 3 div-a

Есть много способов делать в верстке скругленные углы. И пока все браузеры поголовно не начнут поддерживать свойство border-radius, надо будет каждый раз думать о том, какой метод использовать в том или ином проекте.

Есть множество разнообразных методов — от использования подложек блоков фиксированных размеров и до создания уголков с помощью vml или svg. В этом топике я не буду рассматривать известные методы, так как информации по данному поводу предостаточно. Я попробовал создать yet another метод.

Сразу оговорюсь — мой метод не панацея, и ему свойственны несколько минусов, которые я опишу подробнее.

Я постараюсь быть кратким.

Теория


Допустим, нам надо создать блок со скругленными углами.
По моему (говорю «моему», так как еще не встречал данного метода — если-что — поправьте) методу нам понадобится 3 дива и 1 изображение, на котором и будут наши уголки.

Для примера нарисуем простенькую картинку:

и назовем ее corners.png

На ней мы имеем 4 уголка, засунутых в 1 спрайт.
В данном случае я взял ширину картинки равную 16 пикселям — в обычном случае равных 1em.
Эту величину надо запомнить — так как это будет ширина одного «кванта», и все другие размеры будут кратны ему или уменьшены в парное колличество раз — 0.5, 0.25, 0.125…

Теперь представим, что у нас есть блок фиксированого размера — например 20em на 3em.
Если мы поставим ему стиль


то в итоге получим такой результат:


Следующим шагом будет добавление контейнера внутрь данного. Показываю, пока-что, схематически:


Как мы видим, ширина данного контейнера равна 100% от родительского — по горизонтали и 100%−1квант — по вертикали — чтобы нормально перекрыть фон родительского контейнера.

По такому-же методу создаем еще один контейнер в том, что мы только-что создали:



Как мы видим высота такого блока равна 100%+1квант от родительского и ширина 100%−1квант
Вот и весь метод.

Реализация


Сама разметка в данном случае выглядит так, как и говорилось — не больше и не меньше 3-х дивов



Css файл тоже не особо сложный. Стоит только учесть, что css в данном случае — для динамической высоты контента (высота кратная кванту), хотя можно сделать и с фиксированной высотой

 


Читайте:


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


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

News image

Новости для разработчиков

Microsoft выпустила обновленную версию своего набора вспомогательных инструментов разработчика под названием Visual Studio 2010 Productivity Power T...

News image

Adobe Flash Builder 4

Программное обеспечение Adobe® Flash® Builder™ 4 (ранее — Flex Builder™) предназначено для быстрой разработки многофункциональных межплатформенных и...

News image

Grand Central

Увеличивается не тактовая частота, а количество ядер — и именно они повышают производительность современных процессоров. Диспетчер Grand Central пол...

News image

Windows 7 Test Drive – осваиваем разработку Windows-приложений в режим

Компания Microsoft запустила новый сайт для разработчиков под названием Windows 7 Test Drive. Сайт позволяет освоить разработку приложений для новей...

News image

Совместная работа над кодом в компании Google

Во второй главе книги «Coders at Work», Брэд Фицпатрик (Brad Fitzpatrick) — автор Live Journal, а сейчас сотрудник компании Google, помимо всяких ин...

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

News image

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

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

News image

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

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