Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 119
| Информационный Канал Subscribe.Ru |
| | Руководство
| Дизайн и юзабилити
| Графика
| Создание и раскрутка сайта | | Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум | |
Добрый день. Рекомендую ознакомиться со следующей информацией.
Внимание! Продолжение акции для подписчиков рассылки "Лучший хостинг со скидкой!"
Компания RunWeb.Ru выходит на новый уровень хостинга!
Компания RunWeb.Ru, предоставляющая услуги профессионального хостинга, сообщает вам о выходе на качественно новый уровень обслуживания. 10 января 2004 года была запущена новая площадка для виртуального хостинга в одном из крупнейших мировых датацентров в США. Одновременно с этим наш канал доступа расширен до 14 Гб/сек, а также еще больше расширены опции хостинга и снижены цены примерно на 20%. Такая конфигурация сети позволит предоставлять услуги хостинга действительно с неограниченными возможностями.
На серверном оборудовании установлена функциональная и очень удобная Панель управления сервером (http://RunWeb.Ru/panel.html), которая позволит Вам тонко настраивать все параметры Вашего сайта.
Среди множества хостинг провайдеров компания RunWeb.Ru всегда выделялась особо. Уникальные тарифные планы, высочайший сервис и обслуживание выгодно отличают нас на рынке хостинга. У нас Вы получаете действительно качественный хостинг, продуманный до мелочей.
Что может дать скорость 14 Гб/сек Вашему сайту? Безупречную доступность из любой точки мира в любое время и высочайшую скорость передачи данных. Выбирайте новый уровень хостинга вместе с RunWeb.Ru!
Компания RunWeb.Ru предоставляет качественный профессиональный хостинг на всей территории России для организаций и частных лиц. Основная задача компании - обеспечение клиентов высочайшим уровнем передовых услуг за приемлемую цену, соблюдая неизменное качество услуг хостинга и гибкую ценовую политику.
Если вы заинтересовались нашими услугами, оформите заказ на нашем сайте и мы предоставим вам бесплатное тестирование наших услуг в течение 10 дней.
Напоминаем вам, уважаемые читатели, что специально для вас мы предлагаем уникальную скидку 20%. Для этого укажите в комментариях к заказу "от сайта htmlbook.ru" и мы установим вам скидку. Не упустите свою возможность получить качественный хостинг по действительно низкой цене! Спешите, акция действует только до 1 февраля.
Надеемся на сотрудничество!
С уважением, Юрко Дмитрий (Менеджер).
E-mail: manager@runweb.ru
URL: http://RunWeb.Ru
С февраля рассылка Рецепты HTML будет выходить реже. Это связано с тем, что материалы сайта станут распределяться между другими рассылками, которые уже начали свою работу. Область интересов расширяется и не удовлетворяясь творческими амбициями и, в некотором роде, активностью читателей, решил завести новую рассылку, которая, надеюсь, станет такой же интересной и полезной, как эта.
Сегодня продолжаем тему о верстке слоями и резиновом дизайне. Адрес статьи на сайте — www.htmlbook.ru/content/?id=205
Резиновый дизайн. Размещение двух слоев
Для размещения двух и более слоев по горизонтали применяется два способа. Первый подход использует параметр float, позволяющий состыковывать один слой с другим, а второй основан на задании положения слоев через позиционирование CSS. В резиновом дизайне со слоями, преимущественно используется метод float. Это связано с тем, что определить точные координаты элементов порой затруднительно, вдобавок, приходится применять команды, которые поддерживаются только последними версиями браузеров, а это снижает универсальность кода. Несмотря на некоторые недочеты, оба подхода имеют место быть в арсенале верстальщика и их надо знать для лучшего понимания принципов работы со слоями. Ниже пойдет речь о создании двух колонок с применением плавающих элементов.
Термин «плавающий элемент» не очень удачен, но, тем не менее, иногда встречается в литературе. Никто никуда не плавает, надо понимать, так называют элемент, обтекаемый с разных сторон текстом или другими элементами веб-страницы. Параметр float применяемый к слою определяет, по какой стороне будет выравниваться слой, при этом остальные элементы будут обтекать его с других сторон.
Основные параметры стиля для каждого из двух слоев показаны в таблице.
| Для левого слоя шириной 20 процентов | |
|---|---|
Слой 1 float: left |
Слой 2 margin-left: 21% |
| Для левого слоя шириной 200 пикселей | |
Слой 1 float: left |
Слой 2 margin-left: 210px |
Для левого слоя требуется всего два параметра: float — заставляет второй слой располагаться рядом по горизонтали с первым слоем и width, который устанавливает ширину слоя. Вторая колонка будет занимать все оставшееся место, поэтому для нее атрибут width не требуется.
Правый слой характеризуется лишь одним параметром — margin-left, он смещает левый край колонки на ширину правого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в таблице указана 21 процент, где 20 процентов это сама ширина первого слоя, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселях, код останется прежним, но поменяются единицы измерения.
В примере 1 приводится код веб-страницы, на которой содержится заголовок, две колонки, одна из них отводится под меню, а вторая под контент и контактная информация. Ширина первой колонки с именем menu фиксирована и установлена в 200 пикселей, оставшееся пространство занято колонкой с именем content.
К сожалению, при попытке поменять колонки местами и установить слой фиксированной ширины справа, разные браузеры выдают непохожий результат. Поэтому использование параметра float в данном случае неприемлемо и следует обратиться к методу позиционирования слоев.
Пример 1. Код для создания двух колонок<head>
<style type="text/css">
BODY { /* Основной шрифт текста */
font-family: Verdana, Arial, sans-serif;
}
#top { /* Верхняя часть с заголовком страницы */
background-color: #E3E8CC;
border: solid 1px black;
padding: 15 0 15 20;
margin-bottom: 15px;
}
.title { /* Заголовок сайта */
font-size: 24px;
font-weight: bold;
color: black;
padding-top: 10px;
padding-bottom: 10px;
}
#menu { /* Навигация по сайту */
width: 200px;
background-color: #E3E8CC;
border: solid 1px black;
float: left;
}
#menu P { /* Разделы меню */
font-size: 100%;
font-weight: bold;
text-align: left;
padding: 10px;
margin: 0px;
}
#menu A { /* Ссылки в меню */
font-size: 90%;
font-weight: normal;
}
#content { /* Основное содержание страницы */
background-color: #E3E8CC;
border: solid 1px black;
margin-left: 215px;
margin-bottom: 15px;
}
#bottom { /* Нижняя часть */
background-color: #E3E8CC;
border: solid 1px black;
}
#contact { /* Контактная информация */
float: left;
padding: 0px;
text-align: left;
}
#button { /* Всякие кнопочки */
padding: 0px;
text-align: right;
}
H1 { /* Заголовок страницы */
text-align: center;
font-size: 220%;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
color: black;
padding: 0px;
margin: 0px;
}
#content P { /* Стиль основного текста */
font-size: 90%;
text-align: justify;
padding: 10px;
margin: 0px;
}
#contact P { /* Стиль контактов */
font-size: 80%;
padding: 5px;
margin-top: 0px
}
#button P { /* Стиль размещения кнопочек */
text-align: right;
padding: 5px;
margin: 0px;
}
</style>
</head>
<body>
<div id=top><span class=title>Заголовок сайта</span></div>
<div id=menu>
<p>Раздел 1<br>
<a href=#>Ссылка 1</a><br>
<a href=#>Ссылка 2</a><br>
<a href=#>Ссылка 3</a><br>
</p>
<p>Раздел 2<br>
<a href=#>Ссылка 1</a><br>
<a href=#>Ссылка 2</a><br>
<a href=#>Ссылка 3</a><br>
</p>
<p>Раздел 3<br>
<a href=#>Ссылка 1</a><br>
<a href=#>Ссылка 2</a><br>
<a href=#>Ссылка 3</a><br>
</p>
</div>
<div id=content>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla
facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.Duis te feugifacilisi. Duis
autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.</p>
</div>
<div id=bottom>
<div id=contact><p><b>Контактная информация</b><br>E-mail:
<u>vasya@pupkin.ru</u></div>
<div id=button><p><img src=images/sample.gif width=88 height=31
vspace=5> <img src=images/sample.gif width=88 height=31 vspace=5></p></div>
</div>
</div>
</body>
</html>
clip
| Браузер | Internet Explorer | Netscape Navigator | Opera | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Платформа | Windows | Macintosh | Все платформы | Все платформы | ||||||||
Версия |
4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0 |
| Поддерживается | Нет | Нет | Да | Да | Нет | Частично | Нет | Да | Да | Нет | Частично | Да |
Описание
Параметр clip определяет область позиционированного элемента, в которой будет
показано его содержимое. Все, что не помещается в эту область, будет обрезано
и становится невидимым. На данный момент единственно доступная форма области
— прямоугольник. Все остальное остается только в мечтах. Параметр clip
работает только для абсолютно позиционированных элементов.
Синтаксис
clip: rect(сверху справа снизу слева) | auto
Аргументы
В качестве аргументов используется расстояние от края элемента до области
вырезки. Если край области нужно оставить без изменений, следует поставить
параметр auto.
Значение по умолчанию
auto
Наследование
Значения, присвоенные данному параметру, не наследуются.
<body>
<div style=""xposition:" absolute; clip: rect(20px
auto auto 20px); width: 200px; color: white; background: #7F4C3E;
border: solid 1px black">
<p style=""padding:" 10px">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Применяется
Ко всем элементам.
Объектная модель
[window.]document.getElementById("elementID").style.clip
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
