Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Paulo Andraus

[Resolvido] Como fazer site com 3 colunas?

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

Paulo Andraus    0

Paulo Andraus
Postado

Bom dia, galera.

 

Estou criando um site com 3 colunas... Já tinha feito com 2, deu tudo certo.

 

Só que estou tendo problemas em criar um com 3 pois a coluna do meio começa lá embaixo, no fim da coluna da esquerda...

 

Os códigos.

HTML 

<body>
<div id="mestre">

 <div id="head">
  </div>

<div id="leftbar">
    <ul style="list-style-type:none">
        <li class="botao" id="home"><a href="#">Home</a></li>
        <li class="botao" id="blog"><a href="http://www.pauloandraus.wordpress.com">Blog</a></li>
        <li class="botao" id="twitter"><a href="http:www.twitter.com/pauloandraus">Twitter</a></li>
        <li class="botao" id="facebook"><a href="http://www.facebook.com/#/profile.php?ref=name&id=100000168356666">Facebook</a></li>
        <li class="botao" id="curriculo"><a href="#">curriculo</a></li>
    </ul>
</div>


<div id="central"> Central
</div>

<div id="rightbar"> Right Bar
</div>

<div id="bottom"> Bottom
</div>

 

CSS

html { background:url(Listras.gif)}

body {}

address {
	display:none;}

#mestre {
	position:relative;
	margin:auto;
	width:795px;
	background:#FFF;
	}

#head {
	position:relative;
	width:800px;
	background:url(head.gif) no-repeat center center;
	height:106px;
	padding:12px;}

#leftbar {
	background:url(sidebar.gif) no-repeat;
	width:160px;
	}

.botao {
	width:135px;
	height:41px;
	display:block;
	text-indent:-9000px;
	padding:20px 0px 50px 10px;
}

#home a{
	background:url(Home.gif) no-repeat bottom left;
	width:135px;
	height:41px;
	display:block;
}
#home a:hover{
	background:url(Home.gif) no-repeat bottom left;
}
#blog a{
	background:url(blog.gif) no-repeat top left;
	width:135px;
	height:41px;
	display:block;
}
#blog a:hover{
	background:url(blog.gif) no-repeat bottom left;
}
#twitter a{
	background:url(twitter.gif) no-repeat top left;
	width:135px;
	height:41px;
	display:block;
}
#twitter a:hover{
	background:url(twitter.gif) no-repeat bottom left;
}
#facebook a{
	background:url(facebook.gif) no-repeat top left;
	width:135px;
	height:41px;
	display:block;
}
#facebook a:hover{
	background:url(facebook.gif) no-repeat bottom left;
}
#curriculo a{
	background:url(curriculo.gif) no-repeat top left;
	width:135px;
	height:41px;
	display:block;
}
#curriculo a:hover{
	background:url(curriculo.gif) no-repeat bottom left;
}

#central {
	position:relative;
	border:1px solid red;
	width:470px;
	margin:auto;
	}

#rightbar {
	float:right;
	width:160px;
	}

Então... sinto que a dúvida é simples... Mas tô me batendo demais...

 

Agradeço desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Andraus    0

Paulo Andraus
Postado

Estou certo?

 

Consegui!

Gente, dei uma apelada, mas fiz o que queria... vamos ver se no final não vai atrapalhar em nada...

 

O que eu fiz: No HTML, antes da div #leftbar (e depois da head, o que faz diferença no meu caso), coloquei uma div #principal.

 

Aí, para que o menu esquerdo desça e suba conforme a página, coloquei position:fixed pra ele. Nisso, o #central subiu pra onde eu queria http://forum.imasters.com.br/public/style_emoticons/default/natal_laugh.gif

 

Porém, a div #mestre ficou pequena (do tamanho da div #central). Aí, foi só estipular o tamanho da página para 800px de altura...

 

Agradeço se alguém se dispuser a corrigir (caso esteja errado)

 

Obrigado! http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito