HTML - Урок 7: Начинаем верстать шаблон - HTML верстка (Часть 2)

HTML - Урок 7: Начинаем верстать шаблон - HTML верстка (Часть 2)

Продолжаю урок под номером 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.
Автор: Zed от 2013-11-07 13:14:42   Просмотров: 3021

Теги: html верстка шаблоны уроки шаблон сайтов вебмастеру