footer отображаеться не коректно

green-vik · September 16, 2016

Всем доброго времени суток, столкнулся снова с проблемой. на скрине видно, что не так???? подскажите пожалуйста.

Вот код моего творения

<!DOCTYPE html>
<html>
<head>
<!-- включение тегов HTML5 для IE -->
  <!--[if lt IE 9]>
   <script>
    var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',' <img src="/.s/sm/1/wink.gif" border="0" align="absmiddle" alt="wink" /> ;
    for (var i = 0; i < e.length; i++) {
      document.createElement(e[i]);
    }
   </script>
  <![endif]-->
<!-- /включение тегов HTML5 для IE/ -->
<title>$SITE_NAME$</title>
<style type="text/css">
* {
margin: 0;
padding: 0;}

html {
height: 100%;}
body { 
font-family: Segoe UI, sans-serif;
font-size: 12px;
color:#dedede;
background:url(../images/fon.png) #21242a;}

html, body {margin:0;height:100%;}

#wrapper {height:auto !important;height:100%;min-height:100%;width:1020px;
background: #21242a;
border-radius: 10px;
border: 1px solid #373B45;
box-shadow: inset 0px 1px 4px 1px #1D1D1D;
margin: 10px auto;}

#header {height:200px;}

#left {float:left;width:200px;}

#right {float:right;width:200px;}

#center {margin:0 200px 0 200px;}

#spacer {height:100px;}

#footer {height:100px;margin-top:-100px;}

.clear {clear:both;}

</style>
</head>
<body>
<div id='wrapper'>
   <header>
    <div id='header'>ывпаывап
    <!-- Содержимое хэдэра -->
    </div>
   </header>
    <div id='container'>
  <div id='left'>ывпывапывп
  <!-- Содержимое левой колонки -->
  </div>
  <div id='right'>ывапывпывп
  <!-- Содержимое правой колонки -->
  </div>
  <div id='center'>ыпывапывапывп
  <!-- Содержимое центральной колонки -->
  </div>
    </div>
    <div class='clear'></div>
    <div id='spacer'></div>
</div>
   <footer>
<div id='footer'>ывпаывпа
<!-- Содержимое футера -->
</div>
</footer>
</body>
</html>

Switch74 · September 16, 2016

1 час назад, Konstantin99 сказал:

<footer> это не тег который располагается внизу страницы, это просто элемент с названием футер из спецификации html5, как div. Он сделан для лучшей читабельности кода разработчиком и для SEO.Пример https://jsfiddle.net/yxyf93fr/. И он на скрине находиться в правильном месте, следуя потоку документа и сместить его вниз можно либо через position:fixed или absolute, либо через flexbox. Почитай что такое поток документа и все поймешь.

Коль вы все знаете, что же не сместите его куда вам нужно?
https://jsfiddle.net/oLovbtrp/1/

Xenia Wanger · September 16, 2016

footer не во wrapper

green-vik · September 16, 2016

переделал, теперь footer отоброжаеться под левой колонкой

Edited September 16, 2016 by green-vik

Konstantin99 · September 16, 2016

Начнем с того, что зачем тебе столько "height: 100%"?Потом для обозначения элементов в лучше использовать не "id" , а "class", так как "id" это уникально имя элемента, которое может использоваться лишь 1 раз на странице, проще говоря "id" это для JS, а "class" для html/css. И последнее во wrapper тебе нужно закидывать не "id=footer", а тег "<footer>" и тогда все норм

Edited September 16, 2016 by Konstantin99

Switch74 · September 16, 2016

https://jsfiddle.net/oLovbtrp/

green-vik · September 16, 2016

ни первый ни второй вариант проблему не решили(((

Switch74 · September 16, 2016

49 минут назад, green-vik сказал:

ни первый ни второй вариант проблему не решили(((

и что же там не так?

green-vik · September 16, 2016

вот что

Konstantin99 · September 16, 2016

2 часа назад, green-vik сказал:

вот что

<footer> это не тег который располагается внизу страницы, это просто элемент с названием футер из спецификации html5, как div. Он сделан для лучшей читабельности кода разработчиком и для SEO.Пример https://jsfiddle.net/yxyf93fr/. И он на скрине находиться в правильном месте, следуя потоку документа и сместить его вниз можно либо через position:fixed или absolute, либо через flexbox. Почитай что такое поток документа и все поймешь.

Николя223 · September 18, 2016

Пикачу уже не тот... )

kent · September 19, 2016

#footer {

width:1020px

height:100px;margin:-100px auto 0 auto;

}

Sign In

footer отображаеться не коректно

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information