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

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

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

News image

Adobe представляет пакет LiveCycle Enterprise Suite 2

Компания Adobe Systems Incorporated представила пакет Adobe LiveCycle Enterprise Suite 2 (ES2) – новую версию программного обеспечения, с помощью ко...

News image

Запуск Visual Studio 2010 в России

Прошел официальный запуск Visual Studio 2010 и платформы .NET 4.0 в России. Московское мероприятие было одним из первых мероприятий в рамках глобаль...

News image

Native Client: одной ногой в офлайне

В понедельник в Google Code Blog вышел анонс нового эксперимента веб-гиганта. Технология Native Client призвана ускорить веб-приложения благодаря пр...

News image

Gmail Labs: кто выйдет в свет, а кто уйдет в отставку

Мы запустили Gmail Labs более полутора лет назад. Это экспериментальная лаборатория, позволяющая разработчикам предлагать новые функции, а вам – реш...

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

News image

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

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

News image

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

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