Ir para conteúdo
Fórum Script Brasil
  • 0

Layout Com 3 Colunas

Hotburn

Perguntado por Hotburn,

 Share

Pergunta

Hotburn

Hotburn

Postado
Postado

Salve pessoal ! :lol:

Estou com um problema... <_<

Veja o seguinte layout http://www.clearr.com.br/newsite.

Agora eu estou tentando transformar isto em Tabless, e tá muito dificil. :angry:

Estou tentando fazer com que aquela coluna vermelha que está na horizontal logo no topo fique elástica de acordo com a resolução do visitante.

O Layout principal está com 780px de width.

Tentei de diversas formas, colocando width: % nas DIVS laterais da esquerda e da direita (cheguei até pensar em JavaScript). EM 1024x768 tudo bem, mas quando vejo em 800x600, uma calamidade. :blink:

Como devo fazer ? :huh:

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
Hotburn

Hotburn

Postado
  • Autor
Postado
o que seria elastica

que ele fique na página inteira ou que permaneça onde esta só que fique com um tamanho flutuante?

se for flutuante faz assim

Olá Deividy, muito obrigado.

Então, O que eu preciso é o seguinte... Tenho 3 colunas, uma com 780px e as outras duas com um tamanho proporcional de acordo com a resolução do usuário sem fazer com que exiba a barra de rolagem inferior que exibe horizontalmente.

Preciso deixar aquela barra vermelha horizontal, como no layout dentro destas duas colunas, expandindo e retraindo conforme a resolução do usuário.

Lembrando que a coluna central não expande nem retrai, sempre mantendo a largura de 780px.

Entendeu ?

Alguém tem como me ajudar ? :blink:

Link para o comentário
Compartilhar em outros sites
  • 0
Guest Visitante

Guest Visitante

Postado
Postado

TESTA ISO E VE SE AJUDA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
    min-width: 740px;
    text-align: center;

}
#container {
    text-align: left;    
    background:#FFFFFF;

}
#header {
    background: #999999;
}
#sidebar1 {
    float: left;
    width: 17%;    
    min-width: 130px;
    background: #CCCCCC;
}
#sidebar2 {
    float: right;
    width: 17%;
    min-width: 130px;
    background: #CCCCCC;
}

#mainContent {
    margin: 0 17% 0 17%;    
    /*top - rigth - bottom - left*/    
}

#footer {
    background:#999999; 
    clear:both;
}

-->
</style>
</head>
<body>
<div id="container">
  <div id="header">header</div>
  <div id="sidebar1">sidebar1</div>
  <div id="sidebar2">sidebar2</div>
  <div id="mainContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
  <div id="footer">footer</div>
</div>
</body>
</html>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...