helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Graças a esse truque de CSS você poderá gerar colunas com CSS utilizando uma lista e sem tabelas.
Por Pol Salvat
É um truque simples, porém engenhoso para fazer com que as listas mostrem-se em várias colunas. Nós colocamos três colunas, porém poderiam ser criadas quantas desejássemos.
Trata-se simplesmente de criar uma lista e definir com estilos CSS a largura de seus elementos. Definiremos a largura dos elementos <LI> como um 30% do total de largura da lista.
Os estilos CSS que colocaremos são os seguintes. Primeiro veremos o estilo para o qual é a lista <UL> e logo os dos elementos da lista <LI>:
UL.col3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 15px 0px;
WIDTH: 100%;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
UL.col3 LI
{
PADDING-RIGHT: 2px;
DISPLAY: inline;
PADDING-LEFT: 2px;
FLOAT: left;
PADDING-BOTTOM: 2px;
WIDTH: 30%;
PADDING-TOP: 2px
}
Por Pol Salvat
É um truque simples, porém engenhoso para fazer com que as listas mostrem-se em várias colunas. Nós colocamos três colunas, porém poderiam ser criadas quantas desejássemos.
Trata-se simplesmente de criar uma lista e definir com estilos CSS a largura de seus elementos. Definiremos a largura dos elementos <LI> como um 30% do total de largura da lista.
Os estilos CSS que colocaremos são os seguintes. Primeiro veremos o estilo para o qual é a lista <UL> e logo os dos elementos da lista <LI>:
UL.col3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 15px 0px;
WIDTH: 100%;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
UL.col3 LI
{
PADDING-RIGHT: 2px;
DISPLAY: inline;
PADDING-LEFT: 2px;
FLOAT: left;
PADDING-BOTTOM: 2px;
WIDTH: 30%;
PADDING-TOP: 2px
}