Выпуск №12. Управление над видимостью объекта.
15.07.2009 Рубрика: Обучение \ Курс по HTML&CSS
Доброго времени суток, уважаемые подписчики!
На связи Андрей.
Этот выпуск рассылки хотелось бы посветит управлению над видимостью объекта.
Но прежде даю Вам ссылку на видео-версию данного урока:
В html существуют возможность делать объект видимым или невидимым, причем есть различные варианты, и они по-разному отображают содержимое.
Итак, начнем.
Представим ситуацию: нам нужно в блок размером 200 на 300 пикселей вместить достаточно большой фрагмент текста (в принципе это может быть что угодно).
Если мы зададим блоку с помощью стилей ширину равную 200 и высоту равную 300 пикселей, то по высоте он растянется на столько, сколько будет содержимого в блоке. Но нам нужно строго 300 пикселей по высоте! В этом случае делаем следующее:
Для нашего блока задаем свойство overflow со значением scroll. Блок становится с нужными нам размерами, все содержимое поместилось в нем, и появились полосы прокрутки.
Значения свойства overflow приведены ниже:
overflow – управление размерами объекта, если его содержимое не может быть показано целиком.
Значения:
auto – определяется браузером.
visible – размер растягивается до такой степени, что бы все содержимое было видимым.
hidden – то, что выходит за границы элемента просто не отображается.
scroll – все содержимое отображается, и появляются полосы прокрутки.
Для нашего конкретного случая пример:
<style type="text/css">
#st1{
overflow: scroll;
width:200px;
height:300px;
}
</style>
<div id="st1"> Достаточно большой фрагмент текста </div>
Есть свойство, которое позволяет управлять видимостью содержимого элемента.
visibility – управляет видимостью содержимого элемента.
Значения:
Visible – содержимое отображается.
hidden – содержимое не отображается.
Пример:
<h2 style="visibility:hidden;">содержимое этого заголовка не отобразится</h2>
Следующее свойство, которое позволяет управлять видимостью блока – это display.
display – определяет, как будет отображаться элемент
Значения:
none – элемент не отображается
block - разбивает строку до и после элемента (т.е. элемент не может находится на одной линии с другими элементами)
inline - не разбивает строку
Как этим свойством пользоваться?
Допустим у нас идет текст, среди этого текста есть тэг <strong> или это может быть ссылка, и нам нужно, что бы содержимое этого тэга или ссылки отображались на отдельной строке, то для них мы зададим свойство display cо значением <strong>block. И наоборот, если нужно, допустим, чтобы тег <h2> был не на отдельной сроке, а в той же что и текст, то ему задаем свойство display cо значением inline.
Примеры:
<h2 style="display: inline;">будет на одной строке с текстом </h2> <strong style="display:block;">отобразиться на отдельной строке</strong>
Особого внимания заслуживает значение none. Если мы зададим какому-либо элементу, свойство display со значением none, то этот элемент не отобразиться. Причем, в отличие от свойства visibility со значением hidden, этот элемент не отобразится полностью (свойства visibility со значением hidden не отобразит содержимое элемента, а сам элемент будет занимать свое место на странице).
Пример:
<h2 style="display: none;">элемент не отобразится на странице</h2>
Чем хочу завершить данный выпуск?
Скажу, что эти свойства очень важны при разработке выпадающих меню (при наведении на пункт меню выпадают подпункты этого меню).
Идея здесь заключается в том, что мы скриптом меняем значения none на display при наведении курсора мыши на ссылку.
О таких меню будет подробно рассказано на диске, который уже совсем скоро выйдет в свет.
Повторная ссылка на видео-версию урока:
На этом завершаю выпуск.
До скорой встречи!
| Подписаться |
|
Поделиться |
|
Метки: управление над видимостью объекта
Популярные записи
Монетизация сайта с помощью ссылочных бирж.
Как создать свой первый профессиональный дизайн сайта с нуля.
На пути к монетизации сайта: увеличиваем рейтинг сайта через наращивание ссылочной массы.
Загибающийся флеш-уголок для сайта.
Создание шаблона для отдельной страницы WordPress.
Спасибо большое за такие уроки! многому чему научился =)
Нравится или не нравится:
1 
0
Спасибо большое за урок о видимости блока! Спасибо!!!
Нравится или не нравится:
1 
0
спасибо, прояснили хорошо)
Нравится или не нравится:
1 
0
Алексей, несколько раз скачивал видео-версию 12 урока, но архив не распаковывается. Пишет, что поврежден. Перезалейте, пожалуйста.
Нравится или не нравится:
1 
0
Перезальем. Только, кто такой Алексей?
Нравится или не нравится:
1 
0
Ошибочка:). Прошу прощения.
Нравится или не нравится:
1 
0
Благодарю за ваши труды! Ребята вы все больше и больше вдохновляете меня. Не смотря на свою занятость, стараюсь не пропускать ни одного занятия, у меня в последнее время даже создалось впечатление, что вы не за много километров от меня, а где-то в соседней комнате. Удачи во всем! С уважением, Юрий.
Нравится или не нравится:
1 
0
Очень своевременный урок.
Наконец-то я перестану писать целые ленты, задавая стиль выделенному тексту.
Оказывается, достаточно только лишь придать стиль тэгу , о чем я, как супер-чайник, ничего не знала.
Огромаднейшее Вам спасибо!
Нравится или не нравится:
0 
0
Большое спасибо за все уроки. Хочется сутки растянуть часов до тридцати, чтобы все усвоить. Вся информация прямо «в ноздрю»! С Наступающим и УСПЕХОВ Вам, ребята, и нам с Вами!
Нравится или не нравится:
1 
0
Спасибо!! Очень интересно. Попробую разобраться.
Нравится или не нравится:
1 
0
Андрей, большое спасибо за учебу,но для меня это темный лес.Вообще-то я себя никогда глупою не считала,но тут что-то не улавливаю. Выкупила диски Киберсант Вебмастер,но почему-то не идут у меня в ноотбуке.Всего вам хорошего,Андрей, спасибо!
Нравится или не нравится:
0 
0
Отпишите нам на email по поводу дисков «Киберсант-вебмастер», мы свяжемся со службой поддержки и решим вашу проблему!
Нравится или не нравится:
1 
0
Спасибо за отличный урок.
Нравится или не нравится:
0 
0
Здравствуйте наши гуру интернета!
Я понимаю Ваши уроки, можно сказать где-то 85%.
Мне хотелось бы опять мешает (БЫ)?
Короче такая ситуация.
Яндекс индексирует только одну страницу сайта.
Может у Вас есть маленький секрет, как эту проблему решить.
С уважением к Вам и вашим урокам.
PS: Мой сайт softsayt.ru
Нравится или не нравится:
1 
0
Всё понятно. Спасибо за урок.
Нравится или не нравится:
0 
0
Спасибо!
Нравится или не нравится:
1 
0