Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Então tenho uma "header" de width = 860px, heigth = 84px, com background cinza, e centralizei esse background, então por exemplo o conteúdo fica centralizado de ambos os lados a 860px, mais quero fazer esse background continue até o fim da página.
Ficando assim uma faixa cinza, com o conteúdo centralizado a 860px.
Só que não estou conseguindo fazer com que o background se repita até o fim do dá página.
Queria que por favor se me ajudarem ficarei grato.
Observação: O que quero fazer é o mesmo estilo do header do imasters, o background continua até o fim, e o conteudo fica centralizado.
Fico Grato!
É isso mesmo, Obrigado.
Mais fico grato se poderem me dar mais dicas sobre esse esquema!
>
É isso mesmo, Obrigado.
Mais fico grato se poderem me dar mais dicas sobre esse esquema!
Que dicas a mais você deseja? Deu algum problema? Se sim, posta o código ai.
você pode seguir a dica do allex_carvalho ... você pode colocar uma imagem de fundo repetindo no eixo-x ... ambos resolveriam seu problema.
Vou ver se desse novo jeito que mencionou vá da certo.
O problema é aqui, é quando diminui o layout aumenta body.
<style type="text/css">
/RESET/
*{margin:0px; padding:0px;}
body{}
/HEADER/
#header{width:100%; background:#000;}
#header_conteudo{height:90px; width:960px; margin:0 auto;}
#header h1{font:20px Tahoma, Geneva, sans-serif; color:#FFF; width:960px; margin:0 auto; padding:30px;}
/CONTENT/
#content{width:100%; background:#CCC;}
#content_conteudo{width:960px; height:500px; background:#FFF; margin:0 auto;}
/FOOTER/
#footer{width:100%; background:#000;}
#footer_conteudo{height:50px; width:960px; margin:0 auto;}
/**/
</style>
</head>
<body>
<div id="header">
<div id="header_conteudo">
<h1>ERRADO, não é assim!</h1>
</div><!--HEADER CONTEUDO-->
</div><!--HEADER-->
<div id="content">
<div id="content_conteudo">
<h1>O Layout está sendo quebrado!</h1>
</div><!--CONTENT CONTEUDO-->
</div><!--CONTENT-->
<div id="footer">
<div id="footer_conteudo">
</div><!--FOOTER CONTEUDO-->
</div><!--FOOTER-->Ai está o código.
A questão não é que aumenta a boby, ela é o espaço apresentavel na tela. Como você não definiu background para ela, por padrão ela vai ficar em branco. no css, tente colocar assim:
body{width:100%; height:100%; background:#ccc;}
Uma pergunta, o que seria "layout quebrado"?
O Allex está certo, fazendo o que ele disse padroniza o background do seu site, no caso, na cor #CCC. Daí você pode substituir:
#content{width:100%; background:#CCC;}
por
#content{width:100%;}
(Na verdade você nem precisa desse #content, já que o 100% é automático, mas tudo bem. Pode tirar que não vai fazer diferença, por exemplo...)
Outra dica também, é você ao invés de usar
height:500px;
usar
min-height:500px;
Pois height: altura fixa. min-height: altura mínima fixa.
Então com min-height:500px; você determina: não importa quanto conteúdo tenha, a altura MÍNIMA da div será 500 pixels.
Com height o conteúdo colocado na div irá ter um espaço limite (altura), se passar daquele limite, bugará o site. Com min-height ele terá um espaço mínimo, e se passar daquilo não terá problema, já que a div continuará expandindo normalmente.
Tu usou 100% demais. Sem necessidade. E eu sou contra definir largura pra h1, h2... Pra mim são formatações para títulos e devem ser usadas apenas para isso. Não é errado, mas seria mais correto definir a largura com margin:auto em uma div.
Mas segue minha solução cross-browser baseada no seu código:
CSS
*{margin:0px; padding:0px;}
body{background:#ccc;}
#header{width:100%;background:#000;}
#header_conteudo{height:90px; width:960px;margin:0 auto;}
#header h1{font:20px Tahoma, Geneva, sans-serif;color:#FFF;width:960px;margin:0 auto;padding:30px;}
#content_conteudo{width:960px;background:#FFF;margin:0 auto;min-height:500px;margin:auto;}
#footer{background:#000;height:50px;}
#footer_conteudo{width:960px; margin:0 auto;}
(Por favor não use dentro de <style>)
HTML
<div id="header">
<div id="header_conteudo">
<h1>ERRADO, não é assim!</h1>
</div>
</div>
<div id="content_conteudo">
<h2>O Layout está sendo quebrado!</h2>
</div>
<div id="footer">
<div id="footer_conteudo"></div>
</div>Validei na W3C. Tudo certo! Só me desculpa ter tirado os comentários, não consigo trabalhar com eles =(
Obs: height:100% não presta.
[]s,
Diéssica Gurskas
Utilizei a forma do Allex e da Diéssica, e o problema foi resolvido, Muito Obrigado!
Bem... Você pode fazer o background na boby ou duas divs. Geralmente eu faço mais ou menos assim:
Seria mais ou menos isso?