登录 | 注册 | FAQ
Anonymous

Rodapé

+ 发表回复

8 篇帖子 分页: 1 / 1


Rodapé

Luizinhou » 周二 9月 06, 2011 11:55 am

Bom dia,

eu estou com uma dúvida em relação a fixar o rodapé na tela, existem 1 milhão de sites falando sobre isso, mas tentei vários meios e não consegui fazer funcionar.. tentei o metodo do The Man in Blue de footerStickAlt e não funcionou, eu consegui fixá-lo perfeitamente agora mas com um problema, preciso deixar no CSS:
#footer {
bottom: 0
left: 0
.....
}
caso eu retire o left 0 o rodapé fica errado.. grande maioria dos meus sites são centralizados, então precisava centralizar o rodapé, alguém poderia me explicar um modo que funcione?

代码: 全选
<html>
<link rel="stylesheet" href="css/teste.css" type="text/css" media="screen">
<body>
<div id="total">
    <center>
   <div id="content">
      <div id="header" class="contemfloat">header</div>
      <div id="navmenu">navmenu</div>
        <div id="navside">navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside</div>
        <div id="main"><img src="images/jquerybanner.jpg"></div>
        <div id="aside">aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside </div>
   </div>
    <div id="backbottom">
        <div id="footer">footer</div>
    </div>
    </center>
</div>
</body>
</html>


css:

代码: 全选
* {
   margin:0;
   padding:0;
   z-index:1;
}
html, body {
   height: 100%;
}

.contemfloat:after {
   content: ".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}
.contemfloat { display: inline-block; }

* .contemfloat {
   height: 1%;
}

.contemfloat {
   display: block;
}

#total {
   position:relative;
   width:100%;
   min-height:100%;
   margin:0 auto;
   background:#f8e4cd;
}

* html #total {
   height:100%;
}

#content {
   text-align:center;
   padding-top:10px;
   background-color:#c08c52;
   width:960px;
   overflow: hidden;
}

#header {
   padding-bottom:150px;
   text-align:center;
   background:#006;
   color:#FFF;
   width:940px;
   margin:0px 10px 0px 10px;
}

#navmenu {
   height:60px;
   text-align:center;
   background:#552f04;
   color:#FFF;
   width:940px;
   margin:0px 10px 10px 10px;
}

#navside {
   display:inline; /*Bug da margem dupla para floats no IE*/
   float:left;
   width:160px;
   margin:10px;
   background-color:#905414;
}

#main {
   float:left;
   width:580px;
   margin:10px;
   background-color:#905414;   
}

#aside {
   float:left;
   width:160px;
   margin:10px;
   background-color:#905414;
}

#backbottom {
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:80px;
   padding-top:10px;
   background-color:#905414;
   text-align:center;
   clear:both;
   float:left;
}

#footer {
   position:absolute;
   bottom:0;
   left:0;
   width:940px;;
   height:80px;
   padding-top:10px;
   background-color:#72400a;
   text-align:center;
}
头像

Luizinhou

  • 帖子: 3
  • 注册: 周二 9月 06, 2011 11:47 am

Re: Rodapé

HTML.net » 周三 9月 07, 2011 9:33 am

Por que não mantê-lo simples, assim:

<div id="content" style="height: 100%">
texto texto texto ....
</div>

<div id="footer">
rodapé ...
</div>

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Rodapé

Luizinhou » 周四 9月 08, 2011 2:39 pm

tentei de varios jeitos ja, sem o position relative/absolute, o site fica com barra de rolagem mesmo sem conteudo.. depois da sua resposta eu dei uma editada, consegui resolver o problema do conteudo ocupar toda tela (firefox e chrome, IE nao funcionou).. Agora o codigo está assim

代码: 全选
<html>
<link rel="stylesheet" href="css/teste.css" type="text/css" media="screen">
<body>
<div id="total">
    <center>
   <div id="content">
      <div id="header">header</div>
      <div id="navmenu">navmenu</div>
        <div id="navside">navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside navside</div>
        <div id="main"><img src="images/jquerybanner.jpg"></div>
        <div id="aside">aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside </div>
   </div>
    <div id="backbottom">
        <div id="footer">footer</div>
    </div>
    </center>
</div>
</body>
</html>


代码: 全选
* {
   margin:0;
   padding:0;
   z-index:1;
}
html, body {
   height: 100%;
}

#total {
   position:relative;
   width:100%;
   min-height:100%;
   margin:0 auto;
   background:#f8e4cd;
}

* html #total {
   height:100%;
}

#content {
   text-align:center;
   background-color:#c08c52;
   width:960px;
   overflow: hidden;
   height:100%;
}

#header {
   padding-bottom:150px;
   text-align:center;
   background:#006;
   color:#FFF;
   width:940px;
   margin:10px 10px 0px 10px;
}

#navmenu {
   height:60px;
   text-align:center;
   background:#552f04;
   color:#FFF;
   width:940px;
   margin:0px 10px 10px 10px;
}

#navside {
   display:inline; /*Bug da margem dupla para floats no IE*/
   float:left;
   width:160px;
   margin:10px;
   background-color:#905414;
}

#main {
   float:left;
   width:580px;
   margin:10px;
   background-color:#905414;   
}

#aside {
   float:left;
   width:160px;
   margin:10px;
   background-color:#905414;
}

#backbottom {
   position:absolute;
   left:0;
   bottom:0;
   width:100%;
   height:80px;
   padding-top:10px;
   background-color:#905414;
   text-align:center;
}

#footer {
   position:absolute;
   left:0;
   bottom:0;
   width:940px;;
   height:80px;
   padding-top:10px;
   background-color:#72400a;
   text-align:center;
}


Obs: tentei tirar o left:0 do footer e do backbottom, ficou completamente torto no IE, aih tive que colocar denovo :\\
头像

Luizinhou

  • 帖子: 3
  • 注册: 周二 9月 06, 2011 11:47 am

Re: Rodapé

Luizinhou » 周四 9月 08, 2011 2:51 pm

comecei outro qualquer, sem conteúdo nenhum, só para testar o rodapé

代码: 全选
<html>
<link rel="stylesheet" href="css/teste2.css" type="text/css" media="screen">
<body>
<center>
<div id="total">
<div id="content">123</div>
<div id="flooter">456</div>
</div>
</center>
</body>
</html>


代码: 全选
* {
   margin:0;
   padding:0;
}

#content {
   width:940px;
   background-color:#F00;
   height:100%;
}

#flooter {
   width:940px;
   background-color:#06F;
   height:40px;
}


o modelo fica com barra de rolagem mesmo sem conteúdo =\
tentei colocar padding/margin bottom no flooter para tentar fazê-lo subir, mas não consegui
头像

Luizinhou

  • 帖子: 3
  • 注册: 周二 9月 06, 2011 11:47 am

Re: Rodapé

HTML.net » 周五 9月 09, 2011 7:06 am

Você apenas tem que se certificar de que o corpo ea "total"-div também é 100% de altura:

* {
margin: 0;
padding: 0;
height: 100%;
}

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Rodapé

himler » 周四 9月 29, 2011 1:23 am

Fiz uns testes este código funciona para o firefox, e o Chrome, mas não funciona no IE 9, afinal qual é o problema da Microsoft ?
头像

himler

  • 帖子: 24
  • 注册: 周五 1月 28, 2011 8:34 pm

Re: Rodapé

Jessica-Ribeiro » 周二 10月 18, 2011 12:09 pm

Pode utilizar da seguinte maneira:

<div id=rodape>
<div id=centralizar>teste</div>
</div>

css:

#rodape { position: absolute; bottom: 0; left:0; width: 100%; height: 100px; }
#centralizar { position: relative; width: 960px; margin: 0 auto; }


Att,

http://www.devmedia.com.br/post-16596-Html-basico-codigos-html.html
头像

Jessica-Ribeiro

  • 帖子: 6
  • 注册: 周二 10月 18, 2011 11:48 am

Re: Rodapé

atik » 周三 10月 19, 2011 9:43 am

oi,
você pode usar essa regra de estilo, sempre que necessário.

#backbottom {
background-color: #905414;
bottom: 0;
height: 80px;
left: 0;
overflow: hidden;
padding-top: 10px;
position: absolute;
text-align: center;
width: 100%;
}

#footer {
background-color: #72400A;
height: 80px;
margin: 0 auto;
padding-top: 10px;
text-align: center;
width: 940px;
}
头像

atik

  • 帖子: 471
  • 注册: 周一 10月 17, 2011 4:55 pm


+ 发表回复

分页: 1 / 1