3 Divs, E Somente Uma Centralizada.

#1 d13go

Novato no fórum

Usuários
9 posts

Sexo:Não informado

Posted 27/07/2011, 17:15

Fala pessoal, estou com um problema e não consigo resolve-lo, é o seguinte;

Como nesta imagem que coloquei pra facilitar o entendimento, estou tentando centralizar uma página que seja compatível com navegadores de 800x600 para cima, portanto quero criar uma página que somente a div conteúdo com 726px seja centralizado e a div esquerda e div direita seja as que se encaixam conforme a resolução do usuário, o motivo de estas div`s direita e esquerda, é que tenho dois fundos distintos que deveram encaixar na div conteúdo.

estas div`s esquerda e direita devem ter uma alinhação left, porque devem encaixar na div conteúdo.

Quem puder me ajudar ficarei muito agradecido, valeu!

#2 Diego Bezerra

Diego Bezerra

Moderadores
938 posts

Sexo:Masculino
Localidade:Amazonas
Interesses:Iniciando no C# com MSSQL.

Posted 27/07/2011, 17:26

Ola vc cria as tres e usa o float para as do lado e para o centro vc usa normal

Att.
Diego Bezerra
Agência Kernel - em Breve
Email/msn: diegobezerra@outlook.com
Facebook

#3 d13go

Novato no fórum

Usuários
9 posts

Sexo:Não informado

Posted 27/07/2011, 17:34

<style>

#container{width:100%;text-align:center}
#left{float:left;width:auto;}
#right{float:right;width:auto;}
#center{margin:0 auto;width:726px;}


</style>


<div id="container">
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="center">center</div>
</div>

Fala Diego, tudo bem?

Estou fazendo desse modo, mas as div`s esquerda e direita não "grudam" na div conteúdo, o que pode estar errado?

#4 Inload

Novato no fórum

Usuários
2 posts

Sexo:Masculino
Localidade:Ribeirão Pires

Posted 27/07/2011, 17:46

Não sei se eu entendi o que voce falou mas!

Voce queria que o espaço branco}(indicado por setas no seu desenho) nao aparecesse certo ?
Posted Image


<html>
<head>
<title>oi</title>
<style>


#container{width:100%;text-align:center; background-color:blue;}
#left{float:left;width:auto;background-color:blue;height:500px; }
#right{float:right;width:auto;background-color:blue;height:500px;}
#center{margin:0 auto;width:726px;background-color:yellow;height:500px;}


</style>
</head>
<body>
<div id="container">
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="center">center</div>
</div>
</body>
</html>

Se for isso, eu apenas acrescentei um Height nas Divs...A cor é para ilustrar as barras laterais e o conteudo.

Veja se é isso que voce deseja e caso noa seja, explique de uma maneira melhor.

Abraço cara!

Gabriel Inload

#5 Diego Bezerra

Diego Bezerra

Moderadores
938 posts

Sexo:Masculino
Localidade:Amazonas
Interesses:Iniciando no C# com MSSQL.

Posted 27/07/2011, 17:46

ola eu testei aqui na resolução 1024 com o google chrome e funcionou legal

<!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" />
<title>teste</title>
</head>
<style>

#container{
	width:100%;
	text-align:center;
	background:#666;
	}
#left{
	float:left;
	width:auto;
	background:#666;
	}
#right{
	float:right;
	width:auto;
	background:#666;
	}
#center{
	margin:0 auto;
	width:726px;
	background:#afd;
	}


</style>
<body>


<div id="container">
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="center">center</div>
</div>
</body>
</html>

eu coloquei um background para ficar mais facil entender

Attached Files

imagem_forum.png 14.03KB 1 downloads

Edição feita por: Diego Bezerra, 27/07/2011, 17:57.

Att.
Diego Bezerra
Agência Kernel - em Breve
Email/msn: diegobezerra@outlook.com
Facebook

#6 d13go

Novato no fórum

Usuários
9 posts

Sexo:Não informado

Posted 27/07/2011, 17:54

Inload, muito obrigado pela atenção, o problema é que quero colocar como background uma imagem, e essa não está preenchendo toda as div`s #left e #right

exemplo:

#left{float:left;width:auto;background:url(http://localhost/site/images/left.jpg) repeat-x right top #143932;}
#right{float:right;width:auto;background:url(http://localhost/site/images/right.jpg) repeat-x left top #143932;}

No caso é essa background que não gruda no conteúdo, entendeu?

Edit: Diego, o problema é o mesmo, com a figura de background, que não vai até a div conteúdo :/

Edição feita por: d13go, 27/07/2011, 17:57.

#1 d13go

#2 Diego Bezerra

#3 d13go

#4 Inload

#5 Diego Bezerra

Attached Files

#6 d13go

1 user(s) are reading this topic

Entrar