Topo e rodapé fixos com meio dinamico?

Odskan · Outubro 22, 2008

Olá pessoa, preciso fazer o seguinte, tenho um site que tem q ter uma imagem de rodape e uma de topo fixas, independete da resoluçao, mas o meio dinamico, o meio vai ter 3 imagens, elas tem q ficar mais ou menos com a mesma distancia do topo e rodape.

e para completar, gostaria que se o usuario visse o site com uma resoluçao de 800x600, o site ficasse fixo como 1024x768.

Pois o que eu fiz ate agora, ate que fica legalzinho, mas quando o cara restaura a janela ou a resoluçao eh baixa, o rodape e o topo, sobrepoe todo o meio. caso n entedam posso colocar um exemplo depois... abraços

arquivos:

http://rapidshare.com/files/156538752/Teaser2.rar

css:

/* cabeçalho */
#topo { background-color:#F2FAFF; width:50%; position:absolute; right:0px; top:0px; height:125px;}
#topoSup { background-image:url(../img/img_topo.jpg); background-repeat: no-repeat; position:absolute; top:0px; width:1003px; left:50%; margin-left:-501px; height:150px; }

#frasco {background-image:url(../img/img_frascos.gif); background-repeat: no-repeat; width:235px; position:absolute;bottom:10%; right:18%; float:right; height:340px;}

#footer { background:url(../img/1pixel.jpg) repeat-x; width:50%; position:absolute; bottom:0px; left:0px; height:130px; }
#footerInf { background-image:url(../img/img_centro.jpg); height:150px; background-repeat: no-repeat; width:1003px; position:absolute; bottom:0px; right:50%; margin-right:-501px;}
#footerGoogle { background-image: url(../img/img_google.gif); background-repeat: no-repeat; width:88px;height:7px; position:absolute; bottom:45px; cursor:pointer; right:11%;display:block; }

#texto { font-family:Verdana, Arial, Helvetica, sans-serif; color:#00125C; font-size:9px; line-height:20px;  width:380px; position:absolute; bottom:20px; z-index:5; left:22%; margin-left:-190px; }

#titulo { font-family:Verdana, Arial, Helvetica, sans-serif; color:#00125C; font-size:12px; margin-left:40px;}

/* Botões */
#botaoCad a {
width: 191px; /* largura do botao */
height: 47px; /* altura do botao */
background-image: url(../img/img_cadastro.jpg);
background-repeat: no-repeat;
display:block;
}
#botaoCad a:hover {
width: 191px; /* largura do botao */
height: 47px; /* altura do botao */
background-image: url(../img/img_cadastroover.jpg);
background-repeat: no-repeat;
}
#botaoFale a {
width: 191px; /* largura do botao */
height: 47px; /* altura do botao */
background-image: url(../img/img_fale.jpg);
background-repeat: no-repeat;
display:block;
}
#botaoFale a:hover {
width: 191px; /* largura do botao */
height: 47px; /* altura do botao */
background-image: url(../img/img_faleover.jpg);
background-repeat: no-repeat;
}
/* posição dos botões */
#pop{display:none;position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-100px;padding:0px;width:383px;height:280px;border:1px solid #6AC8FF}

#pop2{display:none;position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-100px;padding:0px;width:383px;height:280px;border:1px solid #6AC8FF}

/* campos dos botoes */
.td_input2 {	
		background-image: url(../img/campo.jpg);
		background-repeat: no-repeat;
		width: 280px;
		height: 25px;
		padding: 0px 0 0 10px;	
}
.td_input3 {	
		background-image: url(../img/campoarea.jpg);
		background-repeat: no-repeat;
		width: 280px;
		height: 98px;
		padding: 0px 0 0 10px;	
}
input {
	background-color:transparent;
	border:0px;
	width: 240px;
	height: 15px;
	font-size: 12px;
	font-family: "verdana";
	color: #6AC8FF;
	font-weight: bold;
	margin:0px 0 0 0;
}
textarea {
	background-color:transparent;
	border:0px;
	width: 240px;
	height: 90px;
	font-size: 12px;
	font-family: "verdana";
	color: #6AC8FF;
	font-weight: bold;
	margin:0px 0 0 0;
}
/*select do form*/
select {
	background-color:#FFFFFF;
	border:0px;
	width: 240px;
	height: 15px;
	font-size: 12px;
	font-family: "verdana";
	color: #6AC8FF;
	font-weight: bold;
}
option {
background-color:transparent;
border:0px;
}
.btn_enviar a { width:29px; height:31px; background-image:url(../img/btn_enviar.jpg); float:right; margin:5px 30px 0 0; }

/* remover marca de links */
a:link {
color:#FFFFFF;
text-decoration:none;
}
a:visited {
color:#FFFFFF;
text-decoration:none;
}
a:hover {
color:#FFFFFF;
text-decoration:underline;
}
a:active {
color:#FFFFFF;
text-decoration:underline;
background-color:#000000;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Laboratório Ary Costa</title>
		<meta name="robots" content="all" />
		<link href="css/default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" language="javascript" src="js/default.js"></script>
	<script type="text/javascript" language="javascript" src="js/contato.js"></script>
	</head>		   
	<body>
	<div style="width:100%;">
	<div id="topo" style="z-index:1"></div>
	<div id="topoSup" style=" z-index:2;"></div>
	<div style="z-index:5;"><img src="img/texto_centro.jpg" style="margin-top:20%; margin-left:20%;"/></div>
	<!-- inicio dos botões -->
	<div style="width:800px; padding:15% 0 0 55%; margin-left:-400px; margin-top:-100px; z-index:4;">
	<div id="botaoFale" style=" float:left; z-index:5;">
	<a href="#" onclick="document.getElementById('pop').style.display='block';"></a>
	</div>
	<div id="pop" style="background-color:#FFFFFF; width:383px; height:280px; z-index:5;">
	<div style="background-color:#82C8EA; width:383px; height:20px; top:0px;">
	<a href="#" onclick="document.getElementById('pop').style.display='none';">
	<img src="img/fechar.jpg" style="text-decoration:none; float:right; padding-right:5px; border:none;" /></a></font>
	</div>
	<p>
	<!-- div com form do fale conosco -->
	<div id="titulo">Envie suas dúvidas, comentários e sugestões<br />
 				para a empresa em questão:
	 <br /><br />
	<form name="faleconosco" action="lala.php" method="post">
	<table cellpadding="0" class="table_center">
	<tr><td class="td_input2"><input name="nome" type="text" value="Nome" onClick="limpa_input(this);" onBlur="limpa_input(this);" ></td></tr>
	<tr><td class="td_input2"><input name="email" type="text" value="E-mail" onClick="limpa_input(this);" onBlur="limpa_input(this);"></td></tr>
	<tr><td class="td_input3"><textarea name="mensagem" onClick="limpa_input(this);" onBlur="limpa_input(this);">Mensagem</textarea></td></tr>
	<tr><td><div class="btn_enviar"><a href="#" onclick="validaForm2()"></a></div></td></tr>
	</table>										
	</form></div>

</div>
	<div id="botaoCad"  style="float:left; padding-left:20px; z-index:5;">
	<a href="#" onclick="document.getElementById('pop2').style.display='block';"></a></div>
	</div>
	<div id="pop2" style="background-color:#FFFFFF; width:383px; height:280px; z-index:5; ">
	<div style="background-color:#82C8EA; width:383px; height:20px; top:0px;">
	<a href="#" onclick="document.getElementById('pop2').style.display='none';">
	<img src="img/fechar.jpg" style="text-decoration:none; float:right; padding-right:5px; border:none;" /></a></div>
<p>
<!-- div com form do cadastre-se -->
<div id="titulo">Cadastre-se para receber nossos informativos e<br />
	 seja avisado quando nosso site estiver no ar:
	 <br /><br />
	 <form name="cadastro" action="lala.php" method="post">
	<table cellpadding="0" class="table_center">
	<tr><td class="td_input2"><input name="nome" type="text" value="Nome" onClick="limpa_input(this);" onBlur="limpa_input(this);"></td></tr>
	<tr><td class="td_input2"><input name="email" type="text" value="E-mail" onClick="limpa_input(this);" onBlur="limpa_input(this);"></td></tr>
	<tr><td class="td_input2">
	<select name="tipo" type="text" style="background-color:#DFF3FF; border:none; height:auto;" >
	<option value="1" selected="selected">pessoa1</option>
	<option value="2">pessoa2</option>
	</select></td></tr>
	<tr>
	<td><div class="btn_enviar"><a href="#" onclick="validaForm()"></a></div></td>
	</tr>
	</table>										
	</form></div>
</div>
	<div id="frasco" style=" z-index:3;"></div>
	
	<!-- inicio do rodape -->
	<div id="footer" style=" z-index:2"></div>
	<div id="footerInf" style="z-index:2;" ></div>
	<a href="http://www.google.com.br" target="_blank"><div id="footerGoogle" style="z-index:5"></div>
	</a>
	<div id="texto" >
	<strong>texto rodape</strong><br />
	mais texto rodape sobre localizaçao<br />
	mais texto rodape sobre telefone e contato<br />
	ultimo texto falando sobre alguma coisa</div>
	</div>
	</body>
	</html>

Grato por quem editou :)

n sabia, desculpe. :$

William Bruno · Outubro 22, 2008

Procura por fixed, tem esse material aqui, que te diz como fazer para o IE, e os demais..

Rodape fixo:

http://forum.imasters.com.br/index.php?showtopic=291579

Position: fixed:

http://forum.imasters.com.br/index.php...92&hl=fixed

Só posicionar o topo com top: 0; e o rodape com bottom: 0;

Odskan · Outubro 22, 2008

Ok ok... até ai tudo bem, eu meio q ja fiz... tanto q ele ficou colado nas partes superiores, mas quando eu restauro ela fica toda desconfigurada... pera ai, vou mandar os arquivos pra quem quiser dar uma olhada...

William Bruno · Outubro 30, 2008

e para completar, gostaria que se o usuario visse o site com uma resoluçao de 800x600, o site ficasse fixo como 1024x768.

Pois o que eu fiz ate agora, ate que fica legalzinho, mas quando o cara restaura a janela ou a resoluçao eh baixa, o rodape e o topo, sobrepoe todo o meio. caso n entedam posso colocar um exemplo depois... abraços

Explica melhor essa parte..

Se você não quer que o site seja tão liquido assim, defina um min-width, e min-height, que se o usuário diminuir muito o tamanho da janela, irá criar barras de rolagem.

Entrar

Arquivado

Topo e rodapé fixos com meio dinamico?

Recommended Posts

Odskan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Odskan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante