Верстка и выравнивание страниц сайта.

02.11.2022 08:28

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

    Предположим, мы хотим сделать страницу такой структуры:

Наша страница состоит из четырех блоков: шапки (header), меню (menu), содержимого (content) и низа сайта (footer). Для выравнивания по центру страницы мы поместим эти четыре блока в один главный блок (main):
 
 <html>
   <head>
     <title>CSS выравнивание по центру страниц сайта</title>
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
     <div id="main">
       <div id="header">Шапка сайта</div>
       <div id="menu">Меню</div>
       <div id="content">Содержимое</div>
       <div id="footer">Низ сайта</div>
     </div>
   </body>
 </html>
     

    На примере этой структуры рассмотрим несколько вариантов.

 

Верстка и центрирование "резинового сайта"

 

    При верстке резинового сайта основной используемой единицей измерения является - %, ведь сайт должен растягиваться по ширине и занимать все свободное пространство.

    Следовательно, ширина блоков "header" и "footer" будет составлять 100% ширины экрана. Ширина блока "menu" пусть будет 30%, а блок "content" должен располагаться рядом с блоком "menu", т.е. он должен иметь левое поле (margin-left) шириной равной ширине блока "menu", т.е. 30%.

    Чтобы блоки "menu" и "content" располагались рядом, сделаем блок "menu" плавающим и прижмем его к левому краю. Также зададим цвета фона (background) для наших блоков. Теперь запишем все это в таблицу стилей (на странице style.css)

 
 
#header{
 background:#3e4982;
 width:100%;
 height:110px;
 text-align:center;
 color:#FFFFFF;
 font-size:24px;
 padding-top:40px;
}
#menu{
 background:#6173cb;
 float:left;
 width:30%;
 height:300px;
 text-align:center;
 color:#FFFFFF;
 font-size:18px;
 padding-top:10px;
}
#content{
 background:#ffffff;
 margin-left:30%;
 height:300px;
 text-align:center;
}
#footer{
 background:#3e4982;
 clear:both;
 width:100%;
 height:50px;
 text-align:center;
 color:#FFFFFF;
 font-size:14px;
 padding-top:10px;
}

     

    Высоту блоков задали условно, чтобы был виден результат. Посмотрите на нашу страницу в браузере:

    Если вы будете менять размеры окна браузера, то будет меняться ширина всех блоков. Это не всегда удобно, т.к. при растягивании блока меню возникает пустое место. Поэтому чаще ширину блока "menu" делают фиксированной, давайте и мы так сделаем. Для этого заменим в таблице стилей значения соответствующих свойств:

 
...
#menu{
 background:#6173cb;
 float:left;
 width:200px;
 height:300px;
}
#content{
 background:#ffffff;
 margin-left:200px;
 height:300px;
}
...
     

    Теперь наша страница растягивается более естественно. При резиновой верстке страницы занимают всю ширину экрана, поэтому выравнивание по центру страниц не требуется.

    Но если хочется можно сделать так, чтобы ваша страница имела равные отступы слева и справа экрана. Для этого надо добавить стиль блоку "main", который является контейнером для всех остальных блоков:

 
#main{
 margin-left:10%;
 margin-right:10%
}
...
     

Теперь наша страница выглядит так:

 
 

Верстка и центрирование сайта фиксированной ширины

 

    В этом случае нам придется задать фиксированные размеры наших блоков:

 
#main{
 width:800px;
}
#header{
 background:#3e4982;
 width:800px;
 height:150px;
 text-align:center;
 color:#FFFFFF;
 font-size:24px;
 padding-top:40px;
}
#menu{
 background:#6173cb;
 float:left;
 width:200px;
 height:300px;
 text-align:center;
 color:#FFFFFF;
 font-size:18px;
 padding-top:10px;
}
#content{
 background:#ffffff;
 margin-left:200px;
 height:300px;
 text-align:center;
}
#footer{
 background:#3e4982;
 clear:both;
 width:800px;
 height:50px;
 text-align:center;
 color:#FFFFFF;
 font-size:14px;
 padding-top:10px;
}
     

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

  •     Вспомним, что у нашей страницы есть тег "body", которому также можно задать ширину и какие-то отступы.
  •     Сделаем так: зададим тегу "body" ширину в 800 пикселов (как и у блока "main") и левый отступ (padding-left) в 50%. Тогда все содержимое блока "main" будет отображаться в правой части экрана (т.е. от середины вправо).
  •     Чтобы наш блок "main" располагался посередине экрана, надо чтобы его середина совпадала с серединой тега "body". Т.е. надо сместить блок "main" влево на половину своего размера. Ширина блока "main" - 800 пикселов, значит надо задать ему свойство "margin-left:-400px". Да, это свойство может принимать отрицательные значения, тогда левое поле уменьшается (т.е. сдвигается влево). 

    А именно это нам и нужно.

    Теперь таблица стилей выглядит так:

 
body{
width:800px;
padding-left:50%;
}
#main{
 width:800px;
 margin-left:-400px;
}
#header{
 background:#3e4982;
 width:800px;
 height:150px;
 text-align:center;
 color:#FFFFFF;
 font-size:24px;
 padding-top:40px;
}
#menu{
 background:#6173cb;
 float:left;
 width:200px;
 height:300px;
 text-align:center;
 color:#FFFFFF;
 font-size:18px;
 padding-top:10px;
}
#content{
 background:#ffffff;
 margin-left:200px;
 height:300px;
 text-align:center;
}
#footer{
 background:#3e4982;
 clear:both;
 width:800px;
 height:50px;
 text-align:center;
 color:#FFFFFF;
 font-size:14px;
 padding-top:10px;
}
     

    А наша страница в браузере располагается ровно посередине:

    Мы рассмотрели два варианта выравнивания по центру страниц сайта, на самом деле они не являются догмой. Вы можете поэкспериментировать и придумать свой вариант, только проверяйте его работу в разных браузерах. К сожалению, то что хорошо отображается в FireFox или Opera, может совершенно непонятно отображаться в IE и наоборот. И об этом надо помнить.

    Так же, если при плавающем блоке в браузере google не отображается последний блок (id=footer), например:

 

#footer{
background:black;
width: 700px;
height: 5%;
}
 

    допишите в #footer еще правило: 

 

float:both;
clear:both;

 

    Данные способы не являются исчерпывающим и представляет собой лишь обобщенный взгляд на некоторые технологии. Надеюсь, что все описанные в курсе способы будут полезны вам в изучении темы веб-дизайна и фронтенд разработки.

Назад