Central Mu Online - Conectando você ao Mundo do MU Online: Adicionar Colunas

WebChat Central Mu Online

  • quarta-feira, 24 de novembro de 2010

    Adicionar Colunas

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 410px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #sidebar-wrapper {
    width: 220px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    Onde Outer-Wrapper é a maior DIV do template e contém todas as outras (header, main, sidebar, footer) Main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (perfil).

    Para adicionar uma nova coluna oposta a sidebar, é necessário primeiro criar espaço para ela dentro de Outer-wrapper. No template Mínima a largura de Outer-Wrapper (a largura de uma coluna está em width) é de 660px e a soma da largura de main-wrapper (410px) e sidebar-wrapper(220px) dá um total de 630px Veja a imagem abaixo:


    Então, para acrescentar uma nova coluna é preciso aumentar o espaço, a largura de Outer-Wrapper.

    Para acrescentar uma nova sidebar, copie o código abaixo e acrescente logo após os códigos para sidebar-wrapper:

    #newsidebar-wrapper {
    margin-left: 0px;
    width: 220px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    Note que sidebar-wrapper tem float:right (flutua à direita) e newsidebar-wrapper tem que ter float:left (flutuação à esquerda).

    Lembre-se: a soma da largura do post mais as duas colunas laterais tem que ser menor do que o valor width de Outer-Wrapper. Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.

    Agora desça a página até encontrar esta parte do código (HTML):





    e cole imediatamente ANTES este:



    Importante: No HTML os elementos (DIVs) precisam ser dispostos na ordem estabelecida no CSS. Ou seja, se Newsidebar tem float: left; (flutuação à esquerda) deve ser colocado no HTML antes da DIV Main-Wrapper, ficando assim:

    Nenhum comentário:

    Postar um comentário

www.iCentralMuOnline.com.br