|
Помогите мне. Я ничего не понимаю в курсе (((((( (от слова "совсем") и мне от этого очень грустно. Есть ли какие-нибудь курсы для "чайников", самые простые в объяснении. ПАМАГИТЕ!!! |
Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 8191 / 825 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Темы: Интернет-технологии, Программирование, Школа
Специальности: Разработчик интернет-проектов
Теги:
Лекция 35:
Плавающие элементы и очистка
Центрирование плавающего элемента
Иногда вы захотите сделать элемент плавающим - возможно, чтобы заставить его охватить плавающих потомков -- сохраняя его при этом горизонтально центрированным в его предке. Здесь имеется проблема: вы не можете использовать обычный прием задания левого и правого полей как auto для плавающих элементов, и не существует такого значения как float:center. Существует ли здесь какой-то способ обойти эту проблему?
Такое решение имеется. Специалист по CSS Поль О'Брайен объясняет, как это можно сделать, в своей статье "Когда float не является float"? (http://www.search-this.com/2007/09/19/when-is-a-float-not-a-float/). Это включает дополнительный элемент оболочки, но с этим можно смириться. Метод использует относительное позиционирование, которое мы рассмотрим в следующей статье о статическом и относительном позиционирование CSS. Смещая элемент оболочки вправо, а затем смещая плавающий элемент снова влево, вы можете в действительности центрировать завернутый в оболочку плавающий элемент неизвестной ширины!
Давайте попробуем это сделать. В следующем примере мы добавляем на страницу панель горизонтального меню на основе неупорядоченного списка с плавающими пунктами.
1. Вставьте следующую разметку сразу после тега <body> в документе HTML:
<div class="wrap">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
<!--Internet Explorer needs this-->
<div class="clear" > </div>2. Добавьте следующие правила CSS в таблицу стилей, чтобы оформить меню:
#menu {
margin: 0;
padding: 0.5em;
font-family: Verdana,sans-serif;
}
#menu li {
float: left;
list-style-type: none;
margin: 0 0 0 0.5em;
padding: 0.25em;
background-color: #600;
color: #ff9;
border: 2px solid #f00;
}
#menu a {
color: #ff9;
text-decoration: none;
}
.wrap {
float: left;
margin-bottom: 2em;
}
.clear {
clear: left;
height: 1px;
margin-top: -1px;
}3. Сохраните оба файла и обновите страницу в браузере. Вы увидите свое меню в верхнем левом углу. Давайте сделаем его горизонтально центрированным.
4. Сместите элемент оболочки на половину страницы, модифицируя правило для .wrap, как показано ниже:
.wrap {
float: left;
margin-bottom: 2em;
position: relative;
left: 50%;
}Меню будет начинаться в горизонтальном центре страницы, но это не то, что мы хотим -- оно слишком смещено вправо, поэтому надо сместить его немного назад влево. Так как оболочка является плавающей, то она сокращается в соответствии с размером списка. Вы хотите сместить список на расстояние, которое равно половине его ширины, что означает также половину ширины оболочки, поэтому делаем смещение на -50%.
5. Модифицируем правило #menu следующим образом:
#menu {
margin: 0;
padding: 0.5em;
font-family: Verdana,sans-serif;
position: relative;
left: -50%;
}Меню теперь центрировано; единственная проблема состоит в том, что вы можете получить горизонтальную панель прокрутки в зависимости от ширины списка и окна браузера. Это связано с тем, что вы сместили элемент оболочки на половину экрана; если список будет шире половины окна, часть его окажется за пределами экрана.
6. Можно избавиться от этого, задавая свойство overflow:hidden на подходящем элементе предке, чтобы сделать переполнение скрытым. В этом случае предком оболочки является body. Иногда невозможно скрыть переполнение на элементе body, и в этом случае нужно будет создать оболочку для оболочки, однако в данном случае все нормально.
Добавьте следующее правило в таблицу стилей:
body {
overflow: hidden;
}7. В действительности имеется еще одна проблема. Если посмотреть на это в Internet Explorer вы увидите, что все по прежнему работает неправильно. Решение проблемы в том, чтобы сделать плавающим сам список, но только в Internet Explorer, так как это не работает в других браузерах. Это можно обойти, используя небольшой прием, который гарантирует, что это правило применяет только браузер Internet Explorer.
Добавьте следующее правило в таблицу стилей:
* html #menu {
float: left;
}Ошибки!
Плавающие элементы и очистка являются очень полезными, но, к сожалению, большинство - если не все - браузеры имеют ошибки реализации этих свойств. Internet Explorer 6 содержит огромный массив странного поведения с плавающими элементами, включая исчезающий контент, удвоение полей и печально известную ошибку с 3-пиксельным зазором. Но даже Firefox и Opera не полностью свободны от ошибок, когда речь идет о плавающих элементах и очистке. Сайт Position Is Everything (http://positioniseverything.net/) является бесценным источником, где документируются эти ошибки - вместе со средствами их обхода в большинстве случаев.
Заключение
Плавающий бокс смещается как можно дальше влево или вправо в своем элементе предке. Плавающий бокс извлекается из потока документа и не влияет на бокс предок или последующие блочные боксы, хотя смежные линейные боксы укорачиваются. Когда для плавающего бокса недостаточно пространства в строке в связи с предыдущими плавающими элементами, он смещается вниз пока не сможет разместиться (или пока не будет других плавающих элементов).
Когда строковый бокс становится плавающим, он становится блочным боксом. Когда блочный бокс становится плавающим, и ширина явно не задана, он будет сжиматься в оболочку вокруг своего контента.
Создание плавающих элементов влечет за собой смещение контента вниз, если потребуется, пока верхний край контента не будет ниже нижних краев всех плавающих боксов в указанном направлении.
Центрирование плавающего бокса в оболочке возможно с помощью добавления элемента оболочки и некоторого осмотрительного использования относительного позиционирования.
Контрольные вопросы
- Что произойдет, если плавающий элемент появляется в середине параграфа; т.е, если перед плавающим элементом имеется текст? Обязательно проверьте это в различных браузерах, так как они ведут себя по разному. Opera и Safari делают это правильно, в то время как Firefox и Internet Explorer - нет.
- Как плавающие элементы можно использовать для вывода пиктограмм изображений в галереи "ячеек" одинакового размера, не используя таблицу компоновки?
- Как можно создать вертикальное навигационное меню на левой стороне страницы и столбец контента на правой, так чтобы текст контента не заворачивался под меню?
- Очень распространенная компоновка Web-сайта состоит из заголовка в полную ширину, ниже которой находятся три столбца контента и затем нижний колонтитул в полную ширину. Как можно получить такую компоновку с помощью плавающих элементов и очистки?
Об авторе
Томми Олссон является прагматичным пропагандистом стандартов Web и доступности, который живет в малонаселенной области центральной Швеции. Он написал свой первый документ HTML в 1993 г. и является в настоящее время техническим Web-мастером для правительственного агентства Швеции.
Он написал пока одну книгу - Полный справочник по CSS (совместно с Полем О'Брайеном) - и поддерживает крайне нерегулярно блог с названием Кукушка-аутист (http://www.autisticcuckoo.net/).
Материалы этого курса имеют лицензию
Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
Марина Походаева
Федор Антонов
|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |