Липкие проблемы с нижним колонтитулом, пробел выше нижнего колонтитула

У меня проблема, когда липкий нижний колонтитул, кажется, добавляет расстояние над ним, я не уверен, что это вызывает, ив попробовал несколько разных липких меток нижнего колонтитула, и все, похоже, имеют такой же выпуск. Это должно быть что-то неправильно с разметкой?Липкие проблемы с нижним колонтитулом, пробел выше нижнего колонтитула

вот сайт: http://www.adamtoms.co.uk/

Цените любую помощь!

С наилучшими пожеланиями, Адам

<?php 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/mk1/css/system.css" type="text/css" /> 
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mk1/css/general.css" type="text/css" /> 
</head> 
<div id="wrap"> 

    <div id="main"> 




<div id="container"> 
<body> 

<div id="header" > 

    <div id="headleft"> 
    <jdoc:include type="modules" name="logo" /> 
    </div> 

    <div id="headright"> 
    <div id="navr"> 
    <div id="nav"> 
    <jdoc:include type="modules" name="menu" /> 
    </div> 
    </div> 
    </div> 
</div> 

<div id="breadcrumb"> 
    <jdoc:include type="module" name="breadcrumb" /> 
</div><br /> 



<div id="content"> 
<jdoc:include type="component" name="content" /> 
<jdoc:include type="component" /> 
<jdoc:include type="modules" name="slider" /> 
</div> 


<div id="leftrightmain"> 
<div id="midleft"> 
<jdoc:include type="modules" name="left" /> 
</div> 
<div id="midright"> 
<jdoc:include type="modules" name="right" /></div> 
</div> 


</body> 
</div> 


</div> 
</div> 


<footer> 
<div id="footer"><jdoc:include type="modules" name="footer" /> 
    <jdoc:include type="module" name="debug" /> 


</footer></div> 
</html>

источник

2013-03-25 atoms

Некоторый код может быть полезен, если вы хотите помочь – NoLiver92

Это не нижний колонтитул, это # main-div. Удалите «padding-bottom: 250px;». Вы можете использовать FireBug (для FireFox) или инструменты разработчика Chrome для решения таких проблем. – Quasdunk

спасибо, что я использовал firebug extensivly, чтобы попытаться преодолеть эту проблему, я не могу видеть, что ее вызывает. – atoms

Следующая строка в system.css на линии 9 вызывает проблему ...

#main { 
    overflow: auto; 
    padding-bottom: 250px; 
}

Сделать это следующим:

#main { 
    overflow: auto; 
}

Я предлагаю вам изучить, как использовать инструмент для отладки, например, инструменты для разработчиков цветных блоков или fireb ug для firefox. Это было очень легко найти с помощью инструментов chromes dev, когда вы смотрите на HTML и наведите указатель мыши на элемент. Он выделяет сам элемент синий, любой зеленый оттенок и оранжевый. Сначала я выделил нижний колонтитул и увидел теперь зеленый или оранжевый над синим цветом, указывая на то, что это не ваш нижний колонтитул, у которого была проблема. Поэтому я поднялся, и я обнаружил, что у div с ID main был большой блок зеленого цвета, когда я зависал над ним, указывая на большое количество дополнений. Я просмотрел правила CSS после нажатия этого div, увидел отступы: 250px и снял флажок, и ваша проблема была решена.

EDIT:

Как NoLiver92 найти ниже ... Вы определенно -250px маржа-топ, но потом сбросить его с рентабельностью 0 авто ...

#footer { 
position: relative; 
background-image:url('../images/bg_footer1.png'); 
margin-top: -250px; /* negative value of footer height */ 
height: 250px; 
clear:both; 
width: auto; 
margin: 0 auto;}

Сделать это вместо этого :

#footer { 
position: relative; 
background-image:url('../images/bg_footer1.png');  
height: 250px; 
clear:both; 
width: auto; 
margin: -250px auto 0 auto;}/* negative value of footer height */

источник

2013-03-25 13:06:10 Michael

спасибо, что я обновил css, как было предложено, но проблема все еще существует :( – atoms

Нет, теперь он работает, он просто не работает, поскольку у вас недостаточно контента. Бросьте пару абзацев фиктивного текста в ваше тело где-то, где угодно, чтобы заставить вашу страницу иметь больше высоты. Или просто измените размер окна вашего браузера, чтобы быть действительно крошечной высотой, чтобы вы могли прокручивать, тогда вы увидите, что он отлично работает. – Michael

спасибо всем, кто действительно полезен! теперь вы можете прокручивать страницу вниз, чтобы просмотреть нижний колонтитул, почему это прокрутка там? Я бы подумал, что нет какой-либо информации, которую нижний колонтитул появится на странице без необходимости прокрутки вниз? редактирование: я изменил код, как заговорил, и его работа! спасибо! есть ли способ удалить боковые поля вокруг нижнего колонтитула? – atoms

Возможно, вам захочется посмотреть здесь! Вы указываете верхнюю границу поля как -250 px, но вы также устанавливаете маржу в 0 auto. Это противоречит либо удалению поля margin-top или delete, и замене его маржевым левым, margin-right и margin-bottom.

#footer { 
position: relative; 
background-image:url('../images/bg_footer1.png'); 
margin-top: -250px; /* negative value of footer height */ 
height: 250px; 
clear:both; 
width: auto; 
margin: 0 auto;}

источник

2013-03-25 13:14:31 NoLiver92

Это вторая половина вашей проблемы. Ницца найти @ NoLiver92. Он должен быть margin: -250px auto 0 auto; и удалите верхний край – Michael

Липкие проблемы с нижним колонтитулом, пробел выше нижнего колонтитула

ответ

Смежные вопросы