Последние работы по созданию и продвижению сайтов нашей WEB студии в Ставрополе, Черкесске и Пятигорске

Дизайн-студия DigitalART » WEB дизайн » Правильно используем стили CSS

08.01.2012

Правильно используем стили CSS

Правильно используем стили CSS. Как правильно прижать подвал к низу страницы и как расположить блок по центру.

Часто при создании сайтов в Черкесске и Ставрополе возникает необходимость применять те или иные техники CSS для реализации тех или иных задач. Так, например, бывает, что необходимо на странице с малым количеством контента прижать footer (подвал) сайта к низу страницы, расположить блок по центру экрана и пр. Есть много способов для решения этих задач, но не все из них являются валидными и кроссбраузерными. В данной статье мы рассмотрим способы, которые позволяют решить эти задачи валидно и кроссбраузерно.

Свойство «min-height» для старых браузеров.

Для того что бы «заставить» старые версии браузеров понимать свойство «min-height», достаточно присвоить блоку которому мы хотим задать минимальную высоту в 100%, следующие стили:

#block{
	min-height:100%;
	height:auto!important;
	height:100%;
}

Необходимо соблюдать данный порядок объявления стилей, так как данный способ основан на этом порядке объявления стилей. Данный код является валидным и кросбраузерным.

Как правильно прижать футер к низу страницы.

Создадим HTML файл со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Как правильно прижать подвал сайта к низу страницы</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

<div id="document">
	<!--Основной контент-->
	<div id="aux"></div>
</div>

<div id="footer">
	<!--Подвал сайта-->
</div>

</body>
</html>

И подключим к нему файл стилей CSS со следующим содержанием:

html, body{
	margin:0;
	padding:0;
	height:100%;
    background:#F56803;
}
#document{
	min-height:100%;
	height:auto!important;
	height:100%;
	margin:0 auto -50px;
}
#aux{
	height:50px;
}
#footer{
	height:50px;
	background:#563F2F
}

Теперь давайте рассмотрим, что к чему. В HTML документе мы создали три блока с id «document», «aux» и «footer». Давайте рассмотрим каждый блок.

Блок «document» имеет отрицательный отступ (margin) снизу, равный высоте блока «footer». Используя способ задания свойства «min-height», описанный выше, мы установили его минимальную высоту равную 100%.

#document{
	min-height:100%;
	height:auto!important;
	height:100%;
	margin:0 auto -50px;
}

Благодаря тому, что «footer» находится за пределами блока «document», браузеры будут отображать его внизу страницы.

Блок «aux» тоже равен высоте подвала сайта, и служит для того что бы предотвратить «перекрытие» подвалом сайта контента, если его будет больше чем высота окна браузера.

Как расположить блок по центру с помощью CSS.

Часто при создании того или иного сайта, нужно расположить div, или другой элемент по центру экрана. Если речь идет о горизонтальном выравнивании по центру, то это не вызывает никаких трудностей, достаточно назначить данному блоку следующие стили CSS:

div{
	margin:0 auto
}

Используя данные стили CSS назначенные блоку, блок выровняется по центру по горизонтали. Давайте рассмотрим способ, как выровнять блок по центру и по вертикали. Данный способ применяется когда необходимо центрировать блок фиксированного размера, т.е. когда известны ширина и высота блока. Давайте рассмотрим код HTML и CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Как выровнять DIV по центру экрана</title>
</head>

<body>

<div id="centered">
	<!-- Блок который выравниваем по центру экрана -->
</div>

</body>
</html>

#centered{
	width:300px;
	height:200px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-100px 0 0 -150px;	
	background:#CDCDCD;
	border:1px solid #EEE;
}

Теперь давайте рассмотрим подробно приведенный код CSS. Мы задали блоку высоту равную 200px и ширину равную 300px, и использовали для данного блока абсолютное позиционирование на 50% сверху и 50% слева. Далее мы задали отрицательный отступ сверху (margin) равный половине высоты центрируемого блока, и отрицательный отступ слева равный половине ширины нашего блока.

Теперь можно проверить результат в любом браузере, наш блок будет располагаться ровно по центру экрана.

Если Вам необходимо изменить ширину или высоту блока, не забудьте изменить и значения margin-top и margin-left, установив их равными половине высоты и ширины блока соответственно.

Резиновый трех колоночный макет сайта.

Часто при создании сайта, необходимо сделать резиновый трех колоночный макет сайта, который бы занимал всю ширину окна браузера. В своей практике мы используем следующий способ для создания резинового макета сайта, который является валидным и кроссбраузерным:

HTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Резиновый трех колоночный макет сайта</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

<div id="document">
	<div id="leftbar">
		<!--Левая колонка-->
	</div>
	
	<div id="container">
		<div id="rightbar">
			<!--Правая колонка-->
		</div>
		
		<div id="contentbar">
			<!--Блок с контентом-->
		</div>
	</div>
</div>

</body>
</html>

CSS код:

html, body{
	margin:0;
	padding:0;
	height:100%;
    background:#F56803;
}
#document{
	width:100%;
}
#leftbar{
	width:270px;
	float:left;
	background:#563F2F
}
#container{
	margin-left:270px;
}
#rightbar{
	width:270px;
	float:right;
	background:#563F2F
}
#contentbar{
	margin-right:270px;
	background:#FFF;
}

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

Если у вас возникли вопросы по одному из способов, описанных в данной статье, вы можете задать их в комментариях к статье.

Прокомментировать статью

Рубрика: WEB дизайн | Автор: DigitalART | Печать

1 комментарий

Дата добавления: 08.01.2012

Другие статьи на эту тему:

Система автоматизированного продвижения сайтов

Дополнительная информация о статье: Эта запись опубликована 08.01.2012 в 14:03, автором DigitalART, и добавлена в рубрику WEB дизайн. Вы можете подписаться на обновления данной статьи по RSS 2.0 Данная статья отмечена метками: HTML Верстка

Об авторе DigitalART

Студия WEB-Дизайна DigitalART предоставляет услуги по созданию и продвижению сайтов в поисковых системах в городе Черкесске и Карачаево-Черкесской Республике, а также в городе Ставрополе и Ставропольском крае.