0

スティッキーフッターがその上にスペースを追加しているように見えるという問題があります。これを引き起こしている原因がわかりません。いくつかの異なるスティッキーフッターの方法を試しましたが、すべて同じ問題があるようです。マークアップに何か問題があるに違いありませんか？

ここにサイトがあります：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>
4

2 に答える 2

1

9行目のsystem.cssの次の行が問題を引き起こしています...

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

これを作る：

#main {
   overflow: auto;
}

chromes開発者ツールやfirefox用のfirebugなどのデバッグツールの使用方法を学ぶことをお勧めします。これは、HTMLを見て、要素の上にマウスを置くと、chromes開発ツールを使用して非常に簡単に見つけることができました。要素自体を青、パディングを緑、マージンをオレンジで強調表示します。最初にフッターをハイライトし、青いハイライトの上に緑またはオレンジが表示されました。これは、問題が発生したのはフッターではないことを示しています。それで私は上に移動し、ID mainのdivにカーソルを合わせると、大きな緑色のブロックがあり、大量のパディングを示していることがわかりました。そのdivをクリックした後にCSSルールを確認し、パディング：250pxを確認し、チェックを外したところ、問題は解決しました。

編集：

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-25T13:06:10.220 に答える
1

あなたはここを見たいかもしれません！マージントップを-250pxとして指定しますが、マージンを0autoに設定します。これは、margin-topを削除するか、marginを削除して、margin-left、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-25T13:14:31.057 に答える