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

Причина такой проблемы была выявлена на одном из зарубежных форумов, и заключалась в определении ширины видимой области. Интересно, что Bootstrap в своих стилях определяет для Internet Explorer ширину видимой области шириной экрана устройства, т.е. максимально возможной шириной. Таким образом контент располагается от левого до правого края окна, включая область под скроллбаром.

Для устранения данной особенности отображения в браузере Internet Explorer вы можете найти и удалить код из файла bootstrap, или переопределить стиль в своем файле стилей. CSS, отвечающий за видимую область в браузере MS IE выглядит следующим образом:

@-ms-viewport{width:device-width}

Для того чтобы переопределить стиль в своем файле CSS, вы можете использовать следующий код:

@-ms-viewport{width:auto !important}

Таким нехитрым способом мы определим видимую область для Internet Explorer с учетом места под scrollbar и все станет на свои места:

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

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

Если раньше для поддержки мобильных устройств владельцам сайтов предлагалось разработать отдельный проект для мобильных устройств, например на поддомене m.example.com, то сегодня все решается благодаря адаптивной верстке, использование которой стало возможно, с внедрением media query (rules) в CSS3.

Данные медиа запросы/правила — это определенный набор стилей, которые написаны специально под мобильное устройство, имеющее определенный размер (разрешение) экрана. Принцип правил следующий: если устройство имеет размер экрана, подходящее под описанные верстальщиком условия, то применяются соответствующие символы.

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

Как же все таки проверить сайт на наличие адаптивной верстки? Все проще чем кажется: достаточно просто изменить размер окна бразуера и проверить как сайт себя поведет. Пример адаптивной верстки вы изображен на анимированном рисунке ниже (для просмотра кликните по изображению).

Как вы можете заметить, сайт подстраивается под любой размер экрана, и минимальной шириной, которую обычно поддерживают устройства — 320 пикселей. Однако, как показывает мой опыт, нередко можно встретить сайт, который подстроен под мобильные устройства, однако при изменении размера окна он не адаптируется до тех пор, пока размер окна не станет размером менее чем размер окна мобильного устройства.

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

Вот например на этом сайте мобильная версия «включается» поздно, и кнопка «Contact» закрывает собой пункты меню. В данном случае, было бы уместно дописать еще десяток строк CSS-кода для решения данной проблемы (для просмотра кликните по изображению). (сайты были найдены случайным образом, автор не пытается обидеть или оскорбить владельцев или разработчиков сайтов, представленных ниже в виде наглядных примеров)

В следующем примере вообще решили избавится от прокрутки (скроллов), в связи с чем абсолютно невозможно будет пользоваться сайтом на устройствах с маленьким разрешением экрана (для просмотра кликните по изображению):

Следующий пример «адаптивности» — сайт вроде адаптивный, но скрол есть, текст вылазит, элементы залазят друг на друга, образуя такую себе кашу (для просмотра кликните по изображению).

Почему нельзя проработать адаптивность для всех размеров? Почему только мобильные, совсем маленькие устройства? (для просмотра кликните по изображению)

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

При создании современного сайта каждый разработчик должен это учитывать! Что такое адаптивный дизайн, резиновая верстка, статика и в чем отличие, в чем преимущества адаптивной верстки, и зачем ее делать? Давайте разбираться!

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

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

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

Статический дизайн сайта — это самая простая, с точки зрения разработки версия верстки. Все элементы вне зависимости от разрешения экрана устройства, размера окна браузера будут расположены в одном и том же месте без сдвигов или изменений.

Такой сайт безболезненно откроется на любом устройстве, будет работать корректно, но не все элементы управления (ссылки, кнопки) будут удобны для взаимодействия пользователем. Такой сайт необходимо «зумить» (увеличивать/уменьшать масштаб), скроллить и ловить искомый элемент.

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

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

Адаптивный дизайн сайтов — это дизайн, который рассчитан на корректное отображение на всевозможных устройствах, начиная от персональных компьютеров с FullHD разрешением мониторов, заканчивая мобильными устройствами с минимальным разрешением.

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

Некоторые владельцы интернет магазинов создают отдельную мобильную версию сайта, которую размещают на поддомене «m» и создают редирект (переадресацию) для мобильных устройств с основного домена example.com на m.example.com. К сожалению, на данный момент я затрудняюсь ответить в чем преимущество такого решения, но если вы знаете — пишите в комментариях — найдем истину вместе!

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

Таким образом, мы видим, что сегодня, при создании сайта, желательно иметь адаптивный дизайн (мобильную версию), и подойти к ее разработке очень тщательно и с умом, т.к. от качества подхода и разработки зависит удобство использования посетителем вашего ресурса, а ведь удобство клиента — это ваши деньги.

Сегодня, создавая сайт его можно украсить очень красивой анимацией элементов, которые не только будут радовать глаз, но и будут удобными для пользователя — никаких резких движений, появлений, сдвигов. Работая над одним проектом я заметил одну особенность в браузере Сафари: -webkit-transition: all 0.5s ease — не работает!

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

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

Я проверяю все свои проекты на всех текущих версиях браузеров, благо сегодня даже Internet Explorer вроде как собрался и многое поддерживает, хотя качество его работы оставляет желать лучшего, и каково было мое удивление что Safari вообще отказался показывать анимацию.

В поисках нужно информации я перерыл достаточно сайтов, перепробовал несколько костылей, однако обхитрить браузер Apple мне помогло лишь установка параметра -webkit-transition-property, в котором назначил те параметры стилей которые менялись, а именно opacity и margin-top.

Тем не менее, отработка анимации в Safari все-равно оставляет желать лучшего: присутствуют рывки, странно работает исчезновение элемента (каллбек, callback). Возможно вы, уважаемые подписчики что-то еще подскажете, чтобы улучшить отработку анимации на CSS-transition в Safari?

До этого, в 9 версии ИЕ не поддерживал градиенты каскадных таблиц стилей, что очень разочаровало разработчиков веба.

Вы можете скачать preview платформы здесь и узнать больше о IEBlog здесь .

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

Горизонтальное меню на всю ширину сайта без таблиц
Вот css, из него можете по удалять мои стили оформления и оставить только каркас:

* {
margin:0;
padding:0;
}
#flowtabs {
/* dimensions */
width:100%;
margin:0 !important;
padding:0;
position:relative;
top:-3px;
/* IE6 specific branch (prefixed with "_") */
_margin-bottom:-2px;
}

/* single tab */
#flowtabs li {
float:left;
margin:0;
padding:0;
text-indent:0;
list-style-type:none;
width:20%;
}

/* a- tag inside single tab */
#flowtabs li a {
position:relative;
right:5px;
display:block;
height: 31px;
width: 100%;
padding:0px;
margin:0px;
/* font decoration */
color:#ffffff;
font-size:16px;
line-height:29px;
height:28px;
text-align:right;
text-decoration:none;
text-transform: uppercase;
}

Ну и собственно сам html:

<ul id="flowtabs">
<li style="background-color: #ff6500;"><a href="http://nikita-sp.com.ua/">Пункт 1</a></li>
<li style="background-color: #00b8f6;"><a href="http://создание-сайтов.kharkov.ua/">Пункт 2</a></li>
<li style="background-color: #ff0391;"><a href="http://nikita-sp.com.ua/works.php">Пункт 3</a></li>
<li style="background-color: #76cc00;"><a href="http://nikita-sp.com.ua/contacts.php">Пункт 4</a></li>
<li style="background-color: #717171;"><a href="http://создание-сайтов.kharkov.ua/blog/">Пункт 5</a></li>
</ul>

menu-100percents-width — Демо

Все! никаких таблиц! Пользуйтесь!

На самом деле растянуть (background-image) изображение на 100% страницы — не проблема, достаточно всего лишь написать пару строк css кода.

Немного css:

html, body {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%
}
#bg_image {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1;
 width: 100%;
 height: 100%;
}
#scrollable {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 2;
}

Ну и конечно сам html:

<body>
<div><img id="bg_image" src="/path/to/image.png"/></div>
<div id="scrollable">
… Тут уже ваш текст, картинки, ну в общем контент одним словом …
</div>
</body>

Конечно же ссылочка на пример: Фоновое изображение 100% во весь сайт!

Итак, как вы уже поняли речь пойдет о приоритетах в css.
Как мы можем задать стиль для блока к примеру?

1. Через атрибут «style» у элемента:

<div style="color: green;">Зеленый текст</div>

2. Через атрибут «class» у элемента:

<html>
<head>
 <style type=”text/css”>
.test{color: Red;}
</style>
</head>
<body>
 <div class=”test”>Красный текст</div>
</body>
</html>

3. Через атрибут «id» у элемента:

<html>
<head>
 <style type=”text/css”>
 #test{color: Red;}
 </style>
</head>
<body>
 <div id=”test”>Красный текст</div>
</body>
</html>

4. И собственно всем элементам типа.

<html>
<head>
 <style type=”text/css”>
div {color: Blue;}
 </style>
</head>
<body>
 <div>Синий текст</div>
</body>
</html>

Но каков приоритет у этих свойств? Что будет если мы пропишем сразу всеми способами разные цвета тексту? Какого цвета будет текст?

<html>
<head>
<style type=”text/css”>
#test{color:red;}
.test{color:green;}
div {color:black;}
 </style>
</head>
<body>
<div style="color:blue;" class=”test” id=”test”>Не смотря на все стили, прописанные в "head", текст синий, как и установлено у элемента div в атрибуте "style"</div>
</body>
</html>

И что вы думаете будет?
Не знаете? Смотрите: css-priority

!Important
Итак, Даже если мы добавим свойство !important к любому стилю в css, то все равно текст останется синим. Посмотрите исходный код страницы!

Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.

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

• !important добавлен в авторский стиль — будет применяться стиль автора.
• !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
• !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
• !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Из htmlbook.ru

Итак, собственно приоритет:

Измеряется приоритет каскадных таблиц стилей в «поинтах» (points).

то есть, если мы напишем такой стиль в css:

div.text_class {color: Red;}

То у него будет рейтинг 1+10=11 (points);
Как вы наверное уже догадались, то стиль с самым высоким приоритетом и будет выводиться на монитор, а вот те стили, что ниже приоритетом просто будут игнорироваться.

Для этого в css есть свойство margin. Мы просто берем и в css классе элемента пишем margin: 0 auto;

Но! При заданном position:fixed; мы не увидим желаемого эффекта!

Что делать? Полазив по «забугорным» форумам и конкретно потрепав гугл, возникло решение данной проблемы. Просто к всем свойствам нашего элемента добавьте:

left:0;
right:0;

Вот и все, теперь ваш «зафиксенный» элемент посередине страницы!