2014-07-17

"Como usar divs"

... é algo que não vos posso ensinar.

Posso no entanto ir partilhando truques que aprenda.

Vamos supor que querem pôr o equivalente a duas células de uma tabela lado a lado.
Podem usar uma tabela (o que aparentemente é sacrilégio?) ou então usar divs.

O código abaixo permite colocar texto lado a lado.

        <div>
            <div>
                <div style="float:left;display:inline-block;">
                    <div>
                        <asp:Label ID="Label3" runat="server" Text="Please, select one grammar file:"></asp:Label>
                    </div>
                </div>
                <div style="float:inherit;display:inline-block;margin-left:100px;">
                    <div>
                        <div>
                            <asp:Label ID="Label4" runat="server" Text="Alternatively, you can also create a new grammar file: "></asp:Label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Depois deste código poderão querer colocar mais texto em baixo.
Normalmente o que acontece é, por causa do float, ficar tudo sobreposto: o div debaixo é puxado para o espaço dos de cima.

Graças ao Pai Natal descobri que o trecho de código abaixo faz uma "barrier" a divs e fica tudo a funcionar como esperado:

        <div style="clear:both">
            <asp:Label ID="Label1" runat="server" Text="GrammarId"></asp:Label>
            <asp:TextBox ID="GrammarId" runat="server"></asp:TextBox>
        </div>


Sei que o Zeca e o Marco já sabem que HTML/CSS, portanto vão-me perdoar o facto de usar inline CSS. Fora isso acho que não cometo nenhum sacrilégio.

1 comment:

Jamex said...

Eu ja me deixei dessas coisas prefiro usar uma framework de CSS para ter a certeza que essas DIVS vao aparecer iguais em todos os browsers