Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 22. Трёхколоночный макет сайта. Относительное и абсолютное позиционирование элементов

Содержание курса

Трёхколоночный макет на плавающих блоках

Рассмотрим трёхколоночный макет сайта на плавающих блоках. Первым примером рассмотрим кроссбраузерный вариант:

<!DOCTYPE html>
	<html>
		<head>
			<title>
				3-х колоночный "резиновый" макет на плавающих блоках
			</title>
			<style>
			
				#box {
					border: 2px solid #080; 
					overflow: hidden;
					}
					
				#left {
					width: 200px; 
					height: 200px;
					background: #ff0;
					float: left;
					}
					
				#center {
					background: #fсс;
					margin: 0 150px 0 200px;
					}
					
				#right {
					width: 150px;
					height: 200px; 
					background: #ff0;
					float: right;
					}
					
			</style>
		</head>
		<body>
			<div id="box">
				<div id="left">Левый блок сайта</div>
				<div id="right">Правый блок сайта</div>
				<div id="center">Средний блок - 
				основное содержимое страницы</div>
			</div>
		</body>
	</html>

Вид в браузере:

Напомню, что стили следует выносить в отдельный файл ".css", в примере они прописаны "embedding" способом просто для удобства. Обратите внимание: в коде html сначала должны быть прописаны плавающие блоки ("left" и "right") и только после них блок, находящийся в нормальном потоке ("center")!

Свойство margin заданное в примере для центрального блока предотвратит подлезание текста под левый и правый блоки, когда высота центрального блока станет больше высоты левого и/или правого. Этим свойством мы задали внешний отступ центрального блока слева на ширину левого блока (200px) и справа на ширину правого (150px).

Для того, чтобы высота определялась только содержимым, следует убрать заданную в примере высоту для блоков "left" и "right".

У такого способа есть недостатки. Текст с основным содержимым находится в документе в самом низу, а это плохо для поисковиков, они считают более важным текст, расположенный ближе к началу документа.

Трёхколоночный табличный макет

Как уже говорилось выше, макет на плавающих блоках имеет ряд недостатков. Рассмотрим вариант трёхколоночного табличного макета:

<!DOCTYPE html>
	<html>
		<head>
			<title>
				3-х колоночный "резиново-табличный" макет сайта
			</title>
			<style>
			
				#box {
					border: 2px solid #080; 
					display: table;
					}
					
				#box > div {
					display: table-cell;
					}
					
				#left {
					width: 200px;
					height: 200px;
					background: #ff0;
					}
					
				#center {
					background: #fсс;
					}
					
				#right {
					width: 150px; 
					background: #ff0;
					}
					
			</style>
		</head>
		<body>
			<div id="box">
				<div id="left">Левый блок сайта</div>
				<div id="right">Правый блок сайта</div>
				<div id="center">Средний блок - 
				основное содержимое страницы</div>
			</div>
		</body>
	</html>

В этом примере для общей "обёртки" трёх колонок - блока "box"- задано табличное представление ("table"), а для всех трёх блоков в нём задано представление ячеек таблицы ("table-cell"). Этот способ является простым и надёжным решением для вёрстки трёхколоночного резинового сайта.

Позиционирование элементов - свойство position

Свойство position, как и свойство float позволяет нарушить нормальный поток элементов и разместить элемент в любом месте на странице.

У элементов в нормальном потоке по умолчанию выставлены:
float: none;
clear: none;
position: static;

У свойства position есть 4 возможных значения:
static (значение по умолчанию) | relative | absolute | fixed

Относительное позиционирование - relative

position: relative - это относительное позиционирование элементов. Элемент с таким свойством будет позиционироваться относительно своего места в нормальном потоке. Относительное позиционирование можно задавать любым элементам (строчным, блочным и т.д.) - это не изменит начальное свойство display у элемента.

Смещение относительно спозиционированного элемента задаётся свойствами:
left | right | top | bottom
Начально значение этих свойств - auto

Рассмотрим такой пример: в коде ниже два блока - блок с текстом и пустой плавающий блок с жёстко заданными шириной и высотой по 200px:

<!DOCTYPE html>
	<html>
		<head>
			<title>Позиционирование relative</title>
			<style>
			
				#a {
					float: left;
					width: 200px; 
					height: 200px; 
					margin: 10px;
					background: #936;
					}
					
				#b {
					font-size: 1.5em;
					background: #ccf;
					}
					
			</style>
		</head>
		<body>
			<div id="a"></div>
			<div id="b">text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 </div>
		</body>
	</html>

Сейчас положение элемента "a" (бордовый квадрат) будет таким:

Зададим теперь для элемента "a" свойства position: relative - относительное позиционирование и left: 300px, что будет означать сдвиг относительно левой стороны на 300px вправо:

<!DOCTYPE html>
	<html>
		<head>
			<title>Позиционирование relative</title>
			<style>
			
				#a {
					float: left; 
					width: 200px; 
					height: 200px; 
					margin: 10px;
					background: #936; 
					position: relative; 
					left: 300px;
					}
					
				#b {
					font-size: 1.5em;
					background: #ccf;
					}
					
			</style>
		</head>
		<body>
			<div id="a"></div>
			<div id="b">text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text
			 </div>
		</body>
	</html>

В итоге положение элемента "a" (бордовый квадрат) сдвинулось на 300px вправо:

Сдвиг относительно спозиционированного элемента остался незамеченным другими элементами на странице, кроме элемента <html>, который при уменьшении области просмотра в браузере будет организовывать полосы прокрутки даже для относительно спозиционированного элемента. Текст в блоке "b" по-прежнему обтекает начальное расположение блока "a".

Если задать для элемента "a" свойство right: -300px, то результат будет тем же - мы сдвигаем элемент относительно правой стороны на минус 300px, что значит сдвиг влево на 300px.

Аналогично работают свойства top - сдвиг относительно верхнего края элемента и bottom - сдвиг относительно нижнего края элемента. Как вы уже заметили значения сдвига могут быть положительными и отрицательными.

Рассмотрим теперь конфликтную ситуацию: если задать для нашего элемента "a" свойства left: 300px и right: -800px, то сработает только свойство left, т.е. сдвиг относительно левой стороны. Почему? Это определяется свойством direction, значение по умолчанию у которого ltr (left to right) - это приоритет левой стороны документа. Если изменить это свойство для элемента <body> на rtl (right to left), то приоритетом в документе станет правая сторона. Приоритет правой стороны документа актуален для языков, в которых читается и пишется справа налево.

Абсолютное позиционирование - absolute

Абсолютное позиционирование задаётся свойством position со значением absolute. Абсолютно спозиционированный элемент автоматически получает блочное представление (display: block), выпадает из нормального потока, находится на отдельном слое (для него нельзя задать свойство float), "видит" размеры своего контейнера и не участвует в схеме margin collapse.

Смещение абсолютно спозиционированного элемента также задаются свойствами left | right | top | bottom

Для примера возьмём такой код:

<!DOCTYPE html>
	<html>
		<head>
			<title>Позиционирование absolute</title>
			<style>
			
				#a {
					background: #c69; 
					margin: 0 0 0 300px;
					font-size: 1.5em;
					}
					
				#a span {
					font-size: 1.5em;
					background: #ccf;
					height: 150px;
					}
					
			</style>
		</head>
		<body>
			<div id="a">Начало текста <span>вставка в тексте</span>
			и продолжение текста</div>
		</body>
	</html>

Сейчас всё это хозяйство выглядит так:

Обратите внимание - для элемента <span> задана высота, но до тех пор, пока он строчный элемент, высота не сработает. Теперь зададим для элемента <span> в предыдущем примере абсолютное позиционирование:

...
#a span {
	font-size: 0.7em; 
	background: #ccf; 
	height: 150px;
	position: absolute;
	}
...

Теперь высота, заданная для элемента <span> сработала:

Теперь зададим координаты расположения для элемента <span>, используя свойства left | right | top | bottom:

...
#a span {
	font-size: 0.7em;
	background: #ccf;
	height: 150px;
	position: absolute; 
	left: 5px; 
	top: 5px;
		}
...

Получим такую картину:

Контейнером для абсолютно спозиционированного элемента является ближайший предок, у которого position не static. Если среди предков такого элемента нет, то контейнером будет выступать элемент <html>. В итоге,мы задали координаты верхнего левого угла элемента <span> - слева 5px и сверху 5px относительно контейнера <html>.

Если для блока с id="a" в нашем примере задать относительное позиционирование (relative), то контейнером для абсолютно спозиционированного элемента <span> будет выступать этот блок:

...
#a {
	background: #c69;
	margin: 0 0 0 300px; 
	font-size: 1.5em;
	position: relative;
	}
	
#a span {
	font-size: 0.7em;
	background: #ccf; 
	height: 150px;
	position: absolute;
	left: 5px;
	top: 5px;
		}
...

Получим такой результат:

Свойства left | right | top | bottom у абсолютно спозиционированного элемента работают совсем не так, как у относительно спозиционированного. Если указать значения для левой и правой стороны, то это будет означать, что мы привязываем левую сторону к левой стороне предка с position не static, а правую - к правой, сработают оба правила:

<!DOCTYPE html>
	<html>
		<head>
			<title>Абсолютное позиционирование</title>
			<style>
			
				#a {
					background: #c69;
					font-size: 1.5em;
					position: relative;
					}
					
				#a span {
					background: #ccf;
					height: 150px; 
					position: absolute;
					left: 5px; 
					right: 5px;
					opacity: 0.65;
						}
						
			</style>
		</head>
		<body>
			<div id="a">
				text text text text text text text text text text text text text text 
				text text text text text text text text text text text text text text 
				text text text text text text text text text text text text text text 
				text text text text text text text <span>Вставка в тексте</span>
				text text text text text text text text text text text text text text 
				text text text text text text text text text text text text text text 
				text text text text text text text text text text text text text text 
			</div>
		</body>
	</html>

Получим такой результат:

В этом примере для удобства было использовано свойство прозрачности opacity, о нём речь в следующем уроке.

В случае, если мы к свойствам left и right добавим ещё и ширину width, то получится конфликтная ситуация, которая разрешится так: самое важное для браузера - это левая сторона и ширина элемента. В итоге сработают только свойства left и width.

Абсолютно спозиционированный элемент "видит" высоту своего родителя, поэтому при указании height: 100%; он растянется на всю ширину родителя.

Центрирование абсолютно спозиционированного элемента

Для того, чтобы установить абсолютно спозиционированный элемент по центру родителя задаём позицию всех четырёх сторон 0, чтобы элемент "увидел" границы своего родителя и выставляем margin в значении auto:

<!DOCTYPE html>
	<html>
		<head>
			<title>
				Центрирование абсолютно спозиционированного элемента
			</title>
			<style>
			
				#out {
					background: #ccf;
					width: 300px; 
					height: 200px; 
					position: absolute;
					left: 0; 
					right: 0; 
					top: 0; 
					bottom: 0;
					margin: auto;
					}
					
			</style>
		</head>
		<body>
			<div id="out">Содержимое элемента DIV</div>
		</body>
	</html>

Получим такой результат:

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля