none
Como posicionar um elemento dentro de uma div, em relação a própria div? (left e top) RRS feed

  • Pergunta

  • Boa noite, comecei a estudar asp.net a pouco tempo, e estou desenvolvendo minha primeira página.

    Já encontrei vários problemas, mas esse é o primeiro que não consigo encontrar uma solução por minha conta (Talvez por não ter tanta experiência com HTML/CSS).

    Bom... eu tenho uma div chamada "Conteudo", e esta div está centralizada, com o recurso "margin: 0 auto", porém, quando eu centralizei essa div, os botões que estavam dentro da div se deslocaram, quanto eu faço a visualização da página, segue abaixo o trecho do código:

        
            #conteudo {
                height: 1024px;
                width: 860px;
                background-image:url(imagens/site.png);
                ruby-align: center;
                margin: 0 auto;
            }
    
    
    <div id="conteudo" runat="server">
    
    
    
            <asp:ImageButton ID="ImageButton1" runat="server" style="z-index: 1; left: 217px; top: 242px; ; width: 115px; height: 50px" />
            <asp:ImageButton ID="ImageButton2" runat="server" style="z-index: 1; left: 336px; top: 242px; ; width: 140px; height: 50px" />
            <asp:ImageButton ID="ImageButton3" runat="server" style="z-index: 1; left: 481px; top: 242px; ; width: 152px; height: 50px" />
            <asp:ImageButton ID="ImageButton4" runat="server" style="z-index: 1; left: 637px; top: 242px; ; width: 154px; height: 50px" />
            <asp:ImageButton ID="ImageButton5" runat="server" style="z-index: 1; left: 796px; top: 242px; ; width: 173px; height: 50px" />
    
    
    
    
    

    Alguém sabe me dizer como fazer isso? 

    Agradeço desde já.

    sexta-feira, 22 de novembro de 2013 04:46

Respostas

  • Cara tente fazer os botões em uma segunda div para que ele fiquem abaixo da div com CSS. 

    <div id="conteudo" runat="server">
          // Aqui você monta seu formulário
    </div>
    <div>
            <asp:ImageButton ID="ImageButton1" runat="server" style="   ; width: 115px; height: 50px" />
            <asp:ImageButton ID="ImageButton2" runat="server" style="   ; width: 140px; height: 50px" />
            <asp:ImageButton ID="ImageButton3" runat="server" style="   ; width: 152px; height: 50px" />
            <asp:ImageButton ID="ImageButton4" runat="server" style="   ; width: 154px; height: 50px" />
            <asp:ImageButton ID="ImageButton5" runat="server" style="   ; width: 173px; height: 50px" />
    </div>
    

    Creio que com isso você ja irá conseguir que seus botões fiquem no lugar onde deseja. 

    O Bootstrap é uma boa pedida para CSS conforme o William disse, porem, o legal seria você aprender o básico do HTML CSS para que assim você possa entender e utilizar uma ferramenta como essa já que ele tem um template padrão muito legal. 

    Outra dica, seria você criar um CSS para seus botões, e deixa-los em um único padrão, tamanho, cor e por ai vai.

    Caso você queira que esses botões fiquem lado a lado na mesma linha o correto é separar os botões em divs e adicionar o style="float:left;" em todas suas divs, com isso eles ficarão alinhados da esquerda para a direita e na mesma linha. 

    Espero que ajude. 

    Abraço.



    Voce pode encarar um erro como uma besteira a ser esquecida, ou como um resultado que aponta uma nova direcao by Steve Jobs


    • Editado Fernando Mamprin sexta-feira, 22 de novembro de 2013 17:21
    • Marcado como Resposta Endzt quinta-feira, 28 de novembro de 2013 05:42
    sexta-feira, 22 de novembro de 2013 17:19

Todas as Respostas

  • Seguinte, não manjo muito de CSS também, mais hoje em dia já existem frameworks para montar suas paginas com CSS, JQuery, JS etc....

    Eu uso o bootstrap com ele você só chama o CSS pra sua pagina e vai configurando de acordo com que necessite.

    De uma olhada aqui.

    http://getbootstrap.com/2.3.2/

    http://globocom.github.io/bootstrap/


    sexta-feira, 22 de novembro de 2013 10:58
  • Cara tente fazer os botões em uma segunda div para que ele fiquem abaixo da div com CSS. 

    <div id="conteudo" runat="server">
          // Aqui você monta seu formulário
    </div>
    <div>
            <asp:ImageButton ID="ImageButton1" runat="server" style="   ; width: 115px; height: 50px" />
            <asp:ImageButton ID="ImageButton2" runat="server" style="   ; width: 140px; height: 50px" />
            <asp:ImageButton ID="ImageButton3" runat="server" style="   ; width: 152px; height: 50px" />
            <asp:ImageButton ID="ImageButton4" runat="server" style="   ; width: 154px; height: 50px" />
            <asp:ImageButton ID="ImageButton5" runat="server" style="   ; width: 173px; height: 50px" />
    </div>
    

    Creio que com isso você ja irá conseguir que seus botões fiquem no lugar onde deseja. 

    O Bootstrap é uma boa pedida para CSS conforme o William disse, porem, o legal seria você aprender o básico do HTML CSS para que assim você possa entender e utilizar uma ferramenta como essa já que ele tem um template padrão muito legal. 

    Outra dica, seria você criar um CSS para seus botões, e deixa-los em um único padrão, tamanho, cor e por ai vai.

    Caso você queira que esses botões fiquem lado a lado na mesma linha o correto é separar os botões em divs e adicionar o style="float:left;" em todas suas divs, com isso eles ficarão alinhados da esquerda para a direita e na mesma linha. 

    Espero que ajude. 

    Abraço.



    Voce pode encarar um erro como uma besteira a ser esquecida, ou como um resultado que aponta uma nova direcao by Steve Jobs


    • Editado Fernando Mamprin sexta-feira, 22 de novembro de 2013 17:21
    • Marcado como Resposta Endzt quinta-feira, 28 de novembro de 2013 05:42
    sexta-feira, 22 de novembro de 2013 17:19
  • Acabei encontrando a solução, obrigado à todos mesmo assim.
    • Marcado como Resposta Endzt quinta-feira, 28 de novembro de 2013 05:41
    • Não Marcado como Resposta Endzt quinta-feira, 28 de novembro de 2013 05:42
    quinta-feira, 28 de novembro de 2013 05:41