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:[email protected]">[email protected]</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>

1

1 ответ 1

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.