Como alinhar?

Good · Maio 7, 2012

Estou fazendo um layout assim:

________________

|ººdivººº|ºconteúdoº|ºººdivº|

|verdeº|ººººººdoººººº|ºººazul|

|_____|ºººººsiteººººº|_____|

ººººººººº|ºººººººººººººº|

ººººººººº|_________|

É pra ser assim:

- A parte do conteúdo do site deve ficar centralizada no layout independente da resolução do pc;

- A div verde e azul serão diferenciadas, com duas cores mesmo. Quero que elas estiquem 100% pros lados esquerdo e direito, respectivamente. Não deve ficar sobrando nada nesses lados.

Alguém sab como fazer? Tentei assim:

<style>
.esquerdo {
   background: #00FF00;
   height: 150px;
   width: 100%;
   display: inline;
}

.direito {
   background: #0000FF;
   height: 150px;
   width: 100%;
   display: inline;
}
.meio {
   margin: auto;
   width: 950px;
}
</style>

<div class="esquerdo"></div>
<div class="meio"></div>
<div class="direito"></div>

Obrigado.

OBS.: Não se importem com as bolinhas dentro daquele esquema.. tive q colocar pra deixar alinhado pra dar mais clareza.

Giovani · Maio 7, 2012

Você quer fazer um layout de 3 colunas, até aí eu entendi :mellow:

Agora a largura do site será fixa? Será um layout líquido? As divs laterais terão uma largura fixa e somente o fundo que dará a impressão de que elas não terminam ... enfim, se puder explicar melhor a galera agradece :thumbsup:

Good · Maio 7, 2012

As divs verde e azul terão impressão de que não tem fim. A div conteúdo tem largura fixa.

Giovani · Maio 7, 2012

Então você pode trabalhar com uma imagem de fundo, filete de 1px de altura, repetindo no eixo-y:

body{ background: url(../images/suaimagem.jpg) repeat-y center top }

O conteúdo será um layout de três colunas como nesse exemplo :thumbsup:

Good · Maio 7, 2012

Tem que ser infinito nas laterais :S

desse jeito aí eu vou ter q criar um tamahno fixo do background..

Giovani · Maio 8, 2012

Infinito não!

Talvez uns 2000px ... 2500px por 1px repetindo no eixo-y, exatamente como minha resposta #4.

Tem que ser infinito nas laterais :S

Good · Maio 8, 2012

Vixe :S

então nem da.. pq eu quero que fique infinito pro lado direito e esquerdo..

vlw, se alguém souber avisae..

Samuel Volpato · Maio 8, 2012

As divs "azul" e "verde" terão conteúdo ou serão só pra layout?

Giovani · Maio 8, 2012

Qual é a maior resolução que você conhece? Ou a maior resolução que os usuários irão acessar?

Uma largura de 2500px está mais que suficiente para ser "infinita".

então nem da.. pq eu quero que fique infinito pro lado direito e esquerdo..

Good · Maio 9, 2012

Samuel, não terá conteúdo nessas divs.

Giovani, não quero fazer desta maneira.. muito obrigado. Infinito é diferente de fixo.

Samuel Volpato · Maio 9, 2012

Good, fiz algo semelhante uma vez fiz da seguinte maneira:

<div id="bgEsquerda"></div>
<div id="bgDireita"></div>
<div id="conteudo"></div>

div#bgEsquerda{
   background-color: blue;
   height: 400px;
   left: 0px;
   position: absolute;
   width: 50%;
   z-index: 1;
}

div#bgDireita{
   background-color: green;
   height: 400px;
   right: 0px;
   position: absolute;
   width: 50%;
   z-index: 1;

}

div#conteudo{
   background-color: #fff;
   height: 300px;
   left: 50%;
   margin-left: -475px;
   position: absolute;
   width: 950px;
   z-index: 2;
}

Cara não testei o código, mas minha solução foi essa, 2 divs sem conteúdo na parte de traz, aí tu arruma a altura que for ideal pra ti. Essa divs com posicionamento absoluto uma alinhada à esquerda outra à direita.

Uma div posicionada em cima dessas duas (z-index maior que as outras), dando a impressão que as outras são background.

Testa aí ou talvez aproveita a ideia.

Giovani · Maio 9, 2012

As divs verde e azul terão impressão de que não tem fim. A div conteúdo tem largura fixa.

Giovani, não quero fazer desta maneira.. muito obrigado. Infinito é diferente de fixo.

Sem estresse, vais ter que colocar duas divs com positions e outra na frente ... enfim, tem como fazer.

André do Vale · Maio 9, 2012

Ou se quiser uma gambiarra maior ainda:

<!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 iMasters 2012/05/09</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function tamanhoLado(){
$('.esquerdo, .direito').css({
	'width':($(window).width()-($('.meio').width()))/2
})
}
$(function(){
tamanhoLado()
$(window).resize(function(){
	var lados = $('.esquerdo, .direito')
	if($(window).width() > $('.meio').width()){
		lados.show()
		tamanhoLado()
	} else {
		lados.hide()
	}
})
})
</script>
<style>
* {
margin: 0;
}
.esquerdo {
   background: green;
   height: 150px;
float: left;
}
.direito {
   background: red;
   height: 150px;
float: right;
}
.meio {
background: yellow;
float: left;
   width: 950px;
height: 150px;
}
</style>
</head>

<body>
<div class="esquerdo"></div>
<div class="meio"></div>
<div class="direito"></div>
</body>
</html>

kkkkk

Good · Maio 9, 2012

Eita gambiarra grande kkk

o código do samuel deu beleza.. vlw andré ^

giovani errei no meu texto, mas vlw

Arquivado

Como alinhar?

Recommended Posts

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Samuel Volpato 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Samuel Volpato 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante