Ir para conteúdo

POWERED BY:

Arquivado

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

frequenciavirtual

[Resolvido] Div no topo

Por , em Desenvolvimento frontend

Recommended Posts

frequenciavirtual    0

frequenciavirtual
Postado

estou com um problema que pelo que vi é bastante comum.

 

minha div que deveria aparecer no topo esta aparecendo uns 300px abaixo

 

#container {
width: 1001px;
margin:0 auto;
background:#DFCFB1;
overflow:hidden;
}
#container #topo {
width:975px;
height:137px;
background:#CCC;
margin: 0 0 0 25px;
}

No Firefox funciona bem. O problema esta no IE6.

 

existe tambem uma div que fica a esquerda de cima abaixo. e todo o site fica ao lado desta div #lateral_esquerda.

Porem o topo nao fica no topo.

#container #lateral_esquerda { 
text-align: center;
background:#C40002;
width:25px;
float:left;
height:15000px;
padding-top: 200px;
margin-bottom:-15000px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Poste um link para o teu site, apenas por este trecho, é impossível identificarmos esse tipo de falha.

 

siga estas instruções

http://forum.imasters.com.br/topic/212439-como-criar-um-topico-para-o-seu-problema/page__view__findpost__p__1613498

Compartilhar este post

Link para o post
Compartilhar em outros sites

santosbio    0

santosbio
Postado

Sugestão de algumas melhorias no seu código que poderiam ajudar a resolver esse problema:

 

 


#container {
       width: 1001px;
       margin:0 auto;
       background:#DFCFB1;
       overflow:hidden;
}

 

 

 

Nesse trecho, como você quer um container pra todo seu conteúdo, é melhor utilizar altura e largura relativas (e não absolutas). Um exemplo seria o seguinte:

 


#container {
       width: 100%;
height: 100%;
       background:#DFCFB1;
       position:relative;
}

 

 

Após isso, utilize posição absoluta pra definir a posição do restante das divs.

Fazendo isso, não tem erro.

=]

Compartilhar este post

Link para o post
Compartilhar em outros sites

frequenciavirtual    0

frequenciavirtual
Postado

Problema resolvido com a dica do santosbio e mais algumas pequenas alterações.

Fiz assim:

 

#container {
width: 1001px;
margin:0 auto;
background:#DFCFB1;
overflow:hidden;
position:relative;

}
#container #topo {
width:975px;
height:137px;
background:#CCC;
margin: 0 0 0 25px;

}
#container #lateral_esquerda {
text-align: center;
background:#C40002;
width:25px;
float:left;
height:15000px;
padding-top: 200px;
margin-bottom:-15000px;
position:absolute;
display: inline;
left: 0px;
}

 

Valeu Obrigado!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ramael    0

Ramael
Postado

Só apontando algumas coisas que “eu” estranhei, e que declararia diferente:

 

Já que você está utilizando o ID e não o CLASS pra declarar seus estilos, então não tem porque colocar “#container #topo”, pois dessa forma você está dizendo que só terão determinados estilos os ID TOPO que estiverem dentro do ID CONTAINER. Mas se são ID’s eles são (deveriam ser) únicos dentro do documento, logo poderiam ser declarados somente como #topo e #container.

 

Outra coisa..... o DIV não chama topo ?? Então por que declarar como “auto” o margin superior e o inferior ?? Declara zero, ou então nem declara margin.

 

Também não entendi as medidas usadas para o div da lateral esquerda.

 

Baseando-me na sua imagem fiz o seguinte código:

 

CSS

body {
margin: 0;
padding: 0;
font: 12px arial, verdana, helvetica, sans-serif;
font-weight: bold;
text-align: center;
}

img {
border: 0
}

a {
text-decoration: none;
border: 0;
outline: none;
color: #000;
}

.container {
width: 100%;
height: 600px;
margin: 0;
background: #dfceb0;
}

.esq {
width: 2%;
height: 100%;
background: #c40002;
float: left;
}

.topo {
background: #f9ac40;
height: 130px;
width: 98%;
float: left;
}

.menu {
background: #f3dbb9;
width: 98%;
height: 25px;
float: left;
}

.blocoA, .blocoB {
background: #a39588;
width: 47%;
height: 400px;
float: left;
margin: 1%;
}

 

HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
 <head>
<title>Teste de DIV's</title>
<link rel="stylesheet" href="teste.css" type="text/css" media="screen" />
 </head>
 <body>
<div class="container">
	<div class="esq"> </div>
	<div class="topo">TOPO DA PÁGINA</div>
	<div class="menu">MENU</div>
	<div class="blocoA">BLOCO 1</div>
	<div class="blocoB">BLOCO 2</div>
</div>
 </body>
</html>

 

…tô meio de bobeira agora e precisando tirar a cabeça daquele javascript %$#%#...rssss... Por isso que fiz.

 

Não estou dizendo que esta forma que postei é a correta, a absoluta, até porque existe mais de uma maneira de fazer um mesmo layout, aliás existe uma infinidade de maneiras. Poderia ter usado um posicionamento absoluto, como disse o Santosbio, que também ficaria muito bom.

 

Teria que ir montando a página e testando nos browsers pra ver o que melhor se adequaria, de repente até usando um pouco de JS pra utilizar melhor o espaço da tela...

 

 

T+

Ramael

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