Jump to content


Photo

Posicionamento 3 Colunas


  • Faça o login para participar
3 replies to this topic

#1 mkboy

mkboy

    12 Horas

  • Usuários
  • 133 posts
  • Sexo:Não informado

Posted 28/01/2008, 18:31

Posicionando 3 colunas

Criei uma div, que chamei de bloco01
Dentro desta div, preciso de 3 blocos de conteúdo, e 2 barras de separação, fiz o seguinte:

<div id="bloco01"> 
	  <div class="bloco01a">bloco 01a</div>
	  <div class="barra01"><img src="imagens/barraVertical.gif" alt="" /></div>
	  <div class="bloco01b">bloco 01b</div>
	  <div class="barra02"><img src="imagens/barraVertical.gif" alt="" /></div>
	  <div class="bloco01c">bloco 01c</div>
	</div>


E no CSS fiz assim:

#bloco01 { width:765px; height: 146px; text-align: left;  position:relative; background: #fff url("../imagens/backBloco01.gif"); }
		#bloco01 .bloco01a { width: 230px; height: 110px; margin-top:12px; float:left;  position:relative; margin-left: 10px; background: #5FA207;}
		#bloco01 .barra01 { margin-top:6px; float:left;  position:relative; margin-left: 12px;}
		#bloco01 .bloco01b { width: 230px; height: 110px; margin-top:12px; float:left;  position:relative; margin-left: 10px; background: #FCFF2A;}
		#bloco01 .barra02 { margin-top:6px; float:right; position:relative; margin-right: 254px;}
		#bloco01 .bloco01c { width: 230px; height: 110px; margin-top:12px; background: #747EFF;}

Só que o resultado ficou assim:

Posted Image

E não consigo colocar o bloco01c ao lado do 01b... na sequencia.

:huh:

#2 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 29/01/2008, 13:48

Verifica os tamanhos somando as margens entre um div e outro, talvez esteja ultrapassando o tamanho da div bloco01

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum


#3 davimartins9

davimartins9

    Novato no fórum

  • Usuários
  • 1 posts
  • Sexo:Não informado

Posted 11/02/2008, 13:02

Oi..

Também estou com o mesmo problema se alguém estiver disposto a ajudar agradeço...

#4 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 11/02/2008, 15:32

Eu faria assim.

Marcação:
<div id="esquerda"></div>
	<div class="faixa"></div>
<div id="central"></div>
	<div class="faixa"></div>
<div id="direita"></div>

CSS:
html,body{
	margin:0px; padding:0px;
}
div{
	width:200px;
	height:350px;
	background:#f3f3f3;
	border:1px solid #ddd;
	float:left;
	display:block;
}
div.faixa{
	width:1px;
	height:350px;
	background:#bbb;
	margin:0px 5px;
	border:none;
}

Existem outras formas de fazer a faixa, mas essa resolve somente com CSS.
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq