7 replies to this topic

[web123]

Olá galera! Começo a usar CSS agora, por favor me ajudem!

Dividi o layout na minha página assim:
div global p/ manter a página ocupando 100% de largura e altura para a resolução de qualquer monitor, depois uma div a esquerda para o menu, uma a direita para o conteúdo variavel da página, e duas divs para o topo e o rodapé.

Eis o problema: Não consigo manter height da minha página a 100% e a minha div "conteúdo" que deve ficar alinhada a direita, esta sobrepondo (cobrindo parcialmente) a div esquerda, isso quando minimizo a janela
É o seguinte, uso o seguinte CSS;

body
{
	text-decoration: none;
	margin: 0;
	padding: 0;
	list-style: none;
	vertical-align:middle;
	border: none;
	height:100%;
}


 #global
{
	margin: 0 auto;
	width: 80%;
	height:100%;
	text-align:left;
				margin-left:auto;
				margin-right:auto;
				border-right-style: groove;
				border-left-style: groove;
	}
	
	
#topo
{
	width: 100%;
	height:130px;
	text-align:center;
	
}	

#esquerda
{
	float: left;
	width: 30%;
	text-align:left;
	height: 400px;
}

#conteudo
{
	  float:right;
	  width: 70%;
	  height: 400px;
	}
	
#rodape
{
	width:100%;
	height:70px;
}

Só para constar, desenvolvo em Asp.Net. Mas acredito que em relaçao ao CSS isso não interfere.
Coloquei as tags html e body com height: 100 % direto na página

Se alguém puder me ajudar! Eu agradeço...

Abraços

[Adriano Trenahi]

opa cara.. então..

coloca o float da coluna conteudo como left tb... provavelmente isso vai resolver.

#esquerda
{
	float: left;
	width: 30%;
	text-align:left;
	height: 400px;
}

#conteudo
{
	  float:left;
	  width: 70%;
	  height: 400px;
	}

[web123]

....Na verdade não faz a menor diferença. Uma alteração que fiz e resolveu alguns probleminhas foi colocar em # Conteudo e # esquerda heigth: auto;

Agora ainda não consigo fazer a minha #global ocupar 100% de altura(heigth) da página. E a minha div conteúdo continua sobrepondo a minha div esquerda quando minimizo a pagina, quando maximizo fica tudo ok. Eu acho que é pq uso float!!! Mas, se eu não usar float....vou usar o q?


ObrigadO

[douglash]

Opa, cara na minha opinião o melhor jeito é criar um layout elastico, e não liquido, assim vc tem mais controle sobre seu layout.. defininido assim um tamanho minimo, no caso utilizei tamanho minimo de 750px. Veja:

*{
margin:0;
padding:0;
}
body
{
	text-decoration: none;
	list-style: none;
	vertical-align:middle;
	border: none;
	height:100%;

}


 #global
{
	margin: 0 auto;
	width: 80%;
	min-width:750px;
	height:100%;
	text-align:left;
	}
	
	
#topo
{
	width: 100%;
	height:130px;
	text-align:center;
	border:1px solid red;
	margin-bottom:3px;
}	

#esquerda
{
	float: left;
	width: 30%;
	text-align:left;
	height: 400px;
	border:1px solid green;
}

#conteudo
{
	  float:left;
	  width: 69%;
	  height: 400px;
	  border:1px solid blue;
	  margin:0 0 3px 3px; 
	}
	
#rodape
{
	width:100%;
	height:50px;
	clear:both;
	border:1px solid black;

	
}

[web123]

Valeu cara adaptei o seu código ao meu, agora não tenho mais o problema da DIV direita sobrepor a esquerda quando a janela é minimizada. Mas tive que manter height: auto; para as DIVS # esquerda e # conteúdo , se eu coloco height com PX o # rodapé acaba cobrindo a DIV # conteúdo quando esta tem controles que ocupam mais de 400px.

Mas ainda tenho problema com height: 100% na #global, coloquei uma borda preta pra poder identificar melhor o problema, se você executar o código abaixo vai entender melhor o que quero dizer;


*{
margin:0;
padding:0;
}

html
{
height:100%;
}

body
{
text-decoration: none;
list-style: none;
vertical-align:middle;
border: none;
height:100%;

}


#global
{
margin: 0 auto;
width: 90%;
min-width:750px;
height:100%;
text-align:left;
border:1px solid black;
}


#topo
{
width: 100%;
height:130px;
text-align:center;
border:1px solid red;
margin-bottom:3px;
}

#esquerda
{
float: left;
width: 30%;
text-align:left;
height: auto;
border:1px solid green;
}

#conteudo
{
float:left;
width: 69%;
height: auto;
border:1px solid blue;
margin:0 0 3px 3px;
}

#rodape
{
width:100%;
height:50px;
clear:both;
border:1px solid black;


}


Se você puder me dá mais uma mãozinha eu agradeço

Abraços

[douglash]

Opa, para mim está tudo ok, não ocorre nenhum erro ou não entendi bem o que vc quer.. veja, teste com este código.

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=utf-8" />
   <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
	<div id="global">
		<div id="topo">
		TOPO
		</div>
		<div id="esquerda">
		ESQUERDA
		</div>
		<div id="conteudo">
		<p>CONTEÚDO teste teste teste teste teste<br />
		teste teste teste teste teste</p>
		</div>
		<div id="rodape">
		RODAPÉ
		</div>
	</div>
</body>
</html>

CSS:

*{
margin:0;
padding:0;
}


body
{
text-decoration: none;
list-style: none;
vertical-align:middle;
border: none;
height:100%;

}


#global
{
margin: 0 auto;
width: 90%;
min-width:750px;
text-align:left;
border:1px solid black;
}


#topo
{
width: 100%;
height:130px;
text-align:center;
border:1px solid red;
margin-bottom:3px;
}

#esquerda
{
float: left;
width: 30%;
text-align:left;
border:1px solid green;
}

#conteudo
{
float:left;
width: 69%;
border:1px solid blue;
margin:0 0 3px 3px;
}

#rodape
{
width:100%;
height:50px;
clear:both;
border:1px solid black;
}

Uma dúvida, vc está testando em qual navegador? Firefox ou IE? Se for no IE terá uma diferença..

[web123]

Eu to testando no IE 8, eu testo em um notebook e em um desktop com um monitor maior...

testei exatamento o código em uma página html como vc postou... Mas ficou todo o conteúdo ficou agrupado no topo da página....


Eu desenvolvo em Asp.net e uso o CSS na minha master page, a div #conteúdo receberá controles diferentes de cada página (contato, orçamento, produtos)...será que eu devo criar um CSS para cada página?

[douglash]

Pois é, o código que eu lhe passei está dentro dos padrões web, está semanticamente correto, e o internet explorer não segue o padrão web. Ou seja, se vc quer criar um site, primeiro o teste no firefox, safari, opera e por ultimo vc testa nos ies da vida.. faça o teste no Mozzila Firefox e me diga se ocorre algum erro, se não ocorrer nenhum erro então vc faz todos os resets necessários, condicionais para o ie e assim seu site ficará correto em todos os navegadores..

Edição feita por: douglash, 27/10/2009, 17:56.