0

正如您在演示中看到的那样,我的页脚栏不是它必须在的地方。我不知道为什么页脚在内容 div 之后没有解决。页脚必须在文章之后。我试图找到在谷歌上搜索的特定关键字,但我做不到。

另外,我不能将样式应用于about page。我认为这与第一个问题有关。

<!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=utf-8" lang="en"/>
<title>Title</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />  
</head>
<body> 
<div id="containerANA">

    <div id="header">
            <div class="headerAlt">

            </div>
    </div>
     <div class="temizle"></div>
<!--End of the header.php-->
<div id="content">
    <div class="findler">
    <div class="find"><a href="#" title="Find">Find</a></div>
        <p>
                                            <a href="#">insaf sahipleri</a>
                                                            <a href="#">BEN VE OLRİC</a>
                                                            <a href="#">insaf sahipleri</a>
                                                            <a href="#">BEN VE OLRİC</a>
                                                            <a href="#">insaf sahipleri</a>
         </p>
    </div>
</div>
<div class="temizle"></div> 
    <!--Begining of the footer.php-->
    <div id="footer">
        <ul>
            <li><a href="http://www.olmasigereken.com/demo1/?view=about" title="about us">about us</a></li>
            <li><a href="http://www.olmasigereken.com/demo1/?view=terms" title="terms of use">terms of use</a></li>
            <li><a href="http://www.olmasigereken.com/demo1/?view=contact" title="contact">contact</a></li>
        </ul>
    </div>
</div>  
</body>
</html>

样式.css:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
        background:#000000;
        color:#fff;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    .temizle{clear:both;}

    #containerANA{
    width:%100px;
    height:auto;
    margin: 0 auto;
    font:13px arial, helvetica, Geneva, sans-serif;
    margin-left:15px;
    margin-right:15px;
}


.temizle{
    clear:both;
}

#header{
    height:212px;
    width:%100px;
    margin:0 auto;
    border-bottom:2px solid #66675e;
}


.headerAlt{
    height:55px;
    width:490px;
    margin:0 auto;
    margin-top:10px;
    float:center;
}




#content{
    width:%100px;
    margin-top:35px;
}


.findler{

    height:80px;
    width:%100px;

}

.find{
    background:url(img/find.jpg) no-repeat;
    width:87px;
    height:54px;
    margin-top:26px;
    margin-left:610px;

}

.find a{
    width:87px;
    height:54px;
    display:block;
    text-indent:-9999px;
}

#content p{
  position: relative;
  margin-left:auto;
  margin-right:auto;
  top:0px;
  display: block;
  padding: 5px;    
  color: #769B4E;
  font-size:18px; 
  text-align:justify;   
  border: 0px solid #769B4E;
  margin-top: 10px;
  margin-bottom: 10px;
}

#content p a{
    color:#ccc;
    text-decoration:none;
}

#content p a:hover{
    background:#e5da5f;
    color:#000;
}

#footer{
    margin-top:50px;
    margin-bottom:20px;
}

#footer ul{
    margin-left:35px;
}
#footer ul li{
    display:inline;
    margin-right:30px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
}

#footer ul li a{
    text-decoration:none;
    color:#FF0000;
}

#footer ul li a:hover{
    background:#e5da5f;
    color:#000;
}
4

5 回答 5

2

您已经在 CSS 中定义了

.find {
  background: url(img/find.jpg) no-repeat;
  width: 87px;
  height: 54px;
  margin-top: 26px;
  margin-left: 610px;
}

.findler {
  height: 80px;
  width: %100px;
}

他们#content只做了 80px 的高度,但是里面的内容占用的空间比提供的要多,导致内容溢出。

所以.footer位于 的下方#content,但视觉上位于 中的溢出内容下方#content

只需height从 CSS 规则中删除 s,让浏览器决定高度应该是多少。

于 2012-11-14T09:25:23.013 回答
1

从中删除高度值.findler并使其自动。

由于您的内容 div 的高度是固定的,因此内容超出了 div,因此您会看到页脚问题。

.findler {
height: auto;
width: 100%;
}
于 2012-11-14T09:23:05.827 回答
1

添加clear:both;到页脚的 css。

如果它仍然不起作用,<div class="clearer"></div>请在 html 中的页脚之前添加。并在 css 中声明.clearer{clear:both;}

于 2012-11-14T09:24:29.607 回答
1

....你好现在添加这个

min-height:80px;在你的.findler 课上

像这样

.findler {
height:80;  // remove this line
    min-height: 80px;  //  add this line
}
于 2012-11-14T09:34:59.957 回答
0

http://www.cssstickyfooter.com/ - 这可能会有所帮助,他们很好地解释了页脚定位

于 2012-11-14T12:56:17.413 回答