Продолжаю урок под номером 7. В первой части мы придали блоку wrapper высоту 100% окна браузера. Теперь вернем на свое место ушедший за пределы footer, для этого передвинем его вверх на его высоту, и чтобы контент не заезжал под футер, установим ещё одну div-распорку space:
В файле стилей укажем размер отступа сверху у футера - margin-top (-100 пикселей):
#footer {
height:100px;margin-top:-100px;
} А также укажем стиль для блока space:
#space {
height:100px;
}Ну и как вы уже догадались в HTML код добавляем блок-распорку во внутрь контейнера после нашей распорки:
<div id="space"></div>HTML блочная верстка имеет небольшой недостаток - иногда приходится создавать всякие дополнительные блоки, подобные распорки.
В итоге у нас получились следующие стили:
html, body {
height:100%;
color: #000;
background: #FFFFFF;
word-wrap: break-word;
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
}
#wrapper {
height:auto !important;
height:100%;
min-height:100%;
}
#header {
height:100px;
}
#container {
min-width:800px;
}
#center {
margin:0px 200px 0px 200px;
}
#left {
float:left;
width:200px;
}
#right {
float:right;
width:200px;
}
#footer {
height:100px;
margin-top:-100px;
}
.clear {
clear:both;
}
#space {
height:100px;
} А в HTML получилось следующее:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ключевые, слова" />
<meta name="description" content="описание сайта" />
<title>название сайта</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
<div></div>
<div id="space"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>Скачать исходник шаблона: Lesson7.zip
Ну вот у нас и готов каркас html шаблона. В следующих статьях будем усовершенствовать наш шаблон и делать его красивым.
P.S. Если вы хотите купить телефон, то рассмотрите вариант, где продают китайские телефоны Samsung Galaxy.