Adicionando Coluna no Template em HTML

Postado em: 10 de set. de 2011
Postado Por: dffdf


Eae Galera, neste tutorial eu irei ensinar como estarAdicionando Coluna no Template em HTML
Obs : Lembrando que o Tutorial foi feito com Base no Template Minima, Antes de Começar o Tutorial Faça um Backup pra não ter danos nele não me RESPONSABILIZO por DANOS nele

1º Abra a Pagina Editar HTML Procure por:

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
      </div> 

2º Cole o Codigo mostrado abaixo, Acima de <div id='main-wrapper'>.

<center><div id='coluna'>
<table width="220" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th scope="col" background="link da imagem do titulo aqui">&nbsp;</th>
  </tr>
  <tr>
    <td background="link da imagem onde vai ficas as widets"><b:section class='coluna' id='coluna' preferred='yes'></b:section>&nbsp;</td>
  </tr>
  <tr>
    <td background="link da imagem do footer">&nbsp;</td>
  </tr>
</table>
</div></center>

Substitua o Valor Destacado em Azul pela largura total da suas imagem.

3º Adicionando o CSS, Procure por ]]></b:skin>.
e Cole o Codigo Abaixo Acim dele.

#coluna {
  width: 220px;
  float: left;
  word-wrap: break-word;
  overflow: hidden;
}

pra mudar a Posição da Coluna Troque Left por Right, Pra altera a largura da Coluna Altere os numero destacado em Azul. Lembrando que pra Caber as Colunas Precisa Almentar o Valor
de width:

  #outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
Deixe seu Comentário:
Sem comentários »
Categorias:

0 comentários:

Postar um comentário