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

Microsoft Visual Studio — линейка продуктов компании Майкрософт, включающих интегрированную среду разработки программного обеспечения и ряд других и...

News image

Oracle RAC. Общее описание

Высоконагруженные сайты, доступность «5 nines». На заднем фоне (backend) куча обрабатываемой информации в базе данных. А что, если железо забарахлит...

News image

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

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

News image

Встроенные средства для разработчиков Mac

Система Mac OS X Snow Leopard включает в себя полный набор инструментов разработчика, объединённых одной целью: дать вам возможность создавать отлич...

News image

Microsoft спонсирует разработчиков чтобы догнать Apple

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

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

News image

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

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

News image

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

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