►quem é ... quemeee. : coluna







Pesquisar

Mostrando postagens com marcador coluna. Mostrar todas as postagens
Mostrando postagens com marcador coluna. Mostrar todas as postagens

Acrescentar uma coluna no template

Usando um template Mínima do Blogger como base para este tutorial, entenda que a estrutura das colunas se apresenta desta forma, no CSS: _________________________________________________

_________________________________________________
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
 
width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {

 
width: 410px;
  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 */
  }

#sidebar-wrapper {

 
width: 220px;   float: right;
  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 é a maior DIV do template e contém todas as outras (header, main, sidebar, footer) Main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (perfil).

Para adicionar uma nova coluna oposta a sidebar, é
necessário primeiro criar espaço para ela dentro de Outer-wrapper. No template Mínima a largura de Outer-Wrapper (a largura de uma coluna está em width) é de 660px e a soma da largura de main-wrapper (410px) e sidebar-wrapper(220px) dá um total de 630px Veja a imagem abaixo:

Então, para acrescentar uma nova coluna é preciso aumentar o espaço, a largura de Outer-Wrapper.


Para acrescentar uma nova sidebar,  
copie o código abaixo 
 e acrescente logo após os códigos para  
sidebar-wrapper:


#newsidebar-wrapper {
margin-left: 0px;
width: 220px;
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 */
}

Note que sidebar-wrapper tem
float:right (flutua à direita) e newsidebar-wrapper tem que ter float:left


Lembre-se: a soma da largura do post mais as duas colunas laterais tem que ser
(flutuação à esquerda). menor do que o valor widthOuter-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):

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>

e cole imediatamente ANTES este:

<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'></b:section> </div>

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:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
de
____________________________________________________________________




»http://tudoqueaprendorepasso.blogspot.com»
Share:

"buscas populares"

buscas populares …apareça nas buscas… cadastre seu web site aqui…/buscas populares…alô negócios !!!…

pesquisar aqui:


Custom Search

▼xat - deixe seu recado!!!









vídeos

Pesquisar

Arquivo

Postagem em destaque

..."falhas mais imperdoáveis de quem manda"

Chefes também cometem erros graves Conheça as falhas mais imperdoáveis de quem manda As falhas imperdoáveis para quem lidera ...

Seguidores

adf.ly

 
|| Пост!Featured on Hometalk.com