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

Question

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á.

Answer 1

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/

Answer 2

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

Answer 3

Acabei encontrando a solução, obrigado à todos mesmo assim.