Правильная верстка I: Каркас страницы

26 Дек
2011

Я много раз встречал такое — заходишь на сайт, поражаешься великолепному дизайну, удачной концепции и уровню юзабилити, но стоит поиграть масштабом страницы, подёргать за края браузера, меняя размеры окна, как страница рассыпается на глазах, превращаясь в нечто бесформенное. Итак, целую серию статей я хотел бы посветить грамотной вёрстке страниц, а так же разработке юзабильных виджетов, отвечающих современным требованиям к профессиональным сайтам.

Сегодня я расскажу, как сверстать «резиновую» страницу, которая правильно растягивается не только по горизонтали но и по вертикали. Когда страница не наполнена контентом, футер все равно должен быть на своём месте. Большинство страниц я начинаю верстать используя следующий шаблон:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Шаблон страницы</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="page-wrap">
        <div id="page">
            <div id="body">
                <div id="header">
                    <!-- шапка -->
                </div>
                <div id="content">
                    <div id="content-block">
                        <!-- контент -->
                    </div>
                </div>
            </div>
            <div id="footer">
                <!-- футер -->
            </div>
        </div>
    </div>
</body>
</html>

А вот примерные стили:

html {
    /* это для того, чтобы страница не дёргалась
    при переходе между полными и пустыми страницами */
    overflow: scroll;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#page-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#page {
    max-width: 1100px;
    min-width: 850px;
    height: 100%;
    margin: 0 auto;
    padding: 0 30px;
}

#body {
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: #dddddd;
}

#header {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    background-color: #00ff00;
}

#content {
    width: 100%;
    margin: 0;
    padding: 0 0 40px; /* отступ снизу на высоту футера */
}

#content-block {
    margin: 15px;
}

#footer {
    width: 100%;
    height: 40px;
    margin: -40px 0 0; /* отрицательный отступ сверху на высоту футера */
    padding: 0;
    background-color: #ff0000;
}

Я специально подкрасил все части страницы разными цветами, чтоб вы смогли посмотреть как ведёт себя подобная вёрстка в агрессивных условиях. При заполнении страницы, содержимое сдвинет футер, как нужно. Это решение абсолютно кроссбраузерно. Отталкиваясь от этого шаблона можно сверстать страницы почти любой сложности.

А в следующий раз я расскажу, как сверстать кроссбраузерные диалоговые окна.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх