Ir para conteúdo

POWERED BY:

Arquivado

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

uiLhian

Div não acompanha conteúdo na "altura" (heigth)

Por , em Desenvolvimento frontend

Recommended Posts

uiLhian    1

uiLhian
Postado

Bom como podem ver nas imagens abaixo a div #corpo não esta acompanhando o resto do site.

 

mrrb0g.jpg

20gdys2.jpg

 

CSS:

 

* {
margin : 0px;
padding : 0px;
text-decoration : none;
outline : none;
border : none;
list-style : none;
}

#CORPO, #TOPO, #TOPO h1 a, #CONTEUDO, #RODAPE 
{
position: relative;
}

#CORPO  {
border: 1px solid #222;
margin : 50px auto;  
width : 670px;
height : 590px;
text-align : left;
background : #F4F4F4;
}    

#TOPO { 
background : #F4F4F4; 
border-bottom : solid 1px #CFCFCF;
height : 50px;
}

h1.logo {
width : 350px;
height : 50px;
margin : auto 0 0 10px;
padding : 0;
float : left;
display : inline;
}

h1.logo a {
display : block;
height : 100%;
text-indent : -1000px;
overflow : hidden;
background : url(../logo.png) no-repeat;
}

#CONTEUDO
{    
width : 651px;
height : auto;
margin : 10px;
background : #F4F4F4;
border: 1px solid #333;
}

#CONTEUDO, #RODAPE
{
float: left;
}

#RODAPE
{
clear : both;  
height : 50px;
margin-top : 35px;
border-top : solid 1px #CFCFCF;
background : #F5F5F5;
font-family : 'ABeeZee', sans-serif;
width: 100%;
}

bom agradecendo desde-ja pela ajuda.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gerciley    14

Gerciley
Postado

Primeiro verifique atentamente o HTML para ver se não tem nenhuma tag faltando fechar, se mesmo assim não resolver tenta atribuir o Height:100%.

 

Acredito que isso resolve seu problema,

Boa sorte!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

uiLhian    1

uiLhian
Postado

mesmo colocarndo height: 100% ela continua "la em cima" não aumenta.

e tbm no meu caso a altura 100% não serviria. :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gerciley    14

Gerciley
Postado

poste o htm...

Compartilhar este post

Link para o post
Compartilhar em outros sites

uiLhian    1

uiLhian
Postado 

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">    <head>          <title>:)</title><meta http-equiv="Content-Type"  content="text/html; charset=ISO-8859-1" />        <link rel="stylesheet" href="css/cwvaraujo.css" type="text/css"/>    </head>    <body><div id="CORPO"><div id="TOPO"><h1 class="logo"><a href="">cwva</a></h1></div><div id="CONTEUDO">               <img src="thumb.php?img=fotos/teste2.jpg" alt=""/><img src="thumb.php?img=fotos/teste3.jpg" alt=""/><img src="thumb.php?img=fotos/teste4.jpg" alt=""/></div><div id="RODAPE"></div></div>    </body></html>

 

?

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielviana    0

danielviana
Postado

Boa Tarde,

 

na div #CORPO retire o height e coloque min-height: 50px; (por exemplo), e coloque display: inline-block sempre que utilizar o min-height, isso fara com que a div acompanhe o conteudo, vai ficar assim o css:

 

#CORPO{
border: 1px solid #222;
margin: 50px auto;  
width: 670px;
min-height: 50px;
text-align: left;
background: #F4F4F4;
display: inline-block;
}

 

Tente isso e veja se ira funcionar!

Compartilhar este post

Link para o post
Compartilhar em outros sites

uiLhian    1

uiLhian
Postado

hummmm...

até funcionou... :)

 

obrigadão mesmo!

 

só uma duvida isso é "semanticamente correto" ou é uma 'gambiarra' ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

uiLhian    1

uiLhian
Postado

no caso do width: tbm pegar valor "automatico" seria assim ?

#CORPO  {
margin: 50px auto;
width: expression( document.body.clientWidth < 673 ? "672px" : "auto" ); /* seta a min-width para o IE */
min-width: 672px;
min-height: 50px;
text-align: left;
background: #F4F4F4;
  display: inline-block;
  border: 1px solid #333;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielviana    0

danielviana
Postado

sim, poderia ser utilizado isso também, porém não é bacana utilizar este recurso para width, porque assim dependendo da quantidade de conteúdo ira gerar uma barra de rolagem na vertical (no rodapé da página), e isso não é ideal para a navegação na web, por isso o ideal é só utilizar o ajuste automático para height.

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielviana    0

danielviana
Postado

você coloco position: relative; isso não é necessário para esse caso, você utiliza o position quando necessitar de um conteúdo ficar em cima do outro, tente retirar ele e poste o resultado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

uiLhian    1

uiLhian
Postado

mas eu tirei o relative da id #corpo e não notei diferença alguma pois fez o mesmo efeito mostrado na imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielviana    0

danielviana
Postado

apaga essa parte do seu código e veja o que acontece:

#CORPO, #TOPO, #TOPO h1 a, #CONTEUDO, #RODAPE 
{
position: relative;
}

 

pois nesse código você coloca todos eles com o position.

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