Ir para conteúdo

POWERED BY:

Arquivado

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

Filipe Gonçalves

Posicionar Div Rodope

Por , em Desenvolvimento frontend

Recommended Posts

Filipe Gonçalves    0

Filipe Gonçalves
Postado

Boa Noite Pessoal,

 

estou precisando de algo aparentemente simples porém não estou conseguindo fazer funcionar, já vi diversas soluções possíveis, inclusive aqui no Imasters, mas nada funcionou no meu caso.

 

Preciso fazer com a div # bottom fique alinhada no final da pagina como rodopé. Porém creio que algumas das outras divs deva estar impedindo as funções funcionarem corretamente. Segue o code:

 

/* CSS Document */
html, body { height:100%; }
body {
margin:0;
background-color:#D4CBBA;
background-image:url(imgs/fundo.jpg); 
background-repeat:repeat-x;
background-position:center top; 
}
#corpo {
position:relative;
margin:0 auto;
text-align:center;
width:835px;
min-height: 100%;
}
* html #corpo {  height: 100%; /* hack para IE6 que trata height como min-height */}
#links {
position:absolute;
float:right;
margin:0px;
color:white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:14px;
word-spacing: normal;
line-height: 38px;
padding-top: 340px;
padding-left: 40px;
text-align: left;
}
#foto_menu {
position:absolute;
margin:0px;
top: 80px;
left: 555px;
}
#cont {
position:absolute;
float:left;
margin:0px;
color:black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
word-spacing: normal;
line-height: 38px; 
top :385px; 
width:99%;
min-height:435px; 
       height:auto !important; 
text-align:justify;
border: thin solid #000000; 
padding:5px;
padding-bottom: 60px;
}
#ext { padding-bottom:30px; }
#bottom {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
word-spacing: normal;
line-height: 12px;
text-align:center;
color: #f82c21;	
position: absolute;
bottom: 0px;
width:100%;
}
#bottom p {
margin:0;
font-weight:bold;
color:#060;
}
.clear {clear:both;}


<html>
<head>
<title>Ozeias Rodrigues</title>
<link href="estrutura.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="ajax.js"></script>
</head>
<body>
<div id="corpo">
<div id="ext">
<div id="foto_menu"><img src="imgs/foto_menu.png" alt="Links_RedesSociais" width="418" height="625" /></div>
<div id="links"><a href="index.php">Inicial</a> | <a href="#">Agenda</a></div>
<div id="cont"><?php require 'main.php' ?></div>
<div class="clear"></div>
<div id="bottom"><?php require 'bottom.php' ?></div>
</div>
</div>
</body>
</html>

 

Pessoal espero que consigam achar meu erro... já quebrei minha cabeça e não achei nada.

 

Agradeço a atenção.

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunosk2    0

brunosk2
Postado

É só tirar o position absolute do #cont.

Mas isso deve gerar outros problemas de posicionamento, recomento que você não use tanto position: absolute.

Construa o layout em blocos, usando float e clear, o position além de bugar fácil, pode acarretar problemas em outros navegadores (IE).

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