Ir para conteúdo

POWERED BY:

Arquivado

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

goncalves2345

página centralizada em qualquer navegador

Por , em Desenvolvimento frontend

Recommended Posts

goncalves2345    0

goncalves2345
Postado

A questão e a seguinte o site está centralizado no navegador, mas eu queria que o topo e o rodapé se expandissem em toda a página e não ficasse centralizado. Tem como resolver esse problema?

 

segue o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.{ 
	margin: 0; 
	padding: 0; 
	text-align:center; /* hack para o IE */  
} 
/* Zerando as margens e preenchimentos de todas as tags */
body { 
	margin:0; 
	padding:0; 
	background:#ccc; 
	text-align:center; /* hack para o IE */ 
} 
#tudo { 
	background-color: #CCC; 
	width: 760px; 
	margin:0 auto;  
	border:#999 solid 1px;  
	text-align:center; /* "remédio" para o hack do IE */   
} 
#conteudo { 
	padding: 5px; 
	background-color: #06F; 
	font: 12px "Verdana", Helvetica, sans-serif; 
	color:#000000;
	text-align:center; /* hack para o IE */ 
} 
#topo { 
	background-color: #F00; /* definido cor de background para o topo */ 
	height: 150px; /* definindo altura de 100px */ 
	width:100%;
	text-align:left; /* hack para o IE */ 
}
#rodape { 
	background-color: #F00; /* definido cor de background */ 
	height: 40px; /* definindo altura de 40px */ 
	text-align:center;
	color:#FFFFFF; 
	font: 14px "Verdana", Helvetica, sans-serif; 
	clear: both;  /* não permitindo que objetos "flutuantes" obstruam o rodapé. */
}
</style>

</head>
<body>
	<div id="tudo"> 
    	<div id="topo">
	
		</div><!--fim div topo-->
			<div id="conteudo">
				<br />	
                <br />
                <br />
                <br />
                <br />
                <br />	
                <br />
                <br />
                <br />
                <br />
                <br />	
                <br />
                <br />
                <br />
                <br />
                <br />	
                <br />
                <br />
                <br />
                <br />
                <br />	
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
			</div><!--fim div conteúdo-->
		<div id="rodape">Rodapé</div><!--fim div rodapé-->
	</div><!--fim div tudo-->
</body>
</html>

Desde já eu agradeço pela atenção!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Francispansa    6

Francispansa
Postado

Gonçalves, bom dia.

 

Deixarei aqui a forma com a qual trabalho.

 

Estrutura HTML

        <div  class="container">
            <div id="header">
                <div class="header">
                    HEADER 960PX
                </div>
            </div>

            <div id="content">
                CONTENT 960PX
                <div class="clear"></div>
            </div>

            <div id="footer">
                <div class="footer">
                    FOOTER 960PX
                </div>
            </div>
        </div>

 

Estrutura CSS

.clear{
    clear: both;
}
body, html{
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0;
}
#container{
    height:auto !important;
    height:100%;
    min-height:100%;
}
#header{
    width: 100%;
    height: 100px; /* ajustar a altura do seu projeto */
    background: #044;
    color: #FFF;
    display: block;
}
.header{
    width: 960px;
    margin: 0 auto;
}
#content{
    width: 960px;
    margin: 0 auto;
    border: 1px solid #999;
    background: #999;
    min-height: 400px; /* remover */
}
#footer{
    position:absolute;
    bottom:0px;
    width:100%;
    background: #044;
}
.footer{
    width: 960px;
    height: 100px; /* ajustar a altura do seu projeto */
    margin: 0 auto;
    display: block;
    background: #CCC
}

 

 

Espero que ajude. :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

goncalves2345    0

goncalves2345
Postado

Por Francis muito obrigado pela ajuda. Esse exemplo ficou muito bacana, só deu um probleminha quando eu coloquei a resolução de tela pra 800 x 600 um pedaço do header não preencheu completamente ficou em branco. Você sabe porque isso acontece?

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielviana    0

danielviana
Postado

primeiro crie uma div que para que todas as outras estejam dentro dela, e esta tera width: 100%, e nas divs filhas defina uma width fixa como por exemplo width: 970px e coloque na mesma o margin: auto;

Compartilhar este post

Link para o post
Compartilhar em outros sites

goncalves2345    0

goncalves2345
Postado

Então eu já fiz isso e ficou bom.

 

segue o código:

@charset "utf-8";
/* CSS Document */

*{
	margin:0; 
	padding:0;
}

body{
	text-align:center;	
	background-color:#F00;	
}

#wrapper{
    width: 1250px;
	height: 800px;
	background-image:url(../imgs/wrapper.jpg);
    background-repeat:repeat-x;
	margin: 0 auto;
}

#header{
    width: 1250px;
    height: 182px;
	background-image:url(../imgs/header.jpg);
    background-repeat:repeat-x;
	margin: 0 auto;
	padding-top:20px;
}


#content{
    width: 800px;
    height: 555px;
    background-image:url(../imgs/content.jpg);
    background-repeat:repeat-x;
    margin: 0 auto;
	text-align:left;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/	
	text-align:left; /*volta o alinhamento padrão*/  
}
    
#footer{
    width: 1250px;
    height: 58px;
	background-image:url(../imgs/footer.jpg);
    background-repeat:repeat-x;
    clear: both; 
	padding-top:20px;
}

#footer p{
	font-family:Arial, Helvetica, sans-serif; 
	color:#F7F7F7; 
	font-size:16px;
	margin: 0 auto;
}

Valeu pela atenção!!

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