6 de novembro de 2009

Página com Duas Colunas

Vou ensinar como colocar uma página com duas colunas no seu blog.
Disponibilizarei o código que uso aqui no extras do Aline Star.

No seu CSS coloque o seguinte código:


/* ********************** EXTRAS */

.colunaleft {float: left; width: 49%;}
.colunaright {float: right;width: 49%;}

#extrastitulo { color:#7d5b41;
display:block;
background:#fffde5;
font-family:calibri,tahoma;
font-size:16px;
font-weight:bold;
height:26px;
margin-bottom:10px;
padding-top:5px;
text-align:center;
text-transform:uppercase;}

#menuextra { color: #343230; display : block; border-bottom : 1px dotted #d6d6d6; background-repeat : no-repeat;
text-indent : 5px; vertical-align : middle; line-height : 16px; margin-bottom : 0px; background : url('images/h11.gif') no-repeat left;
padding-left : 9px; font-size: 11px; font-family: verdana; letter-spacing: 0px;}

#menuextra:hover {
display : block; vertical-align : middle; cursor: none; border-bottom : 1px dotted #d6d6d6; background : url('images/h12.gif') no-repeat left; font-size: 11px; padding-left : 9px; color: #}

#menuextra a {text-align: justify; color: #343434; background-color: transparent;}

#menuextra a:hover {text-align: justify;color: #5aa689; background-color: transparent;}

Edite as cores e as imagens como quiser!
Ali onde diz images/h11.gif e images/h12.gif troque por um gif de sua preferência para que apareça antes do link.
Aqui no blog eu uso florzinhas (rosa e roxa).

E na página dos seus extras cole o código abaixo:


<div id="extrastitulo">TITULO AQUI</div>

<div style="float: left; width: 49%;">

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

</div>

<div style="float: right; width: 49%;">

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

</div>

<img alt="Divisão Aline Star" src="http://i52.tinypic.com/2iqijqs.gif" />

<div id="extrastitulo">TITULO AQUI</div>

<div style="float: left; width: 49%;">

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

</div>

<div style="float: right; width: 49%;">

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

<div id="menuextra">
<a href="http://www.link.com/" title="Descrição do link">LINK</a> </div>

</div>

<img alt="Divisão Aline Star" src="http://i52.tinypic.com/2iqijqs.gif" />

Tutorial elaborado por Aline.
A cópia total ou parcial do mesmo é proibida!
Se você aprendeu aqui,não custa creditar!

Nenhum comentário

Postar um comentário



© Aline Star - 2009 - 2017 - Desenvolvido por Aline Star - Tema Base Adorável Design