none
Por que ele não posiciona as DIVs corretamente no navegador? RRS feed

  • Pergunta

  • Olá, senhores.

    Dentro de um webform eu coloco duas DIVs que devem se apresentar à direita e à esquerda.

    Dentro da DIV da direita, abro 3 DIVs que deveriam ser colocadas uma abaixo da outra, para montar um formulário. Com Labels à esquerda e os campos TextBox à direita.

    Tal como se usássemos um <Table> com 3 linhas e duas colunas.

    Mas ele não funciona!!!

    Estou usando o IE-8 e ele faz uma lambança misturando o que deveria estar alinhado.

    Onde está o erro?

        <form id="form1" runat="server">
        <div>
        
          <div style="position: relative; float:  left; top: 0px;  left: 0px; width: 30%;">
            <div>
                <h5>Listagem de Fontes Dinâmicas</h5>
                <asp:ListBox ID="lbxListagem" runat="server" Width="100%"></asp:ListBox>
                <div style="margin: 4px 0px 4px 0px">
                    <a href="#">Editar</a>
                </div>
            </div>
          </div>
          <div style="position: relative; float: right; top: 0px; right: 0px; width: 68%;">
                <div style="position: relative; float:  left; top: 0px;  left: 0px; width: 100%;">
                    <div style="position: relative; float:  left; top: 0px;  left: 0px; width: 15%;">
                        <h5 align="right">Edição...</h5>
                    </div>
                </div>
                <div>
                    <div style="position: relative; float: none;">
                        <div style="position: relative; float:  left; top: 0px;  left: 0px; width: 15%;">
                            <p align="right">Identificador:</p>
                        </div>
                        <div style="position: relative; float: right; top: 0px; right: 0px; width: 82%;">
                            <asp:TextBox ID="txtID" runat="server" Width="50%"></asp:TextBox>
                        </div>
                    </div>
                    <div style="position: relative; float:  none;">
                        <div style="position: relative; float:  left; top: 10px;  left: 0px; width: 15%;">
                            <p align="right">SQL:</p>
                        </div>
                        <div style="position: relative; float: right; top: 10px; right: 0px; width: 82%;">
                            <asp:TextBox ID="txtSQL" runat="server" Width="98%" 
                                Rows="15" TextMode="MultiLine"></asp:TextBox>
                        </div>
                    </div>
                    <div style="position: relative; float: none;">
                        <div style="position: relative; float:  left; top: 10px;  left: 0px; width: 15%;">
                            <p align="right">Parâmetros:</p>
                        </div>
                        <div style="position: relative; float: right; top: 10px; right: 0px; width: 82%;">
                            <asp:TextBox ID="txtParam" runat="server" Width="98%"></asp:TextBox>
                        </div>
                    </div>
                </div>
          </div>    
        </div>
        </form>


    Bom dia, bom trabalho.

    quarta-feira, 30 de maio de 2012 13:14

Respostas

  • Agradeço a atenção.

    Verifiquei que a convivência entre as marcações <asp:...> e <div> e finalmente <p> não funcionam bem.

    Parece que o parcador de parágrafo padrão distorce tudo. Ao invés disso, devemos usar o <asp:label>

    Agradecido.


    Bom dia, bom trabalho.

    segunda-feira, 11 de junho de 2012 17:32

Todas as Respostas

  • Ricardo,

    Na verdade você deveria mudar algumas coisas no teu código, as vezes fazer um arquivo .css a parte para dar uma organizada.

    quarta-feira, 30 de maio de 2012 19:45
  • Como o amigo Cleber disse, use CSS para organizar melhor as páginas do seu site!

    Veja este site: http://www.maujor.com/index.php

    Tem MUITO conteúdo sobre o assunto.

    sexta-feira, 1 de junho de 2012 11:06
  • Agradeço a atenção.

    Verifiquei que a convivência entre as marcações <asp:...> e <div> e finalmente <p> não funcionam bem.

    Parece que o parcador de parágrafo padrão distorce tudo. Ao invés disso, devemos usar o <asp:label>

    Agradecido.


    Bom dia, bom trabalho.

    segunda-feira, 11 de junho de 2012 17:32
  • Ricardo, veja se é esse o código que voce precisa:

    Inclua esse código na tag head da sua página:

    <style type="text/css">
            .labelForm
            {
                display: block;
                float: left;
                width:10%;
            }
            .campoForm
            {
                float:right;
                width: 88%;
            }
            
            .clear
            {
                clear: both;
            }
            
        </style>

    Depois coloque esse código do form:

    <form id="form1" runat="server">
            <div style="float: left; width: 30%;">
                <div>
                    <h5>
                        Listagem de Fontes Dinâmicas</h5>
                    <asp:ListBox ID="lbxListagem" runat="server" Width="100%" />
                    <div style="margin: 4px 0px 4px 0px">
                        <a href="#">Editar</a>
                    </div>
                </div>
            </div>
            <div style="position: relative; float: right; top: 0px; right: 0px; width: 68%;">
                <h5>
                    Edição...</h5>
                <div>
                    <label for="txtID" class="labelForm">Identificador:</label>
                    <asp:TextBox ID="txtID" runat="server" class="campoForm" />
                    <br class="clear" />
    
                    <label for="txtSQL" class="labelForm">SQL:</label>
                    <asp:TextBox ID="txtSQL" runat="server" Rows="15" TextMode="MultiLine" class="campoForm" />
                    <br class="clear" />
    
                    <label for="txtSQL" class="labelForm">Parâmetros:</label>
                    <asp:TextBox ID="txtParam" runat="server" class="campoForm" />
                    <br class="clear" />
                </div>
            </div>
        </form>

    Dicas:

    1 - Não use tantas divs. No html as divs representam divisões (seções) no seu código. Nesse código:

    <div style="position: relative; float:  left; top: 0px;  left: 0px; width: 15%;">
                            <p align="right">Identificador:</p>
                        </div>

    Existe uma div que contém apenas um paragrafo. Essa não é uma seção do seu código. É parte de um campo de formulário. Veja que eu deixei o seu formulário inteiro dentro de uma unica div.

    2 - Evite o uso do CSS inline(dentro da própria tag). Dê preferencia ao uso do css na tag style ou, melhor ainda, em um arquivo separado. Com o css em outro arquivo você pode reaproveitar o estilo de todos os formulários por exemplo.

    Se você tiver mais alguma dúvida estou a disposição.

    []s

    Guilherme

    quarta-feira, 13 de junho de 2012 23:24
  • Ricardo, quanto ao uso da tag <p> e do <asp:Label> a função dos dois é diferente. O <p> é um elemento do tipo block. Por padrão, os elementos que vêm depois de uma tag block são posicionados abaixo dele. Portanto se você deseja que o <asp:TextBox> fique na frente o <p> não é o elemento correto além de semanticamente errado (você não tem um paragrafo ao lado do TextBox e sim um rotulo).

    Já a tag <asp:Label> é um server control que gera um elemento HTML <label></label>, que é a tag correta. Porém, quando você não necessitar mudar as propriedades de algum elemento na sua página, prefira os controle html puros. Eles não são processados pelo runtime do ASP.NET e portanto economizam processamento contribuindo para a performance da sua página.

    []s

    Guilherme

    quinta-feira, 14 de junho de 2012 01:37