4 заметки с тегом
верстка РСС
22 января 2012, 17:39
Вендорные префиксы
Оказывается, многие не знают как правильно использовать префиксы. Смотрите и запоминайте.
нет комментариев
19 марта 2010, 19:56
Выравнивание сайта по центру страницы
Как выровнять сайт по горизонтали знает каждый, а те у кого появилась необходимость выровнять сайт по вертикали относительно всей страницы, т. е. сделать его по центру экрана, наверняка, столкнулись с проблемой отображения информации в разных браузерах.
Уверен, даже, что проблема отображения появилась в одном единственном «всеми любимом» браузере — Internet Explorer. Ох уж этот IE, вечно не дает покоя :)
Решение данной незадачи не такое уж и сложное. Ниже приведен пример выравнивания текста как по горизонтали так и по вертикали относительно страницы:
Для html и body переданы свойства ширины и высоты с параметрами 100% для того чтобы охватить всю область страницы.
Отдельно для html добавляем display: table; говорящий, что див является таблицей подобно использованию тега <table>, плюс прописываем для body свойства, указывающие что элемент представляет собой ячейку таблицы с вертикальным и горизонтальным выравниванием по середине.
Далее идет элемент container с позиционированием по середине.
А теперь важная часть! Пишем хак для браузера IE между условными комментариями <!<!—[if gt IE 6]> и <![endif]<!—> которые как бы говорят браузеру: «Дружище, ты, верно, браузер IE, еще и позднее 6-й версии, будь добр, загрузи стили!» :) И он покорно слушается и загружает стиль со свойством margin-top, параметром которого является expression — специальная конструкция, благодаря которой полноценные javascript—выражения можно писать прямо в CSS—файле.
Все еще сомневаетесь? Тогда смотрите демо :)
Уверен, даже, что проблема отображения появилась в одном единственном «всеми любимом» браузере — Internet Explorer. Ох уж этот IE, вечно не дает покоя :)
Решение данной незадачи не такое уж и сложное. Ниже приведен пример выравнивания текста как по горизонтали так и по вертикали относительно страницы:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows-1251">
<title>Выравнивание сайта по центру страницы</title>
<style>
html, body {
height: 100%;
width: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
text-align:center;
}
#container {
margin: 0 auto;
text-align: center;
}
</style>
<!--[if gt IE 6]>
<style>
#container {
margin-top: expression( this . parentNode . offsetHeight > this . offsetHeight ?(( this . parentNode . offsetHeight-this . offsetHeight ) / 2 + "px" ) : "0" );
}
</style>
<![endif]<!-->
</head>
<body>
<div id="container">
Этот текст выровнен по центру относительно всей страницы
</div>
</body>
</html>Для html и body переданы свойства ширины и высоты с параметрами 100% для того чтобы охватить всю область страницы.
Отдельно для html добавляем display: table; говорящий, что див является таблицей подобно использованию тега <table>, плюс прописываем для body свойства, указывающие что элемент представляет собой ячейку таблицы с вертикальным и горизонтальным выравниванием по середине.
Далее идет элемент container с позиционированием по середине.
А теперь важная часть! Пишем хак для браузера IE между условными комментариями <!<!—[if gt IE 6]> и <![endif]<!—> которые как бы говорят браузеру: «Дружище, ты, верно, браузер IE, еще и позднее 6-й версии, будь добр, загрузи стили!» :) И он покорно слушается и загружает стиль со свойством margin-top, параметром которого является expression — специальная конструкция, благодаря которой полноценные javascript—выражения можно писать прямо в CSS—файле.
Все еще сомневаетесь? Тогда смотрите демо :)
20 февраля 2010, 14:48
Прижимаем футер к низу экрана
Иногда случается такое, что контента на странице мало и футер находится где-нибудь в середине экрана, что, согласитесь, не красиво. Но это можно исправить...
Итак, принцип верстки состоит в следующем: если вы верстаете, помещая все блоки в один общий контейнер, то футер нужно вынести за пределы этого контейнера, предварительно создав внизу основного контейнера место под этот футер с высотой равной высоте подвала. А потом придаем подвалу отрицательную высоту.
Разберем это все на примере. Ниже представлен код html страницы:
Здесь мы видим двух-колоночный сайт, где header — это шапка сайта, leftside — основной контент, rightside — правая панелька, clearfloat — так называемая «очистка» от всякого хлама, empty — зарезервированное место под наш футер и footer — наш подвал.
Далее подключаем CSS файл со следующим содержимым:
Итак, принцип верстки состоит в следующем: если вы верстаете, помещая все блоки в один общий контейнер, то футер нужно вынести за пределы этого контейнера, предварительно создав внизу основного контейнера место под этот футер с высотой равной высоте подвала. А потом придаем подвалу отрицательную высоту.
Разберем это все на примере. Ниже представлен код html страницы:
<html>
<body>
<div id="container">
<div id="header"></div>
<div id="leftside"></div>
<div id="rightside"></div>
<div class="clearfloat"></div>
<div class="empty"></div>
</div>
<div id="footer"></div>
</body>
</html>Здесь мы видим двух-колоночный сайт, где header — это шапка сайта, leftside — основной контент, rightside — правая панелька, clearfloat — так называемая «очистка» от всякого хлама, empty — зарезервированное место под наш футер и footer — наш подвал.
Далее подключаем CSS файл со следующим содержимым:
html, body {
width: 100%;
height: 100%;
}
* html #container {
height: 100%;
}
body {
background: #FFF;
color: #333;
}
#container {
position: relative;
margin: 0 auto;
width: 960px;
min-height: 100%;
}
.clearfloat {
clear: both;
}
.empty {
height: 50px;
}
#footer {
position: relative;
margin: -50px auto 0;
width: 960px;
height: 50px;
background: #333;
color: #ccc;
font-size: .9em;
}26 декабря 2009, 21:05
Блочная верстка трехколоночного сайта
Сверстать сайт состоящий из двух колонок не сложно, трудности возникают при верстке трех-колоночного сайта. В свое время я столкнулся с такой проблемой и расскажу как ее легко решить.
Следующий способ реализует дивную вложенность таким образом, что сначала идет центральная часть сайта, а затем боковые панели. Это дает дополнительное преимущество при индексации сайта поисковыми роботами.
Создаем файл index.html со следующим содержимым:
Теперь создаем в той же папке файл стилей style.css:
В итоге, у нас получился трёх-колоночный шаблон дизайна странички с идеальным SEO-дизайном. Именно такую страничку поисковики ценят более других.
Следующий способ реализует дивную вложенность таким образом, что сначала идет центральная часть сайта, а затем боковые панели. Это дает дополнительное преимущество при индексации сайта поисковыми роботами.
Создаем файл index.html со следующим содержимым:
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Блочная верстка трехколоночного сайта</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="all">
<div class="header">
Header - верхний блок странички
</div>
<div class="center">
Center - центральный блок. Здесь выводится основной контент
</div>
<div class="left">
Left - левая колонки. Навигация
</div>
<div class="right">
Right - правая колонка. Реклама
</div>
<div class="footer">
Footer - низ. Здесь обычно копирайт
</div>
</div>
</body>
</html>Теперь создаем в той же папке файл стилей style.css:
.all {
margin: auto;
padding: 5px;
width: 900px;
border: 1px solid #666;
text-align: center;
}
.header {
margin: 0 0 5px 0;
padding: 5px;
border: 1px solid #666;
}
.center {
position: inherit;
float: left;
margin: 0 0 0 210px;
width: 480px;
min-height: 600px;
border: 1px solid #666;
}
.left {
float:left;
margin: 0 0 5px -692px;
width: 200px;
min-height: 600px;
border: 1px solid #666;
}
.right {
float: right;
margin: 0 0 5px 0;
width: 200px;
min-height: 600px;
border: 1px solid #666;
}
.footer {
clear: both;
padding: 5px;
border: 1px solid #666;
}В итоге, у нас получился трёх-колоночный шаблон дизайна странички с идеальным SEO-дизайном. Именно такую страничку поисковики ценят более других.
