Usuário com melhor resposta
Por que ele não posiciona as DIVs corretamente no navegador?

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.
- Movido Seilor Bonancio Junior quinta-feira, 31 de maio de 2012 16:58 (De:ASP.NET)
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.
- Marcado como Resposta Ricardo Ildefonso segunda-feira, 11 de junho de 2012 17:33
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.
- Sugerido como Resposta welington jrModerator quarta-feira, 6 de junho de 2012 01:40
-
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.
- Sugerido como Resposta welington jrModerator quarta-feira, 6 de junho de 2012 01:40
-
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.
- Marcado como Resposta Ricardo Ildefonso segunda-feira, 11 de junho de 2012 17:33
-
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
-
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