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

Язык C#: от Microsoft для разработчиков

В последнее время внимание сообщества специалистов IT-индустрии приковано к новой инициативе компании Microsoft -- .NET. Однако в своем восприятии э...

News image

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

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

News image

Black Hat: Adobe присоединяется к программе Microsoft по уведомлению о

Компании Adobe и Microsoft объединяют усилия для того, чтобы предоставлять антивирусным компаниям и разработчикам более полную информацию о процессе...

News image

Google будет конкурировать с Amazon S3

Как сообщает TechCrunch, Google собирается представить новый сервис облачного хранения данных, который будет прямым конкурентом Amazon S3. Называтьс...

News image

Microsoft сообщила об открытии исходного кода компиляторов Visual Basi

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

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

News image

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

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

News image

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

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