Липкий нижний колонтитул работает, но не на моем шаблоне? - PullRequest
Новая
       278

Липкий нижний колонтитул работает, но не на моем шаблоне?

1 голос
/ 18 декабря 2009

хорошо, моя проблема в работе кода Sticky footer, я проверял это:

Нет изображения, просто скопируйте и вставьте его будет работать: 

<!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" />
<title>Sticky Footer</title>
<style type="text/css">

* {margin:0 auto;
padding:0px;}

html, body {height: 100%;}

.wrapper {min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -250px;}

.footer, .push {height: 250px;}

.footer {background:#CCC;
width:100%;}

.conver {width:960px;
height:200px;}

.extra1 {float:left;
width:320px;
height:170px;
background:#0F0}

.extra2 {float:left;
width:320px;
height:170px;
background:#00F}

.extra3 {float:right;
width:320px;
height:170px;
background:#F00}

.clear {clear:both;}

.footer_note p {font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
text-align:right;
padding-top:20px;}

</style>
</head>
<body>

<div class="wrapper"><!-- Wrapper goes around all the content -->
<p>Your website content here.</p><!-- All your content goes here -->
<div class="push"></div><!-- Push the footer to the bottom -->
</div><!-- Wrapper ends here -->

<div class="footer"><!-- Wrap the footer -->

  <div class="conver"><!-- Contain footer elements -->
    <div class="extra1"></div>
    <div class="extra2"></div>
    <div class="extra3"></div>
    <div class="clear"></div>
    <div class="footer_note"><p>Copyright should be here<br/>Company name</p></div>
  </div><!-- conver Ends here -->


</div><!-- Footer ends here -->

</body>
</html>

так вот, это на моем шаблоне (выглядит странно без изображений): PS: изображения нет, но шаблон заканчивается как 30px после текста: 

<!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" />
<title>test</title>
<!--[if IE 6]>
    <meta http-equiv="refresh" content="0; url=http://www.google.com.br">
<![endif]-->
<style type="text/css">
/* General */
* {margin:0px auto;
padding:0px;}

p {font-family:Verdana, Geneva, sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:18px;
text-align:left;
color:#000;}

.breadcrumbs_here {width:940px;}

/* background */
html {background:#039 url(../images/bg_repeat_x.png) repeat-x;
height:100%;}

body {background:url(../images/Glare_01.jpg) no-repeat top center;
height:100%;}

html > body {min-height:100%;
height:auto;}
/* background ends here */

/* header */
a#header {background:url(../images/header-trans.png) no-repeat;
display:block;
height:130px;
width:630px;
text-indent:-9999px;
margin-right:500px;}
/* header ends here */

/* sheet starts here */
.sheet {position:relative;
width:1000px;
top:10px;}

.top_sheet {width:1000px;
height:20px;}

.tl {float:left;
background:url(../images/sheet_top_left-trans.png) no-repeat;
height:20px;
width:20px;}

.tm {float:left;
background:url(../images/sheet_top-trans.png) repeat-x;
height:20px;
width:960px;}

.tr {float:right;
background:url(../images/sheet_top_right-trans.png) no-repeat;
height:20px;
width:20px;}

.middle {position:relative;
background: url(../images/sheet_middle.png) repeat-y;
width:1000px;}

bottom_sheet {width:1000px;
height:30px;}

.bl {float:left;
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}

.bm {float:left;
background:url(../images/sheet_bottom-trans.png) repeat-x;
width:960px;
height:30px;}

.br {float:right;
background:url(../images/sheet_bottom_right-trans.png) no-repeat;
width:20px;
height:30px;}
/* sheets end here */

/* Top menu and search */
.top_menu {position:relative;
width:960px;
height:51px;}

.top_menu_inside {float:left;
width:720px;
height:51px;
background:url(../images/menu_bg.png) repeat-x;}

.search_background {float:right;
width:240px;
height:51px;
background:url(../images/search_bg.png) repeat-x;}
/* Top menu and search ends here*/

/* highlights */
.highlights {position:relative;
width:960px;
height:150px;
background:url(../images/highlight_bg-trans.png) repeat-x;}

.hl1{float:left;
height:150px;
width:320px;}

.hl2{float:left;
height:150px;
width:320px;}

.hl3{float:right;
height:150px;
width:320px;}
/* highlights ends here */

/* content */
.content {position:relative;
width:1000px;
background:url(../images/content_middle.png) repeat-y;}

.content_wrapper {position:relative;
width:960px;}

.left {float:left;
height:100%;
width:25%}

.left p {padding-left:10px;}

.right {float:right;
height:100%;
width:75%}

.right p {padding-left:10px;
padding-right:10px;}

.clear {clear:both;
clear:both;
height:0;
font-size: 1px;
line-height: 0px;}
/* content ends here */

/* footer */

.wrapper {min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -250px;}

.footer, .push {height: 250px;}

.footer {background:#CCC;
width:100%;}

.conver {width:960px;
height:200px;}

.extra1 {float:left;
width:320px;
height:170px;
background:#0F0}

.extra2 {float:left;
width:320px;
height:170px;
background:#00F}

.extra3 {float:right;
width:320px;
height:170px;
background:#F00}

.clear {clear:both;}

.footer_note p {font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
text-align:right;
padding-top:20px;}

</style>

</head>
<body>

<a id="header" href="http://www.google.com.br" title="google" target="_self">google</a>
<div class="wrapper"><!-- Wrapper goes around all the content -->
<div class="sheet">

  <div class="top_sheet">
    <div class="tl"></div>
    <div class="tm"></div>
    <div class="tr"></div>
  </div>

    <div class="middle">

      <div class="top_menu">
            <div class="top_menu_inside"></div>
            <div class="search_background"></div>
            <div class="clear"></div>
      </div>

              <div class="highlights">
                <div class="hl1"></div>
                <div class="hl2"></div>
                <div class="hl3"></div>
                <div class="clear"></div>
              </div><!-- highlights ends here -->

      <div class="content">

        <div class="breadcrumbs_here"></div>
            <div class="content_wrapper">
            <div class="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ligula, faucibus ut aliquam ut</p></div>
            <div class="right"></div>

            <div class="clear"></div><!-- keeps the floats in one piece -->

      </div><!-- content wrapper ends here -->

      </div><!-- content ends here -->

    </div><!-- middle ends here -->

  <div class="bottom_sheet">
    <div class="bl"></div>
    <div class="bm"></div>
    <div class="br"></div>
    <div class="clear"></div>
  </div>

</div><!-- End of the sheet class -->

<div class="push"></div><!-- Push the footer to the bottom -->

</div><!-- Wrapper ends here -->

<div class="footer"><!-- Wrap the footer -->

  <div class="conver"><!-- Contain footer elements -->
    <div class="extra1"></div>
    <div class="extra2"></div>
    <div class="extra3"></div>
    <div class="clear"></div>
    <div class="footer_note"><p>Copyright should be here<br/>Company name</p></div>
  </div><!-- conver Ends here -->


</div><!-- Footer ends here -->
</body>
</html>

Я здесь искренен, я не совсем понимаю, как работает «липкий нижний колонтитул», может быть, если бы я знал, что смогу решить эту проблему.

«Липкий нижний колонтитул» придерживается конца шаблона! Я мог бы использовать абсолютное положение, чтобы заставить его работать, но IE7 ненавидит это ...

Этот шаблон не должен работать на IE6, так что даже не думайте об этом мусоре ...

1 Ответ

1 голос
/ 18 декабря 2009

Во втором примере ваша запись CSS: 

* {margin:0px auto;
padding:0px;}

Заставляет ваше большое пространство внизу страницы. Это то, что вы видите, это заставляет его не работать на вас? Если вы используете Firefox, вы можете получить плагин Firebug (http://getfirebug.com/), который позволяет вам просматривать и изменять CSS элементов в режиме реального времени. Очень полезный инструмент отладки.

...