none
posição objetos na tela RRS feed

  • Pergunta

  • Bom dia.

    Estou com o seguinte problema.

    Estou construindo um objeto que no Visual Studio tem a aparência que eu desejo. Mas ao carregar no browser ele fica diferente, alguém saberia me dizer o porque e o que devo fazer para que a aparência fique correta.

    O código é o seguinte:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        
        <div>
            <asp:Table ID="Table1" runat="server" BorderStyle="None" style="border-bottom-width:0; border-left:0; border-top:0; margin-top:0; margin-left:0; padding-left:0; padding-top:0">
                <asp:TableRow runat="server" style="border-bottom-width:0; border-left:0; border-top:0; margin-top:0; margin-left:0; padding-left:0; padding-top:0">
                    <asp:TableCell runat="server" BorderStyle="None" style="border-bottom-width:0; border-left:0; border-top:0; margin-top:0; margin-left:0; padding-left:0; padding-top:0; width:22px">
                        <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
                    </asp:TableCell>
                    <asp:TableCell runat="server" style="border-bottom-width:0; border-left:0; border-top:0; margin-top:0; margin-left:0; padding-left:0; padding-top:0">
                        <asp:Table ID="Table2" runat="server" style="border-bottom-width:0; border-left:0; border-top:0; margin-top:0; margin-left:0; padding-left:0; padding-top:0">
                            <asp:TableRow ID="TableRow1" runat="server" style="border-bottom-width:0; border-left:0; border-top:0; margin-top:0; margin-left:0; padding-left:0; padding-top:0">
                                <asp:TableCell ID="TableCell2" runat="server" style="border-bottom-width:0; border-left:0; border-top:0; margin-top:0; margin-left:0; padding-left:0; padding-top:0">
                                    <asp:ImageButton ID="btnUp" runat="server" style="margin-top:0; margin-left:0; padding-left:0; padding-top:0; width:8px" ImageUrl="~/Imagens/Up.png" />
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow ID="TableRow2" runat="server" style="border-bottom-width:0; border-left:0; border-top:0; margin-top:0; margin-left:0; padding-left:0; padding-top:0" >
                                <asp:TableCell ID="TableCell1" runat="server" style="border-bottom-width:0; border-left:0; border-top:0; margin-top:0; margin-left:0; padding-left:0; padding-top:0" >
                                    <asp:ImageButton ID="btnDown" runat="server" style="margin-top:0; margin-left:0; padding-left:0; padding-top:0; width:8px" ImageUrl="~/Imagens/Down.png" />
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </div>
        </form>
    </body>
    </html>
    

    A aparência no Visual Studio que é a que desejo é:

    E a aparência que é mostrada no browser é:

    Notem que a distância estre as setas aumentou.

    Alguém sabe o porque, alguém teria a solução para que no browser fique igual a do Visual Studio.

    Grato,

    domingo, 13 de outubro de 2013 20:23

Respostas

  • Então o objeto na verdade são tags HTML então use CSS para posicionar e tirar os espaços a mais!

    tudo em HTML é configurado via CSS e suporte Javascript


    Fúlvio Cezar Canducci Dias

    segunda-feira, 14 de outubro de 2013 00:52
  • Nkasso, 

    Boa noite. 

    Não é uma boa prática trabalharmos com tabela. O ideal é que sejam utilizados DIV. Além do mais, CSS pode te ajudar a deixar o site com um visual melhor. Quanto ao problema relatado no seu código, notei que você criou uma tabela dentro da outra, e nesta nova tabela você não definiu o CellPadding e CellSpacing. Defina os dois como 0, exemplo:

    <asp:Table ID="Table2" runat="server" BorderStyle="None" CellPadding="0" CellSpacing="0">

    Isso irá melhorar a visualização, no entanto, só consegui resolver o problema por completo com a utilização de DIVs.


    Abraço

    • Sugerido como Resposta Raphael de Abreu segunda-feira, 14 de outubro de 2013 03:04
    • Marcado como Resposta Giovani Cr sexta-feira, 18 de outubro de 2013 15:19
    segunda-feira, 14 de outubro de 2013 03:01

Todas as Respostas

  • Então o objeto na verdade são tags HTML então use CSS para posicionar e tirar os espaços a mais!

    tudo em HTML é configurado via CSS e suporte Javascript


    Fúlvio Cezar Canducci Dias

    segunda-feira, 14 de outubro de 2013 00:52
  • Nkasso, 

    Boa noite. 

    Não é uma boa prática trabalharmos com tabela. O ideal é que sejam utilizados DIV. Além do mais, CSS pode te ajudar a deixar o site com um visual melhor. Quanto ao problema relatado no seu código, notei que você criou uma tabela dentro da outra, e nesta nova tabela você não definiu o CellPadding e CellSpacing. Defina os dois como 0, exemplo:

    <asp:Table ID="Table2" runat="server" BorderStyle="None" CellPadding="0" CellSpacing="0">

    Isso irá melhorar a visualização, no entanto, só consegui resolver o problema por completo com a utilização de DIVs.


    Abraço

    • Sugerido como Resposta Raphael de Abreu segunda-feira, 14 de outubro de 2013 03:04
    • Marcado como Resposta Giovani Cr sexta-feira, 18 de outubro de 2013 15:19
    segunda-feira, 14 de outubro de 2013 03:01