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




Тривиальные задачи по вёрстке (часть 1)

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

тривиальные задачи по вёрстке (часть 1)



Начинаю вести серию статей про вёрстку html css js, начинаю с самого простого, потом планирую описать более сложные вещи и всякие тонкости

Начнемс с самого простого.
Макет с одной колонкой по центру



Стандартная задача — разместить контент в середине экрана.
Контентная часть может быть фиксированной или тянущейся, а еще Надо вытянуть центральный блок в высоту на весь экран…

последний раз я использовал такую схему

html

<div class= wrap >
<div class= contentdiv >
Этот блок фиксированного или относительного размера всегда будет горизонтально отцентрован <br /><br />
А еще он растянут на всю высоту экрана
</div>
</div>

* This source code was highlighted with Source Code Highlighter.



css

html, body {height:100%;}
.wrap {
/*центрируем*/
position:relative;
width:50%; /*могут быть и пиксели*/
margin: 0px auto ;
/*вытягиваем в высоту*/
height:auto !important;
height:100%;
min-height:100%;
/*украшательства*/
border-left:1px solid #69b401;
border-right:1px solid #69b401;
}
.contentdiv {padding:10px;}

* This source code was highlighted with Source Code Highlighter.



тут два вложенных блока, наружний — обёртка, который позиционирует контентную часть, внутренний — сам контент

выдвигаем его на середину указываем ему отступ margin: 0px auto; и ширину width:50%; размеры могут быть и px и %

растягиваем по высоте: для ие и для всего остального, как обычно, разные способы, поэтому высоту указываем 4 раза — 3 раза в блоке и 1 раз в html, body

upd {
почему именно так?
что бы контент не проваливался в нормальных браузерах пишем height:auto!important, а ниже
height:100%
Нормальные браузеры понимают !important как более высокий приоритет и используют его, а
ие6 в следствии своей безумности переписывает «нижним значением» «важное значение»…
}

Для обёртки нельзя использовать вертикальные отступы, это даст ненужный скролл, поэтому все необходимые отступы используем во внутреннем блоке

пример

Футер


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

вот пример

если посмотрим в исходный код заметим два новых блока

<div class= empty_inner style= > </div>

* This source code was highlighted with Source Code Highlighter.



внутри блока-обёртки wrap

и сам footer после этого блока

<div id= footer >
© Vilz 09

</div>

* This source code was highlighted with Source Code Highlighter.



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

css

#footer {
position:relative;
height:20px;
margin-top:-21px;

line-height: 20px;
vertical-align:middle;

border-top: 1px solid #e8e9e8;
width:100%;
text-align:right;
font-size:10px;
}

* This source code was highlighted with Source Code Highlighter.



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

upd {
Так же его можно поднять с помощью отрицательного нижнего margin для блока обёртки .wrap

перенести верхний отрицательный марджин из .footer в нижний отрицательный марджин в .wrap

 


Читайте:


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


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

News image

Google I/O: новый Android, Google TV и машинное обучение

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

News image

Google внедрила защиту от копирования в приложениях для Android

Компания Google предложила разработчикам добавить в свои программы модуль License Verification Library (LVL), чтобы защитить платные приложения для ...

News image

Новый JDBC-драйвер для СУБД SQL Server уже доступен в виде предварител

Компания Microsoft сделала еще один шаг к обеспечению совместимости своей флагманской СУБД SQL Server с промышленными Java-приложениями, выпустив оз...

News image

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

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

News image

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

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

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

News image

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

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

News image

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

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