Подвал

В подвале расположим свой емайл и символ копирайт. Разнесем их по сторонам.

      <div id="pg-footer">
        <div>Мой емайл: info@arul.ru</div>
        <div>Copyright &copy; 2013</div>
      </div>

В дальнейшем я буду называть DIV с атрибутом id="pg-footer" просто pg-footer.
 
C_o p y r i gh t a r u l . r u
Для того, чтобы два внутренних DIV разнести по сторонам, используем следующий прием. Элементу pg-footer присвоим стиль position: relative, который означает, что позиция элемента задается с помощью
стилей left и top относительно его исходного места.
При этом позиция внутренних элементов со стилями position: absolute задается относительно родителя.
Левому элементу присвоим left: 10px. Правому — right: 10px.
И одновременно обоим — position: absolute; top: 10px;

Для pg-footer зададим высоту height: 50px, чтобы подвал смотрелся не слишком сжато, и цвет фона такой же, как у шапки
background-color: #F8F8F8;

C_o p y r i gh t a r u l . r u
В результате подвал будет иметь такой код:

      <div id="pg-footer" style="position:relative; height:50px; background-color:#F8F8F8;">
        <div style="position:absolute; top:10px; left:10px;">Мой емайл: info@arul.ru</div>
        <div style="position:absolute; top:10px; right:10px;">Copyright &copy; 2013</div>
      </div>

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

И уже можно сейчас (а кто-то может это сделать в последнюю очередь) убрать рамки из стилей каркаса.
 
C_o p y r i gh t a r u l . r u
Код всего файла у вас должен получиться таким:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Мой сайт</title>
</head>

<body>
  <div style="text-align:center;">
    <div style="display:inline-block; text-align:left; width:800px;">
     <div id="pg-title" style="font:bold 36px serif; padding:40px 50px; background:url(flowers_bg.jpg) no-repeat center right #F8F8F8;">Мой сайт</div>
     <hr />
     <hr />
     <div id="pg-footer" style="position:relative; height:50px; background-color:#F8F8F8;">
        <div style="position:absolute; top:10px; left:10px;">Мой емайл: info@arul.ru</div>
        <div style="position:absolute; top:10px; right:10px;">Copyright &copy; 2013</div>
      </div>
    </div>
  </div>
</body>

</html>

Файл mysite3.html

C_o p y r i gh t a r u l . r u

 

  •  
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Оставить комментарий