Липкий нижний колонтитул (не прилипает!) - PullRequest
1 голос
/ 14 февраля 2012

Здесь начинающий кодер. Я пытался внедрить липкий нижний колонтитул на свой сайт, но он просто не работает. По сути, это изображение, на котором размещен какой-то текст. Вот мой сайт: http://mc -airlines.hostei.com

Как видите, это точно не работает!

Я использую это: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/, чтобы сделать это. Вот код, относящийся к нижнему колонтитулу на моем сайте:

* {
margin: 0;
}

body, html {
text-align:center;
border-width: 0px; 
margin:0;
padding:0;
height:100%;
}


#container{
position:relative;
margin: 0 auto -175px;
width:960px;
min-height:100%;
height: auto !important;
text-align:left;
}

#footer{
margin: 0 auto;
text-align:left;
width:960px;
height:175px;
}


#links {
font-family: 'HelveticaNeueRegular', Trebuchet MS, Verdana, sans-serif;
color:white;
font-size: 18px;
padding: 10px;
position: absolute;
bottom: 23px;
left: 0;
width: 300px;
}

#links2{
font-family: 'HelveticaNeueRegular', Trebuchet MS, Verdana, sans-serif;
color:white;
font-size: 18px;
padding: 10px;
position: absolute;
bottom: 10px;
left: 310px;
width: 420px;
}

И мой HTML:

<div id="container">

<!-- (site content -->

<div class="push"></div>

</div>

<div id="footer">

<img src="images/footer.png" alt="footer" class="foot"/>

<div id="links">
<script type="text/javascript">copyright=new Date();
update=copyright.getFullYear();
document.write("&copy "+ update + " MC Airlines");</script><br>
<span class="psmall">
All content on this site belongs to MC Airlines and its subsidiaries, and may not be used without prior permission from Mr MC. Just kidding, he probably won't reply - just don't abuse it too much :) </span>
</div>

<div id="links2">
Other Links <br>
<span class="psmall">
&nbsp;&nbsp;&nbsp; <a href="">Our Partners</a><br>
&nbsp;&nbsp;&nbsp; <a href="">MC Airlines Thread</a><br>
&nbsp;&nbsp;&nbsp; <a href="">MC Airlines Wiki</a><br>
&nbsp;&nbsp;&nbsp; <a href="">Cyber Airlines</a><br></span>
<span class="pxsmall">
We can not be held responsible for the content on external sites. I mean c'mon, that's just unfair.
</span>
</div>

<!-- #footer close -->        
</div> 

Если кто-нибудь может указать, что я делаю неправильно, я был бы очень благодарен.

Спасибо!

Ответы [ 4 ]

0 голосов
/ 14 февраля 2012

Есть более простой способ сделать липкие нижние колонтитулы, которые занимают немного меньше кода и более понятны, как это работает. Взгляните на учебник по http://www.htmltutorialsandtips.com/css-sticky-footer, чтобы увидеть, как он работает. Он проведет вас шаг за шагом, чтобы вы поняли, как работают липкие нижние колонтитулы, и затем сможете соответствующим образом изменить свой код. Таким образом, вы сможете применить концепцию к любому макету, а не просто получить ответ на этот один вопрос.

0 голосов
/ 14 февраля 2012

Подсказка ... Я не могу увидеть этот код в вашем исходном коде HTML

<div class="push"></div>

Это важно, потому что это помогает прикрепить нижний колонтитул к нижней части страницы

0 голосов
/ 14 февраля 2012

Ваш липкий нижний колонтитул не работает, потому что вы используете position:absolute для разметки своей страницы, а нижний колонтитул не знает, где разместить себя в вашем документе.Быстро исправить это можно было бы так же точно расположить нижний колонтитул, например

#footer {
    left: 50%;
    margin: 0 auto 0 -480px;
    position: absolute;
    top: 1400px;
}

Но я бы порекомендовал правильно расположить divs и использовать поплавки вместо position:absolute, это исправитпроблемы, которые возникнут при использовании такого макета и будут семантически правильными.

0 голосов
/ 14 февраля 2012

Ваш опубликованный код не соответствует сайту, на который вы ссылаетесь. Мои комментарии основаны на вашей ссылке, а не на коде, который вы разместили здесь.

  1. Переместите нижний колонтитул за пределы #container div.
  2. Добавьте .push div в конец #container div (там, где сейчас нижний колонтитул)
  3. добавить правила CSS для #footer и .push в clear: both;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...