Вернуться   SEO форум - оптимизация и продвижение сайтов > Web разработки > Дизайн и верстка

Важная информация
Дизайн и верстка - Верстка: блочная, div, HTML... Дизайн, внешний вид сайта.

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 04.03.2012, 20:28   #1
 
Аватар для PVS
 
Сообщений: 32
FR (активность): 972

Доп. информация
По умолчанию Автор темы как прижать футер к низу страницы ?

имеется шаблон джумлы вот такой структуры:
не получается футер прижать к низу страницы
index.php :
[PHP]<body>
<div id="container">
<div id="header"><jdoc:include type="modules" name="top" /></div>
<div id="sidebar_left"class="float"><jdoc:include type="modules" name="left" /></div>
<div id="content"class="float"><jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"></div><jdoc:include type="modules" name="right" />
<div id=pusto></div>
<div id="footer">
<div id="footcontent">
<jdoc:include type="modules" name="footer" style="none" /></div>
</div>
</div>
</body>[/PHP]
css:
[HTML]#container {
width:960px;
margin: auto;
}
#header {
background-image:url(../img/h.jpg);
width:900px;
height:200px;
}
#content {
width: 650px;
text-align: center;

}
#sidebar_left {
text-align: center;
background-color:#CCCCCC;
width: 150px;
}

#sidebar_right {
text-align: center;
background-color:#CCCCCC;
width: 160px;
}

#pusto
{
width:900px;
height:250px;
}

#krolik-footer
{
background-image:url(../img/f.jpg);
width:900px;
height:100px;
margin-top:auto;
display:block;
margin-left:auto;
margin-right:auto;
}
#footcontent
{
position:absolute;
width:900px;
height:100px;
text-align: center;
margin-top:35px;
margin-left:50px;
}
[/HTML]

Был бы благодарен за помощь
Миниатюры
как прижать футер к низу страницы ?-bez-imeni-1.jpg  
PVS вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 04.03.2012, 20:34   #2
 
Аватар для terranodar
 
Сообщений: 410
FR (активность): 14,644

Доп. информация
По умолчанию

В смысле к низу окна браузера?
#footer {
position: fixed; bottom: 0;
}
PVS: сообщение полезно


Чтобы определить – писать глагол с -тся или -ться, спросите себя, на какой вопрос отвечает этот глагол – "что делать?" или "что делает?". Если в вопросе есть мягкий знак, значит он есть и в глаголе.
terranodar вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 04.03.2012, 20:38   #3
 
Аватар для PVS
 
Сообщений: 32
FR (активность): 972

Доп. информация
По умолчанию Автор темы

terranodar, спасибо, получилось, но проблемка возникла, часть контента заезджает под футер и его не видно...
PVS вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 04.03.2012, 21:06   #4
 
Аватар для terranodar
 
Сообщений: 410
FR (активность): 14,644

Доп. информация
По умолчанию

PVS, Больше ничем помочь не могу.


Чтобы определить – писать глагол с -тся или -ться, спросите себя, на какой вопрос отвечает этот глагол – "что делать?" или "что делает?". Если в вопросе есть мягкий знак, значит он есть и в глаголе.
terranodar вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 04.03.2012, 21:16   #5
 
Аватар для Rotgar Sett
 
Сообщений: 662
FR (активность): 26,062

Доп. информация
По умолчанию

[html]#footcontent {
position:absolute;
width:900px;
height:100px;
[/html]Попробуйте убрать строку height:100px;

Или я не правильно понял вопроса. Скрин бы увидеть.
Rotgar Sett вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 04.03.2012, 23:11   #6
 
Аватар для webmas
 
Сообщений: 490
FR (активность): 19,322

Доп. информация
По умолчанию

да, скрин бы не помешал. У вас в css вобще не прописан #footer. Если он не используется в разметке страницы, тогда его вобще лучше убрать.

И зачем
Цитата:
Сообщение от PVS Посмотреть сообщение
#footcontent { position:absolute;
я так думаю у вас текст футера изначально вобще поверх содержимого страницы отображается? Хотя z-index не прописан... Уберите position:absolute;

И дайте нормальный скрин, или ссылку на сайт если он не на локалке, а то так гадать приходиться.
webmas вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 04.03.2012, 23:44   #7
 
Аватар для PVS
 
Сообщений: 32
FR (активность): 972

Доп. информация
По умолчанию Автор темы

Rotgar Sett,
webmas, Поменял в скрине некоторые название див контейнеров, что бы не путать Вас, а в ксс не все сменил, в итоге путанина получилась со скринами но уже сам разобрался вроде бы разобрался сам
Цитата:
#content {
width: 650px;
text-align: center;
margin: 0 0 100px;
в контенте отступ на ширину футера добавил, не знаю, корректно это или нет но получилось)
PVS вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 05.03.2012, 00:08   #8
 
Аватар для Rotgar Sett
 
Сообщений: 662
FR (активность): 26,062

Доп. информация
По умолчанию

Цитата:
Сообщение от PVS Посмотреть сообщение
не знаю, корректно это или нет но получилось)
Это просто валидатором проверить. Я в плане корректности, кроме валидатора, больше ничего не признаю.
Rotgar Sett вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 05.03.2012, 00:13   #9
 
Аватар для PVS
 
Сообщений: 32
FR (активность): 972

Доп. информация
По умолчанию Автор темы

Еще один вопрос созрел, у меня футер же этот получился зафиксированным в низу окна браузера, а надо бы в конце контенте, в конце прокрутки прокрутки... вообщем вот полностью мой код без изменений:
index.php
Цитата:
<?php
/*
* @copyright Copyright (C) 2008 - 2009 All rights reserved.
* @license
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/krolik-th/css/template.css" type="text/css" />
</head>

<body>
<div id="krolik-container">
<div id="header"><jdoc:include type="modules" name="top" /></div>
<div id="sidebar_left"class="float"><jdoc:include type="modules" name="left" /></div>
<div id="content"class="float"><jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"></div><jdoc:include type="modules" name="right" />
<div id="krolik-footer">
<div id="krolik-footcontent">
<jdoc:include type="modules" name="footer" style="none" /></div>
</div>
</div>
</body>
</html>
css:
Цитата:
h1 {font-size:0.9em;line-height: 0.8em;font-weight: 900;color: #000;}
h2 {font-size:1.0em;line-height: 0.8em;font-weight: 900;color: #000;}
h3 {font-size:1.1em;line-height: 0.8em;font-weight: 900;color: #000;}
h4 {font-size:1.4em;line-height: 0.8em;font-weight: 900;color: #000;}
h5 {font-size:1.3em;line-height: 0.8em;font-weight: 900;color: #000;}
h6 {font-size:1.2em;line-height: 0.8em;font-weight: 900;color: #000;}

* {
padding: 0;
margin:0;
}
ul {
list-style:none;
}
.float {
float: left;
}
.clear {
clear: both;
}
#krolik-container {
width:960px;
margin: auto;
}
#header {
background-image:url(../krolik-img/krolik-h.jpg);
width:900px;
height:200px;
}
#content {
width: 650px;
text-align: center;
margin: 0 0 100px;

}
#sidebar_left {
text-align: center;
background-color:#CCCCCC;
width: 150px;
}

#sidebar_right {
text-align: center;
background-color:#CCCCCC;
width: 160px;
}



#krolik-footer
{
background-image:url(../krolik-img/krolik-f.jpg);
width:900px;
height:100px;
position: fixed;
bottom: 0;
margin-top:auto;
display:block;
margin-left:auto;
margin-right:auto;
}
#krolik-footcontent
{
width:900px;
height:100px;
text-align: center;
margin-top:35px;
margin-left:50px;
}
вот..
PVS вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 05.03.2012, 07:14   #10
 
Аватар для webmas
 
Сообщений: 490
FR (активность): 19,322

Доп. информация
По умолчанию

Уберите
Цитата:
Сообщение от PVS Посмотреть сообщение
position: fixed;
bottom: 0;
margin-top:auto;
display:block;
margin-left:auto;
margin-right:auto;
в футере
webmas вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 08.03.2012, 13:37   #11
 
Аватар для PVS
 
Сообщений: 32
FR (активность): 972

Доп. информация
По умолчанию Автор темы

webmas, так футер прижимается к верху страницы(вверху контента)
PVS вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 08.03.2012, 14:44   #12
 
Аватар для webmas
 
Сообщений: 490
FR (активность): 19,322

Доп. информация
По умолчанию

значит вы не весь код показали. Покажите сайт, так проще будет править
webmas вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Ответ

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции
Внимание!
Этой теме более 3723 дней. Вы можете оставить сообщение здесь. Но, обращаем внимание. Возможно, рациональней создать новую тему (найти свежее обсуждение)?


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Страницы-двойники Tongue Индексация сайта 7 26.07.2011 15:19
Код страницы botcman Раскрутка в общих чертах 13 23.06.2011 15:08
vBulletin + vBSEO, отредактировать футер obama vBulletin 1 01.03.2011 11:20
где мои страницы ? 4Fun.Fantasy О работе SEO Cafe 7 30.09.2010 19:15
Как увеличить PR страницы? mike Google 12 19.05.2008 02:01

Текущее время: 09:27. Часовой пояс GMT +3.