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

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

выравнивание полей формы с помощью css

Задача


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




Решение



Шаг первый

Создадим HTML-разметку.

<div class= field >
<label for= n >Имя</label>
<input type= text id= n />
</div>
<div class= field >
<label for= ln >Фамилия</label>
<input type= text id= ln />
</div>
<div class= field >
<label for= a >Место жительства</label>
<input type= text id= a />
</div>

Шаг второй

Выровняем содержимое каждого дива по правому краю и назначим ему обновление потока.

.field {clear:both; text-align:right;}

Шаг третий

Заставим каждый элемент label «утечь» влево.

.field {clear:both; text-align:right;}
label {float:left;}

Теперь каждый заголовок встал напротив соответствующего поля, но ширина формы стала 100% от ширины родительского элемента.

Шаг четвертый

Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:

<div class= main >
<div class= field >
<label for= n >Имя</label>
<input type= text id= n />
</div>
<div class= field >
<label for= ln >Фамилия</label>
<input type= text id= ln />
</div>
<div class= field >
<label for= a >Место жительства</label>
<input type= text id= a />
</div>
</div>

Добавим в CSS обтекание для этого блока:

.field {clear:both; text-align:right;}
label {float:left;}
.main {float:left}


Шаг пятый

Теперь видно, что из-за float элементы перестали находится на одной линии. Vertical-align, к сожалению, работать не будет, но можно воспользоваться line-height.
Также зададим отступ между заголовком и полем:

.field {clear:both; text-align:right; line-height:25px;}
label {float:left; padding-right:10px;}
.main {float:left}


Работающий вариант можно посмотреть здесь. А также заходите на сайт piumosso ))

 


Читайте:


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


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

News image

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

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

News image

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

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

News image

Microsoft объединит разработчиков на Java и .NET

Microsoft планирует приобрести технологию, которая позволит серверу Visual Studio Team Foundation Server (TFS) выступить в качестве инструмента упра...

News image

Технологии Microsoft для разработчиков сегодня и завтра

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

News image

Командная строка на службе сервисов Google

Не всем нравятся распрекрасные интерфейсы с большими кнопками и специальными элементами управления для ввода текста или загрузки файлов. Иногда прощ...

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

News image

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

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

News image

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

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