Subscribe to RSS FeedNews FeedSubscribe to Comments RSS FeedComments

Home > COLOCAR COLUNA EXTRA NO TEMPLANTE?

COLOCAR COLUNA EXTRA NO TEMPLANTE?

09:20 Postado por Domínio

Você tem um template que gosta muito e não está nem um pouco afim de trocar ele só para conseguir uma coluna extra...Ok, seus problemas acabarao aparti r de agora! Porque Vomos explicar passo-a-passo como adicionar uma nova coluna no template.

o seguinte trecho do CSS do seu template (pode haver pequenas variações mas o básico é isso):

/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper {width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;}

#main-wrapper
{margin-left: 3px;
width: 468px;
float: left; (ou $startSide)
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
#sidebar-wrapper {
margin-right: 0px;
width: 210px;
float: right; (ou $endSide)
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Onde Outer-Wrapper contém tudo o que está no template, main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (perfil).
O que vamos fazer é adicionar outra coluna colando logo abaixo de sidebar, este código:

#newsidebar-wrapper {
margin-left: 0px;
width: 210px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}


Atenção para as medidas: a soma da largura do post mais as duas colunas laterais tem que ser menor do que o valor width de Outer-Wrapper. Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.

Agora desça a página até encontrar esta parte do código (HTML):









e cole imediatamente ANTES este:


preferred='yes'>


Importante: No HTML os elementos (DIVs) precisam ser dispostos na ordem estabelecida no CSS. Ou seja, se Newsidebar tem float: left; (flutuação à esquerda) deve ser colocado no HTML antes da DIV Main-Wrapper, ficando assim:






















Newsidebar flutua à esquerda, Main-Wrapper flutua à direita e Sidebar-Wrapper flutua à direita e esta disposição é obedecida no HTML.





Aqui voçê encontra tudo o que precisa. Entre agora!

1 comentários:

  1. nathane disse...
    29 de abril de 2010 às 07:55

    Oii, eu não entendi muito bem, pq tem umas partes do seu post, que os codigos não aparecem!
    será que da pra arrumar; Obrigada!

Postar um comentário