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.639
    Blog: Como formatar o computador e instalar o Windows 8

    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.639
    Blog: Como formatar o computador e instalar o Windows 8

    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?

Acompanhe todas as novidades.