3 Divs, E Somente Uma Centralizada.
Started By d13go, 27/07/2011, 17:15
5 replies to this topic
#1
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
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
#3
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
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 ?
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
Voce queria que o espaço branco}(indicado por setas no seu desenho) nao aparecesse certo ?
<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
Posted 27/07/2011, 17:46
ola eu testei aqui na resolução 1024 com o google chrome e funcionou legal
eu coloquei um background para ficar mais facil entender
<!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
Edição feita por: Diego Bezerra, 27/07/2011, 17:57.
#6
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:
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 :/
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.
0 user(s) are reading this topic
0 membro(s), 0 visitante(s) e 0 membros anônimo(s)