Свойство clear
Свойство clear управляет поведением последовательностью всплывающих элементов документа.
По умолчанию последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс всплывает в сторону. Посмотрите на предыдущий пример, где текст автоматически смещается вверх вдоль изображения МГТУ
Свойство clear может иметь значения left, right, both или none. Принцип таков, что если clear, например, имеет для бокса значение both, то верхний край рамки этого бокса всегда будет находиться под нижним краем поля возможных всплывающих сверху боксов.
Задание 11_8
Пример11_8.htm:
<html>
<head>
<title>Пример11_8</title>
<link rel="stylesheet" type="text/css" href="style11_8.css" />
</head>
<body>
<div id="picture">
<img src="01-small.jpg" alt="МГТУ">
</div>
<h1>МГТУ — университет больших перспектив!</h1>
<p class="floatstop">
>{сюда вставить первый абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}
</p>
</body>
</html>
Чтобы не дать тексту всплывать вверх перед рисунком, мы можем добавить такой код CSS:
Style11_8.css:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Посмотрите отображение файла с другими значениями свойства clear: left, right, both или none.
Позиционирование элементов
При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками позиционирование даёт большие возможности для создания точного и интересного дизайна.
Принципы css-позиционирования
Представим окно браузера как систему координат:
Принципы CSS-позиционирования - в том, что можно расположить бокс в системе координат где угодно.
Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели заголовок выглядит так:
Для того чтобы расположить его на 100px от верхней границы документа и на 200px слева, мы должны ввести следующий код CSS:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
Получим следующий результат:
Таким образом, позиционирование с помощью CSS - очень точная техника при размещении элементов, намного проще, чем использовать таблицы, прозрачные изображения или ещё что-нибудь подобное.
Абсолютное позиционирование
Элемент, позиционированный абсолютно, не получает никакого пространства к документе. Это означает, что после позиционирования он не оставляет после себя пустое пространство.
Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top и bottom для размещения бокса.
В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах документа:
Задание 11_9
Style11_9.css:
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
#box1 {
position:absolute;
top: 50px;
left: 50px;
width:50px;
height:50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
width:50px;
height:50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
width:50px;
height:50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
width:50px;
height:50px;
}
Пример11_9.htm:
<html>
<head>
<title>Пример11_9</title>
<link rel="stylesheet" type="text/css" href="style11_9.css" />
</head>
<body>
<div id="box1">
<h1 >МГТУ — университет больших перспектив!</h1>
</div>
<div id="box2">
<h1 >МГТУ — университет за полярным кругом!</h1>
</div>
<div id="box3">
<h1 >МГТУ — университет в городе Мурманске!</h1>
</div>
<div id="box4">
<h1 >МГТУ — самый большой университет в городе!</h1>
</div>
</body>
</html>
Задание для самостоятельного выполнения:
Разместите элементы документа следующим образом:
Относительное позиционирование
Чтобы позиционировать элемент относительно, установите в свойстве position значение relative. Разница между относительным абсолютным позиционированием состоит в том, как обсчитывается позиционирование.
Позиция элемента, размещаемого относительно, обсчитывается относительно его оригинальной позиции в документе. Это означает, что вы смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё занимает в документе пространство после позиционирования.
Как пример относительного позиционирования попробуем разместить три рисунка относительно их оригинального расположения на странице.
Задание 11_10
Style11_10.css
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
#dog1 {
position:relative;
left: 50px;
bottom: 10px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 10px;
}
#dog3 {
position:relative;
left: 250px;
bottom: 10px;
}
Пример11_10.htm
<html>
<head>
<title>Пример75</title>
<link rel="stylesheet" type="text/css" href="style11_10.css" />
</head>
<body>
<body>
<h1>МГТУ — университет больших перспектив!</h1>
<div id="dog1"><img src="01-small.jpg"></div>
<h1 >МГТУ — университет за полярным кругом!</h1>
<div id="dog2"><img src="01-small.jpg"></div>
<h1 >МГТУ — университет в городе Мурманске!</h1>
<div id="dog3"><img src="01-small.jpg"></div>
</body>
</html>
Задание для самостоятельного выполнения:
-Измените координаты относительного перемещения иным образом.
-Измените положение элементов, созданного Вами файла.
Методы всплывающих элементов и методы позиционирования дают определённые преимущества при конструировании страниц без необходимости использовать старые методы вроде таблиц и прозрачных изображений в HTML. Вместо них можно использовать CSS. Это точнее, имеет определённые преимущества и намного проще в работе.
Задание для самостоятельного выполнения:
С помощью средств CSS сформируйте шаблон страницы сайта.