0

Хотел сверстать шаблон сайта, но никак не могу прикрепить footer, знаю что можно сделать, например, добавив:

.content{padding-bottom: N px}
.footer{height: N px; margin-top:- N px}

но ничего не выходит вот html и css:

#center {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  min-width: 800px;
}

#menu {
  background-color: #3298c4;
  height: 51px;
  ;
}


#header {
  background-color: #fff;
  opacity: 0.85;
  border-radius: 0 0 10px 10px;
  padding: 15px;
}


#content {
  background-color: #ffe7ca;
  opacity: 0.90;
  border-radius: 10px;
  margin: 15px 0 50px 0;
  padding: 15px;
}


#footer {
  background-color: #fcd5aa;
  padding: 15px;
  height: 36px;
}


#footer a {
  color: #009707;
}


#copyright {
  float: left;
  width: 44%;
  text-align: center;
  min-width: 390px;
}


#adress {
  float: left;
  width: 30%;
  min-width: 240px;
}


#counter {
  float: left;
  width: 26%;
  position: relative;
  text-align: right;
  min-width: 262px;
}


#counter img {
  margin: 1px;
}


#link2 {
  background-color: #fff;
  opacity: 0.85;
  border-radius: 10px 10px 0 0;
  padding: 10px 10px 5px 10px;
  margin-left: 0;
  float: left;
  margin-top: -35px;
  height: 20px;
}


#link2 a {
  color: #000;
  text-decoration: none;
}


#link2 img {
  padding-right: 5px;
}


#wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Асоциация регионального туризма</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div id="menu">
    <div id="center">
      <ul class="menu">
        <li><a href="#">Главная</a></li>
        <li><a href="#">О проекте</a>
          <ul>
            <li><img src="arrow.png"><a href="#">Турагентам и туроператорам</a></li>
            <li><a href="#">Санаториям/отелям/базам отдыха</a></li>
          </ul>
        </li>
        <li><a href="#">Партнерам</a></li>
        <li><a href="#">Клиентам</a></li>
        <li><a href="#">Как оплатить</a></li>
        <li><a href="#">Контакты</a></li>
        <ul>
    </div>
  </div>
  <div id="center">
    <div id="header">...</div>
    <div id="content">...</div>
  </div>
  <div id="wrap">
    <div id="center">
      <div id="link2">
        <a href="#"><img src="04.png">Добавить в избранное</a> |
        <a href="#"><img src="05.png">Сделать стартовой страницей</a>
      </div>
    </div>
    <div id="footer">
      <div id="center">
        <div id="adress">Новосибирск, Красный проспект, 99 <br>+7 (383) <b>203-39-82, +7 913 760-0397</b></div>
        <div id="copyright">© 2013 «Ассоциация Регионального Туризма» | <a href="mailto:info@sibregiontur.ru">info@sibregiontur.ru</a></div>
        <div id="counter"><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"></div>
      </div>
    </div>
  </div>
</body>

</html>

И еще ссылка на сайт http://lezoff.pusku.com/ Заранее спасибо.

В итоге сделал по типу:

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

.page-wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}


    

  • html .page-wrapper {
height: 100%;
    • 



}


.page-buffer {
  height: 50px;
}
<body>
  <div class="page-wrapper">
    <div class="page-buffer"></div>
  </div>
  <div class="page-footer"></div>
</body>
Dev18
  • 640
Straj
  • 104

1 Answers1

0
/* CSS reset */
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 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Попробуйте это вставить в css А также если Вы ипользуете html5 - где header, section, footer, article

soledar10
  • 27,573
  • Не хотел пока вставлять фикс для IE, простой сброс не поможет, но все равно спасибо – Straj Oct 03 '13 at 14:03
  • у меня футер внизу приклеился – soledar10 Oct 03 '13 at 14:04
  • Это для какой версии ИЕ? – soledar10 Oct 03 '13 at 14:07
  • Тогда уточню, так то он снизу, но если увеличить высоту контента, больше высоты окна, то футер перекрывает его, а должен быть после. Надеюсь так более понятно. – Straj Oct 03 '13 at 14:08
  • где #wrap уберите position:absolute – soledar10 Oct 03 '13 at 14:16
  • если убрать то он себя ведет как при position:relative и приклеивается ровно после контента – Straj Oct 03 '13 at 14:57