Создание шаблона сайта с помощью блоков


В этом уроке я продолжу тему начатую в уроке "Создаем шаблон сайта с помощью таблиц" и обращусь к созданию шаблона сайта с помощью блоков.

Ранее в статьях "Абсолютное и относительное позиционирование элементов на странице ", "Создание двух колонок с помощью отступов и слоев", "Абсолютное позиционирование слоя на веб-странице" я так или иначе обращался к блочной верстке, суть которой заключается в том, что базовый шаблон (каркас) страницы формируется из блоков, в качестве которых выступают HTML теги div. С помощью стилей эти блоки позиционируются на странице формируя шаблон сайта, который уже затем наполняют содержимым.

А блок в свою очередь — это обычная прямоугольная область, которая имеет ряд свойств CSS, таких как border, margin и padding Содержимым же блока блока может быть что угодно — текст, изображение, меню...

Блоки — это элементы располагающиеся в потоке следования на странице вертикально. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как обтекание - float.

Свойство float может принимать следующие значения:

  • - left – выравнивает элемент по левому краю;
  • - right - выравнивает элемент по правому краю;
  • - inherit – использует стиль выравнивания, как у родительского элемента;
  • - none – без выравнивания.

А если нам нужно запретить обтекание, тогда используется свойство clear:

  • - left – отменяет обтекание слева;
  • - right - отменяет обтекание справа;
  • - inherit – отменяет обтекание, которое было у родительского элемента;
  • - none – без обтекания;
  • - both – отменяет любое выравнивание.

Наш шаблон сайта будет состоять из:

  • - div с id="main" – основной блок. Он является контейнером для всех остальных блоков;
  • - div с id="header" – шапка сайта, в которой будет располагаться заголовок сайта с горизонтальной навигацией;
  • - div с id="content" – блок, в котором будет располагаться основное содержимое страницы;
  • - div с id="sideRight" – правый блок. В нем я так же расположу навигацию, но уже вертикальную;
  • - div с id="footеr" – подвал, в нем будет расположена авторская информация.

Для этого создадим четыре блока div:

<div id="main">
  <div id="header">
  <!-- #header-->
  </div>
  <div id="content">
  <!-- #content-->
  </div>
  <div id="sideright">
  <!--#sideRight -->
  </div>
  <div id="footer">
  <!-- #footer -->
  </div>
</div>

Сказано — сделано! Помещаем в блоки информацию:

Свернуть код:
<div id="main">
 <div id="header">
  <div class="menu" >
    <h1>Хочу веб-сайт</h1>
    <ul >
    <li><a href="">Главная</a></li>
    <li ><a href="">Обучение</a></li>
    <li ><a href="" >О нас</a></li>
    </ul>
  </div>
 </div><!-- #header-->

 <div id="content">
    &nbsp;&nbsp;&nbsp;&nbsp; Каждому пользователю интернета
    рано или поздно наверняка приходила в голову мысль:
    <strong >«Хочу веб-сайт!»</strong>.
    Что ж,хочу вам сообщить что ничего невозможного в этом нет!<br /> 
    &nbsp;&nbsp;&nbsp;&nbsp;Этот сайт создан специально для тех, кто хочет
    претворить это желание в жизнь.<br />   
    &nbsp;&nbsp;&nbsp;&nbsp;Я постараюсь собрать здесь советы и рекомендации по созданию сайта с нуля,
    строительству сайта из кирпичиков - как дома.<br /> 
 </div><!-- #content-->
 <div id="sideright">
    <p>Навигация</p>
    <div>
    <a href="">Главная</a>
    <a href="">Обучение</a>
    <a href="">О нас</a>   
</div>
 </div><!--#sideRight -->
 <div id="footer">©Сергей Зарубин 2011г.
 </div><!-- #footer -->
</div><!-- #main -->

Результат:

Создание шаблона сайта с помощью блоков-1

Чтобы удобнее было ориентироваться, зададим цвет и размер для каждого блока с помощью стилей:

#main{
    background-color:#fff;
    margin:0 auto;
    width:600px;
}
#header {
    height:70px;
    background-color: #cc5050;           
}
#content{
    background-color:#50cc50;
    width:400px;
    float:left;
}
#sideright{
    background-color:#5050cc;
    width:200px;
}
#footer{
    background-color:#FFFF00;
Создание шаблона сайта с помощью блоков-1

Как видим стало еще хуже. Наша страница развалилась. Хотя если подумать, то все правильно! Из за того, что я задал размеры блокам, все что не поместилось в блок вышло за его пределы.

Сейчас мы все это поправим с помощью стилей. Для того, чтобы расположить блоки как и было задумано, я воспользовался свойством float:left для блока div с id="content" и блока div с id="sideRight". То есть для этих блоков я задал выравнивание по левому краю.

#content{
    background-color:#50cc50;
    width:400px;
    float:left;
}
#sideright{
    background-color:#5050cc;
    width:200px;
    float:left;
}

А для блока div с id="footer" я сначала отменил выравнивание относительно предыдуших блоков clear:both, а затем задал ему свойство float:left для собственного выравнивания. Ну и в завершении добавил ему свойство width:100% – чтобы он занял всю ширину основного блока div с id="main".

#footer{
    background-color:#FFFF00;
    clear:both;
    float:left;
    width:100%;
}

В завершении, для того чтобы скрыть то что блоки не равной высоты, я воспользовался одним из вариантов решения данной проблемы. А именно я задал отступы снизу для блоков div с id="content" и блока div с id="sideRight"

    padding-bottom:32000px;
    margin-bottom:-32000px;

Ну и наконец, чтобы скрыть отступ вниз без содержимого блоков у основоного блока div с id="main" я задал ему свойство

    overflow:hidden;

Не забыл я, конечно, добавить стилей и для правильного отображения содержания страницы

Вот что у меня получилось в итоге:

Создание шаблона сайта с помощью блоков-3

В итоге мы получили то что и было нужно. Код очень простой и легко читается.

Полностью код нашей программы:

Свернуть код:
<div id="main">
 <div id="header">
  <div class="menu" >
    <h1>Хочу веб-сайт</h1>
    <ul >
    <li><a href="">Главная</a></li>
    <li ><a href="">Обучение</a></li>
    <li ><a href="" >О нас</a></li>
    </ul>
  </div>
 </div><!-- #header-->
 
 <div id="content">
    &nbsp;&nbsp;&nbsp;&nbsp; Каждому пользователю интернета 
    рано или поздно наверняка приходила в голову мысль: 
    <strong >«Хочу веб-сайт!»</strong>.
    Что ж,хочу вам сообщить что ничего невозможного в этом нет!<br />  
    &nbsp;&nbsp;&nbsp;&nbsp;Этот сайт создан специально для тех, кто хочет 
    претворить это желание в жизнь.<br />
    &nbsp;&nbsp;&nbsp;&nbsp;Я постараюсь собрать здесь советы и рекомендации по созданию сайта с нуля, 
    строительству сайта из кирпичиков - как дома.<br />  
 </div><!-- #content-->
 <div id="sideright">
    <p class="title">Навигация</p>
    <div class="coolmenu">
    <a href="">Главная</a>
    <a href="">Обучение</a>
    <a href="">О нас</a>     
</div>
 </div><!--#sideRight -->
 <div id="footer">©Сергей Зарубин 2011г.
 </div><!-- #footer -->
</div><!-- #main -->

Таблица стилей:

Свернуть код:
* {
    margin: 0;
    padding: 0;
}
table {
    border-collapse:collapse
}
#main{
    background-color:#fff;
    width:600px;
    margin:0 auto;
    overflow:hidden;
}
#header {
    height:70px;
    background-color: #cc5050;
    text-align:center;           
}
#content{
    background-color:#50cc50;
    padding:5px;
    width:400px;
    float:left;
    padding-bottom:32000px;
    margin-bottom:-32000px;
}
#sideright{
    background-color:#5050cc;
    width:190px;
    float:left;
    padding-bottom:32000px;
    margin-bottom:-32000px;     
}
#footer{
    background-color:#FFFF00;
    padding:5px;
    clear:both;
    float:left;
    width:100%;
    text-align:center;
}
#header  li {
    list-style: none;
    display: inline;
    padding: 10px 20px 0px 10px;
}
#header li a {
    padding:3px;    /*Поля вокруг надписей основного меню*/
    text-decoration: none;
    color: #000;    /* цвет текста*/
   
}
#header li a:hover {
    text-decoration: none;
    padding:3px;    /*Поля вокруг надписей основного меню*/
    text-decoration: none;
    color:red;    /* цвет текста*/
}
#header H1 {
    font-family:  Times, Tahoma, Arial,Verdana, sans-serif; 
}
.title {
    text-align: center;
}
.coolmenu {   
    text-align: center;    
}
.coolmenu a {
    font: bold 13px Verdana;    /*Шрифт текста*/
    padding: 2px;
    padding-left: 4px;
    display: block;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px dotted #d0d0d0;
}
.coolmenu a:hover {
    background-color: #cccccc;
    color: #000000;   
    color: red; /*Цвет текста при наведении курсора*/
    text-decoration: none;
}

Разобраться же со стилевым оформлением горизонтального и вертикального меню, я предлагаю вам самостоятельно. Если у вас возникнут вопросы – пишите, с удовольствием на них отвечу.

Автор: Сергей Зарубин

Дата: 2011-06-07

Колличество просмотров: 26814

Нравится

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

Комментарий добавил(а): Александр
Дата: 2011-07-25

А молодец! Столь рыскал в поисках варианта для выравнивания блоков по низу а тут одним махом и не замысловато. Сразу и воспользовался, спасибо! Александр

Комментарий добавил(а): Сергей Зарубин
Дата: 2011-07-25

Спасибо. К слову сказать, у меня накопилось уже довольно много таких вот простых но нестандартных решений, как говорится одной строкой. Так что я подумываю завести отдельный раздел сайта для их публикации.

Комментарий добавил(а): Александр
Дата: 2012-11-23

а как мне сделать что бы весь контент был в блоке?

Комментарий добавил(а): Ирина
Дата: 2014-07-14

Как прописать заголовок и логотип а одной строке????

Комментарий добавил(а): nElenaSn
Дата: 2017-06-05

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > www.oplata-vklike.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): segorSn
Дата: 2017-06-06

Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.

Мы предоставляем:

- Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.

Оплата от 5500 в день. Выплаты ежедневно.

Более подробная информация на нашем сайте >> obrabotka.zarplatt.ru <<

Комментарий добавил(а): tElenaSn
Дата: 2017-06-07

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): vegorSn
Дата: 2017-06-07

Уникальный сервис помощи получения кредита от частного инвестора, а так же кредитных организаций. Подходит как компаниям, так и частным лицам.

Займ от частного инвестора.

Наша компания помогает встретиться инвестору и заёмщику.

Прямой контакт с инвестором
Любая кредитная история
Нужен только паспорт
Работаем с частными лицами и фирмами
Любой регион
Сумма от 5,000 до 50,000,000 руб
Процент одобрения 97%

Преимущества:

- Без залога и поручительства!
- Ставка - всего от 1% в месяц!
- Без скрытых платежей и комиссий!

Оформите заявку у нас на сайте. > www.ch-investor.tk <

Комментарий добавил(а): qegorSn
Дата: 2017-06-10

Ведущая компания в России и странах СНГ по продаже авиабилетов «Airline»

Крупнейшая международная компания по продаже А/В билетов
срочно набирает сотрудников на постоянную основу для несложной
работы через интернет, с ежедневными выплатами до 11 000 руб.

Работая в нашей компании Вы получаете:

- Соблюдение трудового кодекса
- Полный соцпакет, оплачиваемый отпуск, больничный, санаторий.
- Каждый наш сотрудник на дому гарантированно получает высокий доход. руб. в день.
- Гарантированные стабильные выплаты заработанных денег.
- Выплаты происходят ежедневно на банковские карты или электронные кошельки.

Пройдите регистрацию на нашем сайте. > www.Airline-Rabota.tk <

Без вложений, опыт и профессиональные навыки не требуются!

Комментарий добавил(а): tElenaSn
Дата: 2017-06-13

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > oplata-vklike.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): vElenaSn
Дата: 2017-07-22

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): sElenaSn
Дата: 2017-08-26

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > oplata-vklike.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): nalinaSn
Дата: 2017-08-28

Уникальный сервис помощи получения кредита от частного инвестора, а так же кредитных организаций. Подходит как компаниям, так и частным лицам.

Займ от частного инвестора.

Наша компания помогает встретиться инвестору и заёмщику.

Прямой контакт с инвестором
Любая кредитная история
Нужен только паспорт
Работаем с частными лицами и фирмами
Любой регион
Сумма от 5,000 до 50,000,000 руб
Процент одобрения 97%

Преимущества:

- Без залога и поручительства!
- Ставка - всего от 1% в месяц!
- Без скрытых платежей и комиссий!

Оформите заявку у нас на сайте. > www.ch-investor.tk <

Комментарий добавил(а): SVeraSn
Дата: 2017-09-02

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > http://vkapi-likes.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): mElenaSn
Дата: 2017-09-21

Платим за лайки! - Оплата по требованию!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
Вам достаточно просто зарегистрироваться на нашем сервисе. > oplata-vklike.tk <
Вывод заработанных средств ежедневно в течении нескольких минут.



Добавить новый комментарий


Введите число с картинки:

captcha