Ir para conteúdo

POWERED BY:

Arquivado

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

Wilherme

layout

Por , em Desenvolvimento frontend

Recommended Posts

Wilherme    0

Wilherme
Postado

Boa noite galera, estou com um problema no que diz respeito ha tamanho de telas.

 

gostaria que o layout da seguinte forma:

 

estrurura.png

 

 

porem quando faço meu código ele fica assim:

 

estrututa2.jpg

 

 

Como poderia fazer para que o rodapé ficasse fixo no final da tela indiferente do meu monitor?

 

meu Css

 

body, html {
	background-image: url(bgFundoBR.jpg);
	font-family:"Arial";
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

a {
	color:#888888;
	text-decoration: none;
}

ul {
	list-style: none;
	
	
}

/* INICIO DAS CLASSES */
.clear {
	clear: both;	
}



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

/* FINAL DAS CLASSES */

/* INICIO DAS DIV */

#topo {
	/*background-image: url("bgFund0AZ.jpg");*/
	
	width:800px;
	height: 120px;
	margin:10px auto;
	padding:0px auto;
	
}

#menu {
	width: 400px;
	margin: auto;
}

#menu ul li {
	float: left;
	margin: 0 10px;	
}

#texto_contato {
	text-align:center;
}

#Fmail {
	padding: 10px;
}

#wrap {
	padding: 10px;
}

#noticia {
	/*background-image: url("bgFundoAZ.jpg");*/
	border:1px solid #888;
	width:920px;
	height: 390px;
	margin:10px auto;
	padding:0px auto;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
}

#botao_env_limp {
	text-align:center;
}

#rodape_Final {
	background:#000000;
	border:0px solid #888;
	width:100%;
	height: 100px;
	margin:10px auto;
	padding:0px auto;	
}

#rodape_menu{
	background:#000000;
	width:800px;
	height: 100px;
	margin: 0 auto; /* CENTRALIZA A DIV */
	text-align:left;
}
/* FINAL DAS DIV */

Meu html

 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Prado Pinturas</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="style.css" rel="stylesheet" type="text/css" />
         
</head>
            
    <body>
    	<div class="tudo">
    	<div id="topo">
    		<img src="topo.png" />
    	</div>
    		
  		<div id="menu" class="center">
  			<ul>
  				<li><a href="index.html">Home</a></li>
  				<li><a href="servicos.html">Serviços</a></li>
  				<li><a href="contato.html">Contato</a></li>
  			</ul>
  			<div class="clear">
  				
  			</div>
  			  		</div>
                    	
  	<div id="noticia">
  		<img align="left" src="logo.png" style="margin:10px; margin-left:100px;">
  		
  		<br>
  		Prado Pinturas é uma empresa especializada no mercado de acabamento interno e externo e vem atuando 
  		fortemente no mercado há 5 anos. 
  		Temos uma equipe especializada e altamente treinada para os diversos serviços.
  		</div>
  	
  	<div id="rodape_Final">
  		<div id="rodape_menu" align="center">
  			<ul>
  				<li><a href="index.html">Home</a></li>
  				<li><a href="servicos.html">Serviços</a></li>
  				<li><a href="contato.html">Contato</a></li>
  			</ul>
  		</div>
  	</div>		
    </div>
    </body>
</html>

Onde estou errando? Seria essa forma de fazer ou estou indo pelo lado mais complicado?

 

 

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wilherme    0

Wilherme
Postado

Achei uns exemplos aqui mas não deu muito certo pois a hora que coloco no notebook não fica igual a resolução de um monitor de 22"

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wilherme    0

Wilherme
Postado

Obrigado Jonathan Cutrim Lacerda

 

no css usei

 

#rodape_Final {
	background:#000000;
	border:0px solid #888;
	width:100%;
	height: auto;
	margin:10px auto;
	padding:0px;	
	position: absolute;
	bottom: 0;
}

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