Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ProgramadorDesktop

[Resolvido] Problema com o css da página.

Por , em Desenvolvimento frontend

Recommended Posts

ProgramadorDesktop    0

ProgramadorDesktop
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

Bem... Você pode fazer o background na boby ou duas divs. Geralmente eu faço mais ou menos assim:

 

<style>
   #topo { widht:100%; heigth:200px; background:#000; }
   #conteudoTopo { widht:860px; margin:0 auto; }
</style>
<div id="topo">
   <div id="conteudoTopo">
       <!--Aqui vai todo o conteudo da div, a que tem 860 de largura centralizada.-->
   </div><!--conteudoTopo-->
</div><!--topo-->

 

Seria mais ou menos isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

ProgramadorDesktop    0

ProgramadorDesktop
Postado

É isso mesmo, Obrigado.

Mais fico grato se poderem me dar mais dicas sobre esse esquema!

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

É 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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

você pode seguir a dica do allex_carvalho ... você pode colocar uma imagem de fundo repetindo no eixo-x ... ambos resolveriam seu problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ProgramadorDesktop    0

ProgramadorDesktop
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

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;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

ProgramadorDesktop    0

ProgramadorDesktop
Postado

Utilizei a forma do Allex e da Diéssica, e o problema foi resolvido, Muito Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito