Resultados 1 a 2 de 2

Tópico: Gerar colunas com CSS de uma lista sem tabelas

  1. #1
    GForum Mestre Avatar de helldanger1
    Data de Ingresso
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    39
    Posts
    29.640

    Padrão Gerar colunas com CSS de uma lista sem tabelas

    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
    }



    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    GForum Mestre Avatar de helldanger1
    Data de Ingresso
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    39
    Posts
    29.640

    Padrão

    Para criar várias colunas em CSS define-se no estilo UL.col3 LI, onde o width é o tamanho de cada coluna. Assim automaticamente irão se criando as colunas. Como colocamos um 30%, o espaço onde esteja a lista se dividirá em três colunas, sem a necessidade de utilizar tabelas.

    O HTML ficaria assim para a lista:

    <ul class="col3">
    <li>O que for</li>
    <li>Segunda opcao</li>
    <li>Terceira coisa</li>
    <li>Outra coisa, que aparecerá na primeira coluna</li>
    <li>Outra coisa para a segunda coluna</li>
    <li>E isto para a terceira coluna</li>
    </ul>


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Já fez "Like" na nossa página do facebook?


Assina a nossa newsletter. Recebe todas as novidades semanais no teu email e habilita-te a ganhar premios fantasticos que temos para sortear!

* indicates required