sarcodin
Эксперт
Дата регистрации:
30.09.2011 00:53:49
Сообщений: 128
почему так происходит
у меня на сайт написана статья маленькая справа прокрутки сайта нет, у меня футер на середине, а когда делаешь статью чтобы прокрутка была футер внизу как сделать чтобы футер был всегда внизу?
вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" />
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<title>Создание и заработок на своем сайте</title>
</head>
<body>
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
<div id="wrap">
<div id="upmenu">
<a class="url_start" href="index.html" title="Главная страница">Главная</a>
<a href="registr.html" title="Регистрация на сайте">Регистрация</a>
<a href="author.html" title="Об авторе">Об авторе</a>
<a href="support.html" title="Техподдержка">Техподдержка</a>
</div>
<div id="left">
<div id="block">
<div id="blocktitle">
Меню сайта
</div>
<div id="blockcontent">
<ul>
<li><a class="url_start" href="index.html" title="Главная страница">Главная</a></li>
<li><a href="registr.html" title="Регистрация на сайте">Регистрация</a></li>
<li><a href="earnings.html" title="Заработок">Заработок</a></li>
<li><a href="site.html" title="Создание сайта">Создание сайта</a></li>
</ul>
</div>
</div>
</div>
<div id="center">
<h1>Как заработать в интернете</h1>
<p>
Существует много способов заработка в интернете. На моем сайте вы сможете познакомиться с некоторыми из них.
Здесь же вы найдете пошаговую инструкцию, которая облегчит вам изучение материала.
</p>
</div>
<div id="clear">
</div>
</div>
<div id="footer">
Copyright © 2011. Все права защищены.
</div>
</body>
</html>
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Примерно так:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
html body {
height: 100%;
min-height: 100%;
position: relative;
}
#content {
padding-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0;
height: 80px;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
Аккуратно примените эту основу к своему HTML-коду и всё получится.
sarcodin
Эксперт
Дата регистрации:
30.09.2011 00:53:49
Сообщений: 128
Мне помогло это, но у меня футер не посередине. а в левом углу вот ссылка на мою проблему. http://otvet.mail.ru/question/67267841/
Заранее спасибо.
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Чтобы он был посередине, добавьте margin: 0 auto; к контейнеру с футером.
sarcodin
Эксперт
Дата регистрации:
30.09.2011 00:53:49
Сообщений: 128
Может вы найдете ошибку
/* Css Document */
body{
margin: 0px;
padding: 0px;
background: #F5F5F5;
font-family: Arial,Helvetica,sans-serif;
font-size: 80%;
}
html {
height: 100%;
}
ul, li{
display: block;
margin: 0px;
padding: 0px;
}
/* Wrap */
div#wrap{
width: 900px;
height: 100%;
margin: 0 auto;
}
/* Header */
div#header img{
display: block;
margin: 0 auto;
margin-bottom: 10px;
}
/* UpMenu */
div#upmenu{
background: url("images/upmenu.png" no-repeat;
margin: 0 auto;
margin-bottom: 10px;
width: 900px;
height: 50px;
}
div#upmenu a{
float: left;
line-height: 50px;
text-decoration: none;
margin: 0 10px 0 10px;
color: #fff;
}
div#upmenu a.url_start{
margin-left: 50px;
}
div#upmenu a:hover{
color: #cccaca;
}
/* Container */
div#left{
float: left;
margin-left: 20px;
}
div#block{
background: #cccaca;
width: 200px;
}
div#blocktitle{
background: #f5f5f5;
width: 198px;
height: 23px;
border-left: solid #cccaca 1px;
border-right: solid #cccaca 1px;
border-top: solid #cccaca 1px;
text-align: center;
padding-top: 6px;
color: #cccaca;
}
div#blockcontent{
width: 200px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 5px;
}
div#blockcontent a{
text-decoration: none;
color: #000;
}
div#blockcontent a:hover{
background: #fff;
width: 200px;
}
/* Center */
div#center{
float: right;
width: 650px;
height: 100%;
margin-right: 20px;
text-align: center;
}
/* Clear */
div#clear{
clear: both;
}
/* Footer */
div#footer{
background: url("images/footer.png" no-repeat;
width: 900px;
height: 34px;
margin: 0 auto;
margin-top: 50px;
text-align: center;
padding-top: 16px;
}
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
html body {
height: 100%;
min-height: 100%;
position: relative;
}
#center{
padding-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0;
height: 80px;
margin: 0 auto;
}