... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Управление видимостью и переполнением блоков. (стр.1)

 

 


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

Свойство visibility

Как следует из названия, это свойство управляет видимостью блока. Оно может принимать только два значения:
  • visible - обычное состояние блока (по умолчанию), когда он нормально виден на экране;
  • hidden - блок становится прозрачным, т.е. невидимым.

Пример работы этого свойства мы рассматривали выше в сравнении с работой свойства display:none. Как вы помните, главное отличие в том, что при объявлении display:none блок полностью удаляется со страницы, тогда как объявление visibility:hidden делает его просто невидимым, но место на странице под блок резервируется.

С помощью свойства visibility можно организовать раскрывающиеся (drop-down) меню. Пример такого меню можно увидеть в любой программе Windows, когда, щелкнув на имени меню, вы видите перечень доступных в нем команд. Для организации такого рода меню используется понятие слоя.

Слой в CSS - это аналог слоя в графическом редакторе. Слой задает пространственную (по оси Z) координату блока при помощи свойства z-index.

Для организации раскрывающегося меню обычным образом создается главное меню сайта, а все его подменю помещаются на отдельные слои. Порядковый номер слоя определяется свойством z-index. В начальном состоянии видимость всех этих слоев устанавливается как visibility:hidden. Когда пользователь щелкает на команде главного меню, то включается видимость нужного слоя - с помощью объявления visibility:visible. В результате подменю появляется на экране поверх основного содержимого сайта. Повторный щелчок на команде меню снова отключает видимость подменю.

Свойство overflow

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

В браузерах фирмы Microsoft блок растягивается, чтобы вместить в себя содержимое блока полностью, а в браузерах Opera и Mozilla содержимое перекрывает блок


Содержимое перекрывает блок по ширине.

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

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

В CSS 2 появилась возможность несколько улучшить управление подобной ситуацией с помощью свойства overflow. Оно может принимать четыре значения: visible, hidden, scroll и auto. Давайте разберем их подробнее по отдельности.

Значение visible

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

Для начала смоделируем такую ситуацию: создадим небольшой по размерам блок (ключевым здесь будет именно ограничение высоты блока, а не ширины) и поместим внутрь него фрагмент текста, превышающий размеры созданного блока.

<STYLE> #small{
border:1px dotted #660033;
padding:0.5em;
height:60px;
width:150px;
overflow: visible; }
</STYLE>
<DIV ID="small">
Ширина данного блока 150 пикселей, а высота 60 пикселей. Проверим, удастся ли контролировать ситуацию с переполнением? <DIV>

Что же в этом случае мы увидим в окне браузера? Как показано на рисунке, браузер Internet Explorer при вертикальном переполнении поступает так же, как и поступал до этого, т.е. не обращает внимания на объявление overflow: visible. Он просто растягивает сам блок, чтобы содержимое поместилось полностью. Браузеры Opera и Mozilla ведут себя в соответствии с объявлением overflow:visible (так же, как вели себя идо этого). Это происходит потому, что значение overflow:visible является значением по умолчанию.

Internet Explorer Opera и Mozilla

Значение hidden

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

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

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы

 

Страница: - 1 - | - 2 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены