Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?
Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация
Компьютерный форум Ru.Board » Интернет » Графика » Верстка XHTML слоями

Модерирует : Ausw

 Версия для печати • Подписаться • Добавить в закладки

Открыть новую тему     Написать ответ в эту тему

tr3m0r

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Использовал массу решений с htmlbook.ru и прочих ресурсов.
Отчего-то не срабатывают эти хаки.
Задача: нужно привязать "подвал" книзу страницы.
Помогите.
 
структура:

Код:
<body>
<div id="page-all">
     <div id="content"></div>
     <div id="blk_l"></div>
     <div id="blk_r"></div>
</div>
<div id="bottom"></div>
</body>

 
CSS:

Код:
#page-all {
   height:auto !important;
   position:relative;
   margin:0 auto;
   width:100%;
   min-height:100%;
   margin-bottom: -50px;
}
 
* html #page-all {
    height: 100%;
}
 
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
 
body {
    height:auto !important;
    height:100%;
        min-height:100%;
    margin: 0px 0px 0px 0px;
    position: relative;
}
 
.content {
    width: 50%;
    position: relative;
    top: 250px;
    margin-left: 25%;
}
 
.bottom {
    height: 50px;
    width: 100%;
    margin: 0px 0px 0px 0px;
    margin-bottom: -50px;
    bottom: 0px;
    clear: both;
}

 
а подвал все равно остается "где-то рядом", как та истина.
Всего записей: 29 | Зарегистр. 11-12-2006 | Отправлено: 15:01 20-05-2009
artreaktor



Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Есть. Вот пример - юзаю на нескольких сайтах:
 
<!--PAGE-->
<html>
<head>
<link type="text/css" rel="stylesheet" href="defaults.css">
</head>
<body>
<div id="pagebody">
  <div id="content">Содержание</div>
</div>
<div id="footer">Подвал</div>
</body>
</html>
 
 
<!--CSS-->
body {
  background-color:#3b3b3b;
}
#pagebody{
  background-color:red;
  top:0;
  position:relative;
  width:750px;
  left:50%;
  margin-left:-375px;
  min-height: 100%;
  height:auto !important;
  height:100%;
  padding-bottom:100px;
}
#content {
  top:130px;
  background-color:blue;
  width: 100%;
  position:relative;
}
#footer {
  background-color:orange;
  width:750px;
  left:50%;
  position:absolute;
  bottom:0;
  margin-left:-375px;
  height:65px;
}
Всего записей: 9 | Зарегистр. 20-05-2009 | Отправлено: 18:10 20-05-2009
Nike000



Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Есть. Вот пример - юзаю на нескольких сайтах:

 
не работает....
Всего записей: 248 | Зарегистр. 19-10-2006 | Отправлено: 18:42 20-05-2009
tr3m0r

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Все ребят, спасибо ))
"Дело было не в бобине..." ))
По тем же решениям, что до этого находил, переписал с нуля и наткнулся на то место, где намудрил. Со слоями перемудрил, вернее с их вложениями друг в друга.
Всего записей: 29 | Зарегистр. 11-12-2006 | Отправлено: 10:05 21-05-2009
artreaktor



Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Nike000, что именно не работает? у меня все работает... если есть ошибка, укажите ее.
tr3m0r, выкладывайте рабочую версию
Всего записей: 9 | Зарегистр. 20-05-2009 | Отправлено: 15:05 21-05-2009
tr3m0r

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
artreaktor

Код:
<!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">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<div id="content"><h1>Контент</h1></div>
<div id="footer">Подвал</div>
</body>
</html>

ЦСС:
html {
height: 100%;
}

body {
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
}

#content {
padding-bottom: 65px;
}

#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: silver;
}
Всего записей: 29 | Зарегистр. 11-12-2006 | Отправлено: 11:17 22-05-2009
artreaktor



Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
tr3m0r, спасибо! ваш код работает. единственное замечание - полоса прокрутки. она появляется даже не пустой странице.
Всего записей: 9 | Зарегистр. 20-05-2009 | Отправлено: 01:24 23-05-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
tr3m0r
извините, а при чем тут раздел Графика???


----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 02:29 23-05-2009
artreaktor



Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
И в Опере подвал не прилеплен
Всего записей: 9 | Зарегистр. 20-05-2009 | Отправлено: 02:58 23-05-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Определите понятие "подвал".. то есть внизу видимой части страницы и остается там при прокрутке?

Код:
<!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">
<head>
<style>
  #footer {
  margin: 0;
  position: absolute;
  bottom: 0px;
  left: 0;  
  width: 100%;
  height: 50px;
  background: silver;}
  body>#footer{position: fixed}  
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<div id="content"><h1>Контент</h1></div>
<div id="footer">Подвал</div>
</body>
</html>


----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 03:39 23-05-2009 | Исправлено: Cheery, 03:45 23-05-2009
tr3m0r

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
я, конечно, приношу свои извинения, но верстка и к разделу программирования не вполне имеет отношение, нет?
 
artreaktor
есть грешок. где-то намудрил, пока из своего кода копипастил. у самого работает без глюков в Opera 9.5-10, Ff3.0.1, IE7, посмотрел, то, что выше писал - да, есть смещение подвала, что-то с марджином видимо.
 
Cheery
в данном случае не "внизу видимой части страницы", а "внизу страницы", т.е. виден после всего контента, а не поверх. В вашем же коде он фиксирован, что было неприемлемо.
Всего записей: 29 | Зарегистр. 11-12-2006 | Отправлено: 14:27 25-05-2009
artreaktor



Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ждем 100% рабочий код...
Всего записей: 9 | Зарегистр. 20-05-2009 | Отправлено: 14:29 25-05-2009
tr3m0r

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Код:
<body>
<div id="content">контент</div>
<div id="footer"><h1>подвал</h1></div>
</body>

Стиль:
html {
    height: 100%;
    width: 100%;
}

body {
    height: auto !important;
    height: 100%;
    min-height: 100%;
    position: relative;
    font-size: 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0px 0px 0px 0px;
    background-color: #eaf1f1;
    width: 100%;
}

#content {
    padding-bottom: 75px;
    font-size: 12px;
    width: 100%;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    color: #FFFFFF;
    background-color: #81a983;
    height: 50px;
    width: 100%;
}


Есть глюк в 7ИЕ, но он не фатален
Всего записей: 29 | Зарегистр. 11-12-2006 | Отправлено: 17:00 26-05-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
tr3m0r

Цитата:
но верстка и к разделу программирования не вполне имеет отношение, нет?  

зато помощь вебмастеру имеет.
но вот графика - совсем нет!
ps:

Код:
<!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>
<style type="text/css">
html, body, #wrapper {
   min-height: 100%;
   width: 100%;
   }
html>body, html>body #wrapper {height: auto;}
html,body {margin:0;padding:0}
#header, #footer {background: #eee;}
#footer {position: absolute; bottom: 0; left: 0; width: 100%; height: 50px;}
#header {position: absolute; top: 0; left: 0; width: 100%; height: 50px;}
#wrapper {position: absolute}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header content</div>
<div id="footer">This is the new bottom bar</div>
content goes here
</div>
</body>
</html>

нет IE6, чтобы проверить

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 18:00 26-05-2009 | Исправлено: Cheery, 18:46 26-05-2009
tr3m0r

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Теперь новая проблема образовалась.
С дивом "контент" все ясно. По бокам два блока, позиционирование которых "абсолютное". Так вот, при условии того, что высота их содержимого превышает высоту содержимого блока "контент", подвал оказывается вновь посреди страницы, либо наоборот.
Всякие хаки и использование кучи дополнительного мусора в виде десятков классов-подклассов ну никак не устраивают.
Уж и не знаю, как решить эту задачу.
Всего записей: 29 | Зарегистр. 11-12-2006 | Отправлено: 21:22 27-05-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
tr3m0r

Цитата:
Теперь новая проблема образовалась.  

я же сказал уже.. в данном разделе такие "проблемы" не решаются!


----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:26 27-05-2009
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Графика » Верстка XHTML слоями


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru