none
Div local fixo RRS feed

  • Pergunta

  • Boa tarde!!!

    Tenho uma Div que eu gostaria que ele ficasse fixa em único lugar, porem conforme muda a resolução do monitor ou altera o zoom do navegador a div sai do local que eu quero que fique:

    <div style="; top: 70px; left: 900px; vertical-align: middle" >
        <table>
            <tr valign="middle">
                <td>
                    <asp:TextBox ID="TxtBuscar" runat="server" Width="250px" 
                        CssClass="Txt_Busca">Teste</asp:TextBox>
                </td>
                <td>
                    <asp:ImageButton ID="Ib_Buscar" runat="server" />
                </td>
                <td>
                    <asp:ImageButton ID="Ib_Carrinho" runat="server" />
                </td>
            </tr>
        </table>
    </div>

    Obrigado!

    terça-feira, 23 de outubro de 2012 18:07

Respostas

  • No código que eu mandei esta faltando a propriedade

    Position: Fixed;

    Ficando

    #Div_Cab{
        ;
        
        
        
    }

    obs.:

    Onde esta apenas o ; coloque


    Bruno Viegas D. Ribeiro

    Analista Desenvolvedor de Sistemas
    www.brunoviegas.com.br
     


    • Editado Bruno VD Ribeiro quarta-feira, 24 de outubro de 2012 12:18
    • Marcado como Resposta DaviSaba quarta-feira, 24 de outubro de 2012 16:39
    quarta-feira, 24 de outubro de 2012 12:17
  • Olá Davi.

    Pelo que eu estou entendendo, voce quer que a DIV fique sempre no mesmo lugar no seu site, independente da resolução, correto? Neste caso, quando a resolução alterar, as dimensões da página também irão ser alteradas.

    Para que voce garanta que sua div fique sempre no mesmo lugar do site, a posição não pode ser absoluta, pois o Left e o Top vão depender do tamanho da página.

    Neste caso, a posição deve ser relativa ao objeto que contem a DIV, e você precisa controlar o tamanho desta div principal em sua aplicação.

    No código troque o position absolute para position relative. Com isso ele passa a ter o Left e o Top com base no controle pai. Troque no codigo abaixo, as palavras em portugues para o Inlges. Não sei porque o fórum exclui algumas palavras do código que enviamos.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <style type="text/css">
            #divPrincipal {width:700px; height:500px; background-color:#ddd;}
            #Div_Cab { 
                posicao: relative; 
                topo: 40px; 
                esquerda: 100px; 
                width:150px;
                height:100px;
                color:#fff;
                z-index: 9999999; 
                background-color:#555;
            }
        </style>
    
    </head>
    <body>
    <div id="divPrincipal">
        Conteudo da div Principal
        <div id="Div_Cab">
            Conteudo do div fixo.
        </div>
    </div>
    </body>
    </html>

    Abraços.


    Washington Luíz | MCP, MCTS
    O Senhor é minha força e somente Nele confio.

    • Marcado como Resposta DaviSaba quarta-feira, 24 de outubro de 2012 16:39
    quarta-feira, 24 de outubro de 2012 12:27
  • Se você colocar sua div como posição absoluta (css position absolute), e setar sua posição (top,left,right), ela ficará sempre na posição especificada independente de resolução ou zoom e sobreporá quaisquer elemento.
    • Marcado como Resposta DaviSaba quarta-feira, 24 de outubro de 2012 16:39
    quarta-feira, 24 de outubro de 2012 12:42
  • Agora você explico da forma mais simples!!!

    Segue o código simples em html:

    <div style="; width:500px;height:500px;background: #000;">
    <div style="; width:200px;height:200px; background: red; top: 100px; left:100px;"></div>

    Veja que a div com serve como um limitador para a outra div com . Nesse caso a primeira div fica limitando e servindo como referência para a segunda div.

    Espero ter ajudado e boa sorte!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    • Marcado como Resposta DaviSaba quarta-feira, 24 de outubro de 2012 16:39
    quarta-feira, 24 de outubro de 2012 14:39

Todas as Respostas

  • Tente isso

    <div style="; top: 70px; left: 900px; vertical-align: middle" >


    Bruno Viegas D. Ribeiro

    Analista Desenvolvedor de Sistemas
    www.brunoviegas.com.br
     

    terça-feira, 23 de outubro de 2012 18:09
  • Olá,

    No style da div só tá faltando o ;

    Coloque assim:

    <div style=" top: 70px; left: 900px;" >

    terça-feira, 23 de outubro de 2012 18:11
  • Olá Davi.

    Voce tem duas opções:

    Se quiser que seu div fique sempre na mesma posição e sempre apareça na tela mesmo quando o usuario rolar a pagina use position fixed

    Se quiser que seu div fique sempre na mesma posição e mas não fique fixo quando o usuario rolar a página, use position absolute.


    Washington Luíz | MCP, MCTS
    O Senhor é minha força e somente Nele confio.

    terça-feira, 23 de outubro de 2012 18:48
  • Eu fiz o que vocês pediram, porem a div nao sobrepõem outro conteúdo que preciso que fique por cima.
    terça-feira, 23 de outubro de 2012 19:00
  • Ai já é outra coisa. Para sobrepor voce precisa configurar a propriedade z-index.

    <div style="z-index:999999">conteudo</div>



    Washington Luíz | MCP, MCTS
    O Senhor é minha força e somente Nele confio.

    terça-feira, 23 de outubro de 2012 19:03
  • Washington, seguindo sua orientação configurei o z-index mas ocorreu o mesmo problema: alterando o zoom ou a resolução do vídeo a div não permanece onde eu preciso que fique.

    No arquivo CSS criei:

    #Div_Cab{
    top:40px;
    left:900px;
    }

    Na div coloquei o id="Div_Cab".

    Obrigado!


    • Editado DaviSaba terça-feira, 23 de outubro de 2012 19:58
    terça-feira, 23 de outubro de 2012 19:58
  • Tente

    #Div_Cab{
        ;
        top:40px;
        left:900px;
        z-index: 99999;
    }


    Bruno Viegas D. Ribeiro

    Analista Desenvolvedor de Sistemas
    www.brunoviegas.com.br
     

    terça-feira, 23 de outubro de 2012 21:35
  • Não deu certo. Ocorre o mesmo problema.
    quarta-feira, 24 de outubro de 2012 11:01
  • O que eu preciso:

    Quero que uma DIV fica em um local fixo sobrepondo qualquer conteúdo que exista e que não saia da sua posição mesmo que a resolução da tela seja diferente ou que o usuário altere o zoom do browser.

    Obrigado!

    quarta-feira, 24 de outubro de 2012 11:03
  • Davi, o código que eu mandei não deu certo por qual motivo? ficou por baixo, não ficou fixo ou os dois?

    Bruno Viegas D. Ribeiro

    Analista Desenvolvedor de Sistemas
    www.brunoviegas.com.br
     

    quarta-feira, 24 de outubro de 2012 11:16
  • Olá Davi.

    Não sei por qual motivo o sistema de fórum aqui, quando eu coloco o position no codigo ele não mostra, por isso vou fazer o codigo de como imagem, ok? 

    Configure seu DIV conforme figura abaixo:

    Abraços


    Washington Luíz | MCP, MCTS
    O Senhor é minha força e somente Nele confio.

    quarta-feira, 24 de outubro de 2012 11:33
  • Não deu certo. A DIV fica exatamente onde eu quero na resolução 1920 x 1200. Quando eu altero a resolução para menor, o conteúdo da DIV sai de onde eu preciso. Como eu não sei qual resolução do usuário que vai acessar o site.

    Obrigado!

    quarta-feira, 24 de outubro de 2012 11:42
  • No código que eu mandei esta faltando a propriedade

    Position: Fixed;

    Ficando

    #Div_Cab{
        ;
        
        
        
    }

    obs.:

    Onde esta apenas o ; coloque


    Bruno Viegas D. Ribeiro

    Analista Desenvolvedor de Sistemas
    www.brunoviegas.com.br
     


    • Editado Bruno VD Ribeiro quarta-feira, 24 de outubro de 2012 12:18
    • Marcado como Resposta DaviSaba quarta-feira, 24 de outubro de 2012 16:39
    quarta-feira, 24 de outubro de 2012 12:17
  • Impossível...você teria que pegar o zoom da pessoa e isso não é possível via javascript.

    O código que o pessoal vem postando é a melhor solução, position + z-index agora mudar isso conforme o zoom ESQUECE!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    quarta-feira, 24 de outubro de 2012 12:17
  • Apenas mais um detalhe em relação a resolução da pessoa é fácil de resolver, você poderia pegar isso em javascript sem problemas e conforme a resolução posicionar sua div, mas pegar o ZOOM isso não rola!

    http://stackoverflow.com/questions/7306933/how-to-detect-window-size-and-then-do-something-with-jquery-switch-statement

    Espero ter ajudado e boa sorte!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    quarta-feira, 24 de outubro de 2012 12:20
  • Olá Davi.

    Pelo que eu estou entendendo, voce quer que a DIV fique sempre no mesmo lugar no seu site, independente da resolução, correto? Neste caso, quando a resolução alterar, as dimensões da página também irão ser alteradas.

    Para que voce garanta que sua div fique sempre no mesmo lugar do site, a posição não pode ser absoluta, pois o Left e o Top vão depender do tamanho da página.

    Neste caso, a posição deve ser relativa ao objeto que contem a DIV, e você precisa controlar o tamanho desta div principal em sua aplicação.

    No código troque o position absolute para position relative. Com isso ele passa a ter o Left e o Top com base no controle pai. Troque no codigo abaixo, as palavras em portugues para o Inlges. Não sei porque o fórum exclui algumas palavras do código que enviamos.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <style type="text/css">
            #divPrincipal {width:700px; height:500px; background-color:#ddd;}
            #Div_Cab { 
                posicao: relative; 
                topo: 40px; 
                esquerda: 100px; 
                width:150px;
                height:100px;
                color:#fff;
                z-index: 9999999; 
                background-color:#555;
            }
        </style>
    
    </head>
    <body>
    <div id="divPrincipal">
        Conteudo da div Principal
        <div id="Div_Cab">
            Conteudo do div fixo.
        </div>
    </div>
    </body>
    </html>

    Abraços.


    Washington Luíz | MCP, MCTS
    O Senhor é minha força e somente Nele confio.

    • Marcado como Resposta DaviSaba quarta-feira, 24 de outubro de 2012 16:39
    quarta-feira, 24 de outubro de 2012 12:27
  • Lucas, mas eu não quero pegar o ZOOM ou a RESOLUÇÃO ... Eu quero que minha DIV fique fixa na posição que eu determinar sobrepondo quando conteúdo e que ela não se movimente de acordo com o zoom ou resolução.

    Isso é possível?

    quarta-feira, 24 de outubro de 2012 12:39
  • Se você colocar sua div como posição absoluta (css position absolute), e setar sua posição (top,left,right), ela ficará sempre na posição especificada independente de resolução ou zoom e sobreporá quaisquer elemento.
    • Marcado como Resposta DaviSaba quarta-feira, 24 de outubro de 2012 16:39
    quarta-feira, 24 de outubro de 2012 12:42
  • Marcos, quando você diz que a div fica sempre na posição, você esta correto, pois a DIV vai usar como referencia o BROWSER e sempre vai ficar na posição que eu determinei.

    Quando eu uso o meu conteúdo como referência, a div fica fora da posição que eu preciso que ela fique. 

    Teria como eu definir uma posição para a DIV utilizando como referencia um objeto do meu conteúdo e não usar o browser? Acredito que isso resolveria meu problema.

    Obrigado!!!

    quarta-feira, 24 de outubro de 2012 13:01
  • Agora você explico da forma mais simples!!!

    Segue o código simples em html:

    <div style="; width:500px;height:500px;background: #000;">
    <div style="; width:200px;height:200px; background: red; top: 100px; left:100px;"></div>

    Veja que a div com serve como um limitador para a outra div com . Nesse caso a primeira div fica limitando e servindo como referência para a segunda div.

    Espero ter ajudado e boa sorte!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    • Marcado como Resposta DaviSaba quarta-feira, 24 de outubro de 2012 16:39
    quarta-feira, 24 de outubro de 2012 14:39
  • Consegui, a ajuda de vocês foi muio útil.

    Obrigado!

    quarta-feira, 24 de outubro de 2012 16:38