Отправляет email-рассылки с помощью сервиса Sendsay

Основы самостоятельного сайтостроения

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Работа в сети Интернет" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
rohviktor

Статистика

632 подписчиков
-1 за неделю
←   Все выпуски   →

Основы самостоятельного сайтостроения.Выпуск №12


Выпуск No12  Основы самостоятельного сайтостроения.  2009-01-18 

 

Доброго времени суток, уважаемые подписчики!

На связи Андрей.

Этот выпуск рассылки хотелось бы посветит управлению над видимостью объекта.

Но прежде даю Вам ссылку на видео-версию данного урока:

http://www.webformyself.com/cgi-bin/counter/download.pl?file=lesson12.zip

В 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 - не разбивает строку

Как этим свойством пользоваться?

Допустим у нас идет текст, среди этого текста есть тэг <span> или это может быть ссылка, и нам нужно, что бы содержимое этого тэга или ссылки отображались на отдельной строке, то для них мы зададим свойство display cо значением block. И наоборот, если нужно, допустим, чтобы тэг <h2> был не на отдельной сроке, а в той же что и текст, то ему задаем свойство display cо значением inline.

Примеры:

            <h2 style=""display:" inline;">будет на одной строке с текстом </h2>

            <span style="display:block;">отобразиться на отдельной строке</span>

Особого внимания заслуживает значение none. Если мы зададим какому-либо элементу, свойство display со значением none, то этот элемент не отобразиться. Причем, в отличие от свойства visibility со значением hidden, этот элемент не отобразится полностью (свойства visibility со значением hidden не отобразит содержимое элемента, а сам элемент будет занимать свое место на странице).

Пример:

            <h2 style=""display:" none;">элемент не отобразится на странице</h2>

Чем хочу завершить данный выпуск.

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

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

Повторная ссылка на видео-версию урока:

http://www.webformyself.com/cgi-bin/counter/download.pl?file=lesson12.zip

На этом завершаю выпуск.

Если есть вопросы, то на пишите на E-mail:

contact@webformyself.com

andreybern@mail.ru

Успехов вам, До Встречи!

 

 
В избранное