VPF::Футер внизу окна браузера - Форум программистов

Addmin

Дата 26.8.2009, 06:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 803
Регистрация: 3.2.2006
Где: сослан в Сибирь

Репутация: нет
Всего: 15

Добрый день! Во время вёрстки (первый мой проект на CSS) столкнулся с проблемой футера. Вначале он никак не хотел прижиматься к низу, на своё положенное место. Я прочел, что простым bottom: 0 это не делается.

В интернете нашёл решение некоего Ryan Fait. Всё стало выглядеть славно при моём расширении 1280*1024. Однако при меньшем расширении и при длинном контенте он вплотную подползает к контенту:

CSS

Код


*{
    margin: 0px;
}

body,html
{
     background-color: #FFFFFF;
     margin: 0px;
     padding: 0px;
     height: 100%;
}
#header
{
 margin-top: 0px;
 width: 100%;
 height: 170px;
 background-image: url('./i/topback.gif');
 border-bottom: 1px dotted #e8e9e8;  

}
#headerlogo
{
    width: 629px;
    height: 163px;
    float: left;
}
#headerright
{
    margin-top: 0px;
    padding: 0px;
    float: right;
    width: 310px;
    height: 170px;
}
#headerrighttop
{
    float: right;
    padding: 0px;
    margin: 0px;
    position: relative;
    width: 273px;
    top: 20px;

}
#headerrightbottom
{
    float: right;
    padding: 0px;
    margin: 0px;
    position: relative;
    top: -10px;
    width: 290px;
}
#controlblock
{
    position: relative;
    float: left;
    width: 290px;
    top: 25px;
    height: 700px;

}
#searchblock
{
    position: relative;
    width: 290px;
    top: 50px;
    height: 30px;
}
#content
{
  height:auto !important;
  height:100%;
  min-height:100%;    
  float: left;
  padding-top: 20px;
  padding-left: 100px;
  width: 300px;
}


.wrapper {
     min-height: 700px;
     height: auto !important;
     height: 100%;
     margin: 0 auto -4em;
 }
 .footer, .push {
      height: 10px;
      border-top: 1px dotted #000000;
  }
#footerleft
{
    position: relative;
    top: 10px;
    width: 400px;
    float: left;
}

#footercenter
{
    width: 50%;
    float: left;
    text-align: center;
    position: relative;
    top: 25px;
}
#footerright
{
    position: relative;
    top: 10px;
    float: right;
    width: 75px;
}

XHTML-код страниц:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251;"/>
<title>**</title>
<link rel="stylesheet" type="text/css" href="./main.css" />
<script type="text/javascript" src="./app.js"></script>
</head>

<body>
<!--Header-->
<div class="wrapper">
<div id="header">
 <div id="headerlogo"><img src="./i/logoleft.png" alt="logoleft.png, 23257 bytes"/></div>
 <div id="headerright">
  <div id="headerrighttop"><img src="./i/topright.png" alt="topright.png, 1055 bytes"/>

   <img border="0" style="position: relative; top: -45px; left: 50px;" src="./i/homeactive.png" alt="H" name="a1"/>

   <img border="0" style="position: relative; top: -45px; left: 90px;" src="./i/search.png" alt="S" name="a2"/>
   

   <img border="0" style="position: relative; top: -45px; left: 130px;" src="./i/mail.png" alt="M" name="a3"/>

   <img border="0" style="position: relative; top: -45px; left: 160px;" src="./i/map.png" alt="MAP" name="a4"/>
  </div>
  <div id="headerrightbottom"><img src="./i/bottomright.png" alt="bottomright.png, 5396 bytes"/></div>
 </div>
</div>

<div id="controlblock">

<img border="0" src="./i/mainactive.png" alt="main.png, 6911 bytes" name="a5"/>


<img border="0" src="./i/catalog.png" alt="catalog.png, 6920 bytes" name="a6"/>


<img border="0" name="a8" src="./i/calc.png" alt="calc.png, 8835 bytes"/>


<img border="0" name="a9" src="./i/delivery.png" alt="delivery.png, 9039 bytes"/>


<img border="0" name="a10" src="./i/contacts.png" alt="contacts.png, 9039 bytes"/>


<div id="searchblock"><img src="./i/searchform.png" alt="searchform.png, 3239 bytes"/><form style="position: relative; top: -35px; left: 60px;"><input type="text"/></form></div>
</div> 
<div id="content">There is som text</div>
</div>
<div class="footer">
 <div id="footerleft"><img src="./i/mailto.png" alt="mailto.png, 5132 bytes"/></div>
 <div id="footercenter"><font color="#808080" face="Verdana" style="font-size: 8pt; font-weight: normal; font-style: normal; letter-spacing: 0em">
 text in footer</font></div>
 <div id="footerright"><img src="./i/copy.png" alt="copy.png, 2282 bytes"/></div>
</div>

</body>
</html>

Я буду очень благодарен любому кто откликнется на проблему или укажет на любые другие ошибки в этом дизайне. Я в первый раз занялся этим делом, а потому не знаю ни одной тонкости smile

--------------------

SimpleFit.ru - блог о том, как заниматься спортом нормальным людям
--
Стимул работы в Сибири - комары.

bars80080

Дата 26.8.2009, 09:27 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

меня это решение всегда устраивало http://www.alexilin.ru/5-sovetov-po-html-i-css/

NetJunky

Дата 26.8.2009, 18:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 11.5.2008
Где: Tallinn

Репутация: нет
Всего: 0

Мне толи с похожей толи с такой же проблемой посоветовали http://www.cssstickyfooter.com/

Р.С. Пока не пробовал.

--------------------

Sleep, those little slices of death; Oh how I loathe them. © Edgar Allan Poe
Таллиннцы http://vingrad.ru/groups.php?action=group_...mp;group_id=139

Для записи данных объёмом 1 Терабайт на бумагу, нужно срубить 50000 деревьев.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »