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

Flex: вопросы и ответы

Что такое Flex? Flex — это высокоэффективная среда разработки с открытым кодом для создания и обслуживания веб-приложений, совместимых со всеми н...

News image

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

Сатоси Накадзима (Satoshi Nakajima) – создатель первой системы автоматизированного проектирования для ПК, один из ведущих разработчиков Windows 95 и...

News image

API тем iGoogle (Лаборатория Google)

С чего начать? Загрузите шаблон XML и подпишитесь на тестовую среду. Прочтите Руководство разработчика тем. В случае необходимости, обращай...

News image

Adobe и новая технология для iPad

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

News image

Серия анонсов Google для Java-разработчиков - GWT 1.6, App Engine for

Целой серией интереснейших анонсов для Java-разработчиков порадовала накануне неутомимая Google. А именно: » cвежий релиз фрэймворка для разработ...

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

News image

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

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

News image

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

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