Сегодня bosha попросил помочь ему сверстать шаблон для его блога, я не отказал. Задача была довольно проста, шапка, 2 столбца и липкий фоотер ( т.е. фоотер всегда внизу вне зависимости от количества контента ), ну и конечно же он не должен быть фиксированной ширины.
ВНИМАНИЕ.
Содержимое данной статьи морально устарело но сохранено для академических целей.
Я порыскал по закладкам и архиву веб сервера и нашел примерно то что надо, осталось только доделать. Конечный вариант смотрим под катом 😉
Итак, вот как это будет выглядеть:
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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>ssss</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">
header
</div>
<div id="side">
<div id="colum1">
colum 1
</div>
<div id="colum2">
colum 2
</div>
</div>
</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>Думаю что все просто и ничего не нужно описывать, самое интересное в CSS:
* {
margin:0 auto;
padding:0;
}
html, body, #wrap {
height: 100%;
}
body > #wrap {
height: auto;
min-height: 100%;
}
#wrap {
min-width: 1000px;
}
#main {
padding-bottom: 50px;
}
#header {
height: 50px;
background-color:#ADADAD;
margin-bottom: 5px;
}
#footer {
position: relative;
margin-top: -45px;
height: 45px;
clear:both;
background-color:#ADADAD;
min-width: 1000px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
#side {
margin: 0 auto;
width: 99%;
min-width: 1000px;
margin-bottom: 5px;
}
#colum1 {
float:left;
display:block;
position:relative;
width: 70%;
background-color: #CCCCCC;
}
#colum2 {
float:right;
display:block;
position:relative;
width: 29%;
min-width: 200px;
background-color: #CDCDCD;
}А вот CSS стоит немного расписать для наглядности.
- * — по умолчанию убирает все отступы, т.к. даже стандартный html без тегов имеет отступ
- html, body, #wrap — устанавливает для этих элементов 100% высоту, догадайтесь зачем?
Вроде вот все, больше никаких особенностей нету. Поэкспериментировав можно получить нужное количество колонок и их ширину, добавить меню и что ни будь еще. Все в ваших руках.
Добавить комментарий