Помогите с "подвалом" на сайте.

LBM · April 15, 2012

Намучился уже... ничего не выходит, перепробывал все варианты из ТОП 10 Гугла :facepalmxd:

Надо просто поместить подвал внизу страницы. Помогите! Могу отблагодарить за рабочий вариант :rolleyes:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ведение бухгалтерского и налогового учета  белорусских и российских предприятий</title>
<link href="http://tutbuch.by/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="site">

<div id="green">

<div id="head">

<div id="head1">
</div>
<div id="head2">

<div id="menu">

</div>

</div>
<div id="head3">
</div>

</div>

</div>

<div id="content">

<div id="back1">
</div>
<div id="center">

<div id="menu2">

</div>

<div id="text">

</div>

<div id="sidebar">

</div>

</div>
<div id="back2">
</div>


</div>

</div>

<div id="footer">
Подвал
</div>

</body>

</html>


    html, body {
    background: #f1f1f1;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
   } 

   p, ul, li{
    font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */ 
    font-size: 11pt; /* Размер шрифта в пунктах */
	margin-top: 0.3em; /* Отступ сверху */
    margin-bottom: 0.3em; /* Отступ снизу */
	}

   ul.menu {
    margin-right: 50px;
    padding: 4px; /* Значение полей */
	text-transform: uppercase; /* Заглавные буквы */
	font-size: 15pt; /* Размер шрифта в пунктах */
	color: #fff; /* Цвет символа */
   }

   ul.menu li {
    display: inline; /* Отображать как строчный элемент */
    margin-right: 5px; /* Отступ слева */
    padding: 3px; /* Поля вокруг текста */
	text-transform: uppercase; /* Заглавные буквы */
	font-size: 14pt; /* Размер шрифта в пунктах */
	color: #fff; /* Цвет символа */
   }

	h1, h2, h3, h4, h5, h6{
    font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */ 
    font-size: 14pt; /* Размер шрифта в пунктах */
	margin-top: 0.3em; /* Отступ сверху */
    margin-bottom: 0.3em; /* Отступ снизу */
	margin-left: 2em; /* Отступ снизу */
	}

#site {
    position: relative;
    min-height: 100%;
   }

* html #site {
    height: 100%;   
	}

 #green {
    position: absolute; /* Абсолютное позиционирование */
    width: 100%; /* Ширина слоя в пикселах */
    height: 289px; /* Высота слоя в пикселах */
	top: 0%; /* Положение слоя от верхнего края */
	margin-top: -0px;	/* Отступ сверху */
	background-image: url(http://tutbuch.by/images/bg.jpg); /* Путь к фоновому изображению */
	background-repeat: repeat-x; /* Повторяем фон по горизонтали */
    z-index: 1;
   }

 #head {
    position: absolute; /* Абсолютное позиционирование */
    width: 1572px; /* Ширина слоя в пикселах */
    height: 289px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 0%; /* Положение слоя от верхнего края */
    margin-left: -786px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #85aa39; /* Цвет фона */
    z-index: 2;
   }

    #head1{
    position: absolute; /* Абсолютное позиционирование */
    width: 274px; /* Ширина слоя в пикселах */
    height: 289px; /* Высота слоя в пикселах */
    left: 0px; /* Положение слоя от левого края */
    top: 0px; /* Положение слоя от верхнего края */
    margin-left: -0px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #85aa39; /* Цвет фона */
	background-image: url(http://tutbuch.by/images/buch_01.jpg); /* Путь к фоновому изображению */
    z-index: 3;
   }

    #head2{
    position: absolute; /* Абсолютное позиционирование */
    width: 1024px; /* Ширина слоя в пикселах */
    height: 289px; /* Высота слоя в пикселах */
    left: 274px; /* Положение слоя от левого края */
    top: 0px; /* Положение слоя от верхнего края */
    margin-left: -0px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #85aa39; /* Цвет фона */
	background-image: url(http://tutbuch.by/images/buch_02.jpg); /* Путь к фоновому изображению */
    z-index: 3;
   }

    #head3{
    position: absolute; /* Абсолютное позиционирование */
    width: 274px; /* Ширина слоя в пикселах */
    height: 289px; /* Высота слоя в пикселах */
    left: 1298px; /* Положение слоя от левого края */
    top: 0px; /* Положение слоя от верхнего края */
    margin-left: -0px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #85aa39; /* Цвет фона */
	background-image: url(http://tutbuch.by/images/buch_03.jpg); /* Путь к фоновому изображению */
    z-index: 3;
   }

    #menu{
    position: absolute; /* Абсолютное позиционирование */
    width: 100%; /* Ширина слоя в пикселах */
    height: 50px; /* Высота слоя в пикселах */
    left: 0px; /* Положение слоя от левого края */
    top: 239px; /* Положение слоя от верхнего края */
	text-align: right;
    z-index: 4;
   }

    #content{
    position: absolute; /* Абсолютное позиционирование */
    width: 1030px; /* Ширина слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 289px; /* Положение слоя от верхнего края */
    margin-left: -515px; /* Отступ слева */
    background: #f1f1f1; /* Цвет фона */
    z-index: 4;
   }

    #back1{
    position: absolute; /* Абсолютное позиционирование */
    width: 154px; /* Ширина слоя в пикселах */
	height:28px;
    left: 0px; /* Положение слоя от левого края */
    top: 0px; /* Положение слоя от верхнего края */
    margin-left: -0px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #f1f1f1; /* Цвет фона */
	background-image: url(http://tutbuch.by/images/buch_04.jpg); /* Путь к фоновому изображению */
	background-position: right top; /* Положение фона */
    background-repeat: no-repeat; 
    z-index: 3;
   }

    #center{
    position: absolute; /* Абсолютное позиционирование */
    width: 722px; /* Ширина слоя в пикселах */
    left: 154px; /* Положение слоя от левого края */
    top: 0px; /* Положение слоя от верхнего края */
    margin-left: -0px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #f1f1f1; /* Цвет фона */
    z-index: 3;
   }

    #back2{
    position: absolute; /* Абсолютное позиционирование */
    width: 154px; /* Ширина слоя в пикселах */
    left: 876px; /* Положение слоя от левого края */
    top: 0px; /* Положение слоя от верхнего края */
    margin-left: -0px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #f1f1f1; /* Цвет фона */
    z-index: 3;
   }

    #menu2{
    position: absolute; /* Абсолютное позиционирование */
    width: 722px; /* Ширина слоя в пикселах */
    height: 193px; /* Высота слоя в пикселах */
    left: 0px; /* Положение слоя от левого края */
    top: 0px; /* Положение слоя от верхнего края */
    margin-left: -0px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #f1f1f1; /* Цвет фона */
    z-index: 4;
   }

    #text{
    position: absolute; /* Абсолютное позиционирование */
    width: 500px; /* Ширина слоя в пикселах */
    left: 0px; /* Положение слоя от левого края */
    top: 193px; /* Положение слоя от верхнего края */
    margin-left: -0px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #f1f1f1; /* Цвет фона */
	padding: 5px; /* Поля вокруг текста */
    z-index: 5;
   }

       #sidebar{
    position: absolute; /* Абсолютное позиционирование */
    width: 222px; /* Ширина слоя в пикселах */
    left: 500px; /* Положение слоя от левого края */
    top: 193px; /* Положение слоя от верхнего края */
    margin-left: -0px; /* Отступ слева */
    margin-top: -0px;	/* Отступ сверху */
    background: #f1f1f1; /* Цвет фона */
	padding: 5px; /* Поля вокруг текста */
    z-index: 4;
   }

      #footer{
    clear: both;
    position: relative;
    z-index: 10;
    height: 70px;
    margin-top: -70px;
   }

Sensei · April 16, 2012

Я чет не понял в чем проблема, у меня футер приклеен к низу :blink:

Hol1killer · April 16, 2012

у вас во всех блоков абсолютное позиционирование, лучше переделать верстку!! а то потом гемороя много будет!

Sign In

Помогите с "подвалом" на сайте.

Question

LBM

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Sensei

Link to comment

Share on other sites

Hol1killer

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information