Нижний колонтитул на содержание страницы

Я пытаюсь вставить ногу в нижней части моей страницы. Для этого я читал множество веб-сайтов, и все они говорят мне то же самое.Нижний колонтитул на содержание страницы

После того, как я сделал то, что было упомянуто, мой нижний колонтитул действительно застрял на дне ... НО ... содержание страницы покрыто этим!

Мой CSS имеет следующие свойства:

html, body { 
    height: 100%; 
} 

body { 
    margin: 0px; 
    font-family: Arial; 
    background-image: url("../img/bg2.jpg"); 
} 

.geral { 
    min-height:100%; 
    position: relative; 
} 

.container { 
    width: 900px; 
} 

.container img { 
    width: 250px; 
    float: left; 
} 

.container .btn_criar_conta { 
    width: 100px; 
    float: right; 
} 

.container .user_detail { 
    width: 300px; 
    float: right; 
} 

#topo_pagina { 
    height: 110px; 
} 



.box_login_conteiner { 
    width: 410px; 
    text-align: left; 
} 

.box_login { 
    width: 350px; 
    min-height: 200px; 
    background-color: white; 
    font-family: Arial; 
    font-size: 13px; 
    text-align: right; 
    padding: 10px; 
    border: 1px white solid; 
    border-radius: 0.5em; 
    color: grey; 
    box-shadow: lightgrey 0.0em 0.5em 0.9em; 
    padding-right: 50px; 
} 

.box_login li { 
    list-style: none; 
} 

.box_login a { 
    color: blue; 
    text-decoration: none; 
} 

.box_login a:hover { 
    color: blue; 
    text-decoration: underline; 
} 

.box_login input { 
    border: 1px whitesmoke solid; 
    border-radius: 0.5em; 
    box-shadow: lightgrey 0.0em 0.1em 0.1em; 
    height: 30px; 
    width: 250px; 
    padding: 5px; 
    color: grey; 
} 

.box_login .img { 
    border: none; 
    width: 100px; 
} 

.box_login .btn_submit { 
    border: 1px seagreen solid; 
    border-radius: 2em; 
    box-shadow: grey 0.0em 0.1em 0.1em; 
    height: 30px; 
    width: 100px; 
    padding: 5px; 
    color: white; 
    background-color: seagreen; 
} 

.index_login { 
    text-align: justify; 
    float: right; 
    width: 400px; 
    color: #2b3856; 
    font-family: Geneva; 
} 

.index_login img{ 
    text-align: right; 
    width: 400px; 
} 

.index_login hr { 
    background-color: lightblue; 
    border: 0px; 
} 

.info_login { 
    font-size: 11px; 
    padding: 5px; 
    background-color: lightgrey; 
    border-radius: 0.5em; 
    color: grey; 
} 

.info_login a { 
    color: blue; 
    text-decoration: none; 
} 

.info_login a:hover { 
    color: blue; 
    text-decoration: underline; 
} 


.box_registrar_conteiner { 
    width: 430px; 
    text-align: left; 
} 

.box_registrar { 
    width: 430px; 
    min-height: 200px; 
    background-color: white; 
    font-family: Arial; 
    font-size: 13px; 
    text-align: right; 
    padding: 10px; 
    border: 1px white solid; 
    border-radius: 0.5em; 
    color: grey; 
    box-shadow: lightgrey 0.0em 0.5em 0.9em; 
    padding-right: 50px; 
} 

.box_registrar li { 
    list-style: none; 
} 

.box_registrar a { 
    color: blue; 
    text-decoration: none; 
} 

.box_registrar a:hover { 
    color: blue; 
    text-decoration: underline; 
} 

.box_registrar input { 
    border: 1px whitesmoke solid; 
    border-radius: 0.5em; 
    box-shadow: lightgrey 0.0em 0.1em 0.1em; 
    height: 30px; 
    width: 250px; 
    padding: 5px; 
    color: grey; 
} 

.box_registrar .img { 
    border: none; 
    width: 100px; 
} 


.rodape { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 150px; 
    background-color: grey; 
    color: white; 
    font-family: Geneva; 
    font-size: 11px; 
} 


.rodape a { 
    color: white; 
    text-decoration: none; 
} 

.rodape a:hover { 
    color: white; 
    text-decoration: underline; 
} 

.rodape #menu { 
    float: left; 
    margin-right: 50px; 
} 

.container_footer { 
    width: 900px; 
    text-align: left; 
}

И мой HTML выглядит так:

<html> 
    <head> 
     <title>Site</title> 
     <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style1.css"> 
    </head> 
    <body> 
     <div class="geral"> 
      <div id="topo_pagina"> 
       <div align="center"> 
        <div class="container"> 
         <br/> 
         <br/> 
         <a href="/"><img src="{{ STATIC_URL }}img/logo1.png"></a> 

         {% if user.is_authenticated %} 
          <div class="user_detail"> 
           <br/> 
           Olá {{ user.first_name|capfirst }}! - <a href="/logout/">Logout</a> 
          </div> 
         {% else %} 
          <a href="/login/"><input type="image" src="{{ STATIC_URL }}img/btn_logar_conta.png" class="btn_criar_conta"></a> 
          <a href="/registrar/"><input type="image" src="{{ STATIC_URL }}img/btn_criar_conta.png" class="btn_criar_conta"></a> 
         {% endif %} 
        </div> 
       </div> 
      </div> 
      <div id="conteudo_pagina"> 
       <div align="center"> 
        <div class="container"> 
        {% block conteudo_pagina %} 
        {% endblock %} 
        </div> 
       </div> 
      </div> 
      <br clear="all"> 
      <div class="rodape"> 
       <div align="center"> 
        <div class="container_footer"> 
         <div id="menu"> 
          <h4>Multiplikação</h4> 
          <a href="/login/">Acessar</a><br/> 
          <a href="/registrar/">Criar conta</a><br/> 
         </div> 
         <div id="menu"> 
          <h4>Sobre a empresa</h4> 
          Quem somos<br/> 
          Nosso time<br/> 
          Trabalhe com a gente<br/> 
         </div> 
         <div id="menu"> 
          <h4>Conectividade</h4> 
          Facebook<br/> 
          Twitter<br/> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Может кто-нибудь мне помочь? Я действительно не знаю, что попробовать. = (

Заранее спасибо за все!

источник

2012-06-11 Lucas Rezende

Содержимое страницы охвачено чем? Что это*? –

Я знаю, что это не идеальный пример организованного кода, но поскольку я не испытываю опыта в веб-разработке и просто хочу сделать эту работу, пожалуйста, постарайтесь не уделять столько внимания этому. =) –

Вы неправильно поняли. Вы сказали: * содержимое страницы покрывается этим *. Что это*? Вы имеете в виду нижний колонтитул? –

Это звучит, как вы хотите, чтобы колонтитулы быть видимыми во все времена, но вы не хотите, в самом низу вашего содержания, которое будет прикрыт его. Если в этом случае вы можете добавить свойство padding-bottom в ваш .geral класс.

К сожалению, я не уверен, что это ваш нижний колонтитул здесь, и ничто в вашем CSS не помогает мне понять это, но вот в любом случае, если ваш нижний колонтитул равен 200px:

.geral {padding-bottom:200px}

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

EDIT Если вы хотите постоянно быть видно, но не прикрывая текст, возьмите .rodape из .geral и поместить его внутри тела тега. Ваш HTML хотел бы это сейчас:

<html> 
    <head> 
     <title>Site</title> 
     <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style1.css"> 
    </head> 
    <body> 
     <div class="rodape"> 
      <!-- rodape content --> 
     </div> 
     <div class="geral"> 
      <!-- geral content --> 
     </div> 
    </body> 
</html>

Добавить этот стиль в свой CSS

.rodape {width:100%; height:200px; position:fixed;} 
.geral {padding-bottom:200px;}

Я думаю, что поможет вам эффект, который вы хотите.

источник

2012-06-11 03:30:53 ABCaesar

На самом деле я хочу, чтобы мой нижний колонтитул всегда находился в конце страницы. Ничего не скрывая, но когда у меня мало контента на странице, оно не должно быть посередине страницы, а внизу. Когда я делаю то, что я показывал в приведенном выше коде, мой нижний колонтитул держится внизу, но когда я увеличиваю контент, он не опускается с содержимым, а держится в одном месте, и контент, кажется, проходит, (сноска). –

Какой класс представляет ваш нижний колонтитул в CSS, который вы предоставили? – ABCaesar

«.rodape» - Извините, это на португальском, так как я из Бразилии. =) –

Простой:

Удалить position: absolute; из вашего CSS (строка 189 вашей CSS выше).

Причина, почему ваша сноска покрывает содержание, потому что его позиционирование абсолютного, тем самым принимая его из нормального потока контента. Как только вы удалите указанную выше строку, .rodape будет статически размещаться по умолчанию - она будет учитывать элементы перед ним (например, #conteudo_pagina) и будет размещена после них (без их покрытия).

Одна вещь, которую вы могли бы хотеть знать:

<br clear="all"> использует ясный, устаревший атрибут HTML, который вы не хотите использовать в вашем CSS. Попробуйте использовать прокладку, как это было предложено ABCaesar.

источник

2012-06-11 04:54:06 anthonytwp

Это не сделает нижний колонтитул в нижней части окна просмотра, что и требовал пользователь1072627. –

Ах. Теперь я понял (видел липкий нижний колонтитул URL). Сначала я не мог понять, что он хотел - подумал, что он просто хотел, чтобы нижний колонтитул был внизу, не закрывая контент. В любом случае, Thumbs up для URL. – anthonytwp

Да, я хочу, чтобы нижний колонтитул был внизу, не закрывая контент. Но когда у меня нет большого контента на странице, нижний колонтитул должен быть внизу страницы. –

Вот Fiddle с разметкой модифицирована для реализации липкую колонтитула:

http://jsfiddle.net/2MXvP/1/

Техника, которую я использовал это один: http://www.cssstickyfooter.com/

Существенные изменения:

Элемент .rodape был перемещен в разметке, поэтому он является братом от .geral.
.rodape имеет отрицательное верхнее поле, эквивалентное его высоте.
.geral имеет новый дочерний элемент, .main, который имеет нижнюю прокладку, эквивалентную высоте .rodape.

я мог бы сделать некоторые другие CSS тоже меняется, но только .rodape, .geral и .main.

Если вы посмотрели http://www.cssstickyfooter.com/ Я связался с вами выше, вы должны выяснить, как это работает. На этой странице есть некоторые примечания об совместимости IE и Opera, которые я не реализовал в своем Fiddle, и я тестировал только в Chrome.

источник

2012-06-11 05:16:45

Нижний колонтитул на содержание страницы

ответ

Смежные вопросы