Ir para conteúdo

POWERED BY:

Arquivado

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

andregv

layout cabecalho | Corpo | rodape

Por , em Desenvolvimento frontend

Recommended Posts

andregv    0

andregv
Postado

Olá galera!

 

Estou tentando desenvolver um layout similar a um que seria facilmente desenvolvido usando frameset (assim como no site do Bradesco)... o motivo de não poder usar frameset é que no frame do topo existe um menu drop-down... o que invibialilza o seu uso (caso exista uma maneira... serei muito grato).

 

Então estou tentando fazer sem frameset... consegui de uma forma... mas por problemas de versão do IE (funciona o ie7 e não no <= ie6). Quando uso as condicionais [iF ie]... ele fica no lugar... porém o topo e o rodape ficam com uma parte do lado esquedo f*** da tela (por causa do right: 18px).

 

Minha estrutura básica é a seguinte:

 

<!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>Exibição de Layout em DIV</title>
<style type="text/css">
body, td, th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}
body {
	margin: 0px;
	height: 100%;
	width: 100%;
	overflow: auto;
}
#topo {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 90px;
	background-color: #FFCC00;
	z-index: 1000;
}
#corpo {
	z-index: 1;
	margin-top: 90px;
	margin-bottom: 30px;
}
#rodape {
	position: fixed;
	bottom: 0px;
	height: 30px;
	width: 100%;
	background-color: #CCCCCC;
	z-index: 100;
	overflow: hidden;
}
</style>
<!--[if IE 5]>
<style type="text/css">
body {
	overflow: auto;
	height: 100%;
}
#topo {
	position: absolute;
	right: 18px;
}
#rodape {
	position: absolute;
	right: 18px;
}
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
html {
	overflow: hidden;
	padding-left; 80px;
}
body {
	height: 100%;
	overflow: auto;
}
#topo {
	position: absolute;
	right: 18px;
}
#rodape {
	position: absolute;
	right: 18px;
}
</style>
<![endif]-->
</head>
<body>
<div id="topo">
	<div class="usuario">
		André Gomes Vieira
	</div>
	<div class="acesso">
		Último Acesso: 03/04/2008 15:00:00
	</div>
</div>
<div id="corpo">
	<h1>Aqui entrará a parte com rolagem</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
	<h1>Corpo</h1>
</div>
<div id="rodape">
	rodape
</div>
</body>
</html>

Se alguém poder ajudar, agradeço desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

mas é que FIXED não funciona no IE6

por que usar fixed não seria melhor seguir uma tuto desta que não necessita de position:

 

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

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

 

nesses usa-se float:; para alinhar os objetos ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

andregv    0

andregv
Postado

Agradeço pelo post.

 

Porém, como mencionado... preciso que tanto o topo, quanto o rodapé fiquem sempre visíveis... como ocorre quando usamos frameset.

 

Com relação ao "position: fixed;"... é conhecido que o mesmo não é interpretado a partir do ie7... assim, o layout apresentado acima é exibido perfeitamente no firefox 2+, opera 9+ e ie7. Para o ie6 ou inferior... utilizei os comentários do ie, colocando a "position: absolute;". O problema com esse código é que quando coloco a posição para absoluto, o mesmo fica por cima da barra de rolagem. Tentei contornar isso com um a posição right: 18px; isso faz com que a tela role na mesma medida para a esquerda, fazendo com que se perca parte do conteúdo (já tentei usar padding, margin-left... entre outros... sem sucesso).

 

Caso alguém possa ajudar, agradeço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

de uma olhada neste links:

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

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

 

falow abraç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