Ir para conteúdo
andersonb8

Layout CSS é possível esse modelo.

Recommended Posts

Olá,

 

Preciso manter esse layout, porém gostaria que a barra de rolagem ficasse na página e não na div como está agora.

 

Qualquer alteração é bem vinda, inclusive com Jquery.

 

<body>
        <div id="background"></div>
        <div id="menu"></div>
        <div id="content">
            <div id="inner">
                <div id="section">
                    <h3>Passagem padrão original de Lorem Ipsum, usada desde o século XVI.</h3>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                    <h3>Seção 1.10.32 de "de Finibus Bonorum et Malorum", escrita por Cícero em 45 AC</h3>
                    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
                    <h3>Tradução para o inglês por H. Rackha, feita em 1914</h3>
                    <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p>
                    <h3>Seção 1.10.33 de "de Finibus Bonorum et Malorum", escrita por Cícero em 45 AC</h3>
                    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                    <h3>Tradução para o inglês por H. Rackha, feita em 1914</h3>
                    <p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p>
                </div>
            </div>
        </div>
    </body>
<style>
            body{
                margin: 0;
            }
            #background{
                position: fixed;
                filter: grayscale(0.8) contrast(100%);
                width: 100%;
                height: 100%;
                background: url(back.jpg) center center;
                background-size: cover;
                z-index: -9999;
            }           
            #menu {
                height: 60px;
                background: rgba(47, 47, 47, 0.29);
                position: fixed;
                width: 100%;
            }
            #content{
                width: 100%;
                height: 100%;
                padding-top: 120px;
                padding-left: 300px;
                box-sizing: border-box;
            }
            #inner{
                background: rgba(255, 255, 255, 0.74);
                padding: 60px 0 12px 65px;
                box-sizing: border-box;
                height: 100%;
                font-family: calibri;
                color: #204267;
            }
            #section{
                background: #fff;
                padding: 20px 50px;
                overflow-x: hidden;
                height: 100%;
                box-sizing: border-box; 
            }          
        </style>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu apenas mudei # menu e quando voce scrollar o #menu nao te persegue. Espero que esse fosse seu problema e que eu tenha solucionadoCapturar.thumb.PNG.321c7b0791f740dd8821c821c9d524b2.PNG

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não amigo é um pouco mais complicado, como as vezes é difícil de se expressar eu upei o html aqui pra vizualização.

http://www.aguiabranca.net

 

Eu gostaria de deixar o scroll na pagina e não na div como ta ai no site (pegar do inicio até o rodapé), será que tem como fazer isso, mesmo que mudando a estrutura das divs. 

 

Já tem um tempão que tô tentando e não achei uma solução, ai deixei pra lá, agora retomei de novo a ideia e tô pedindo ajuda aos imasters de prantão. 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pelo que entendi.....

Retire o height de: #content / #inner / #section

E também remova o overflow de #section

 

Isso fará com que #content ganhe a altura correspondente aos elementos internos no que também aumentará automaticamente o height do body, fazendo com que a barra de rolagem fique anexada ao body.

 

Agora se não for isso seria bom você encontrar algum website que aplica o que você espera, assim fica mais fácil ter a ideia real do que pretende fazer.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
    • Por BryanSamuel
      Como faz para que, quando o mouse estiver em cima do bloco, o scroll rode na horizontal?
       
    • Por Da Galaxia
      Olá à todos!!!
       
      Em um listView, carrego o conteúdo do banco de dados (O bd esta em uma thread em backgroud e carrega em tempo satisfatório), como o conteúdo é grande, leva um tempo para o componente ser preenchido. Como fazer para preencher apenas a parte visível na tela e ir preenchendo na medida que role o scroll? Flw!!!
    • Por jefersonlsch
      Estou utilizando o plugin ScrollMe, do Nick Pearson. Até ai tudo bem, as animações estão funcionando perfeitamente.
       
      Mas, preciso que o efeito inverso não aconteça ao voltar para o topo do site.
       
      Alguma ideia de como posso desativar isto?
       
      Ou algum outro plugin em jQuery para utilizar.
    • Por Fernandroid
      Queria configurar os botoes de subir e descer para dar scroll na pagina. 
      Atualmente só consegui dar um scroll em uma determina parte da pagina, gostaria de configurar para ir clicando e a pagina rolando para baixo ou para cima. 
      Aqui está o codigo exemplo, se clicar no texto, o popup abre com os tres botoes, o botao "fechar" ja consegui configurar.
       
      <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0; } html, body { background: silver; color: #fff; overflow: hidden; touch-action: none; -ms-touch-action: none; } canvas { touch-action-delay: none; touch-action: none; -ms-touch-action: none; } .container_black{ background: rgba(0,0,0,0.3); width: 100%; height: 100%; position: fixed; z-index: 9999; top: 0; left: 0; display:none } .container_popup{ background: #fff; width: 90%; height: 90%; overflow: auto; position: fixed; top: 5%; left: 5%; color: #666; padding: 10px; box-sizing: border-box; font-family: Tahoma, Geneva, sans-serif; border: 3px solid #666; box-shadow: -3px 3px 4px 1px rgba(0, 0, 0, 0.33); } .container_popup h1 {margin: 10px 0;} .container_popup p { margin: 10px 0; } .fechar_popup{ padding: 10px; text-align: center; background: #666; color: #fff; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; width: 20px; cursor: pointer; position: fixed; right: 5%; top: 5%; } .descer{ padding: 10px; text-align: center; background: #666; color: #fff; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; width: 30px; cursor: pointer; position: fixed; right: 5.5%; top: 86.5%; } .subir{ padding: 10px; text-align: center; background: #666; color: #fff; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; width: 30px; cursor: pointer; position: fixed; right: 5.5%; top: 77%; </style> </head> <body> <div class="container_black"> <div class="container_popup"> <div id="lista"> <h1>Política de Privacidade</h1> <p>Esses tipos de serviços permitem a interação com as redes sociais ou outras plataformas externas diretamente a partir das páginas deste serviço (este aplicativo). A interação e as informações obtidas por este aplicativo estão sempre sujeitas às configurações de privacidade do usuário em cada rede social. Se um serviço que permite a interação com as redes sociais estiver instalado poderá coletar dados de tráfego para as páginas, onde o serviço esteja instalado, mesmo quando os usuários não estiverem usando os mesmos.</p> <h4>O botão Curtir e widgets sociais do Facebook (Facebook, Inc.)</h4> <p>O botão Curtir do Facebook e widgets sociais são serviços que permitem a interação com a rede social Facebook fornecido pela Facebook, Inc.</p> <p>Dados pessoais coletados: cookie e dados de uso. Local de processamento: EUA – Política de Privacidade.</p> <h3>Contatar o usuário</h3> <h4>Lista de endereçamento ou boletim informativo (este aplicativo)</h4> <p>Ao registar-se na lista de endereçamento ou no boletim informativo, o endereço de e-mail do usuário será adicionado à lista de contatos daqueles que podem receber mensagens de e-mail que contenham informações de natureza comercial ou promocional sobre este Aplicativo. O seu endereço de e-mail também poderá ser adicionado a esta lista, como resultado de sua inscrição neste serviço (este aplicativo).</p> <h2>Informações adicionais sobre a coleta e processamento de dados</h2> <h3>Ação jurídica</h3> <p>Os dados pessoais dos usuários podem ser utilizados para fins jurídicos pelo controlador de dados em juízo ou nas etapas conducentes à possível ação jurídica decorrente de uso indevido deste serviço (este aplicativo) ou dos serviços relacionados.</p> <p>O usuário declara estar ciente de que o controlador dos dados poderá ser obrigado a revelar os dados pessoais mediante solicitação das autoridades governamentais.</p> <h3>Informações adicionais sobre os dados pessoais do usuário</h3> <p>Além das informações contidas nesta política de privacidade, este aplicativo poderá fornecer ao usuário informações adicionais e contextuais sobre os serviços específicos ou a coleta e processamento de dados pessoais mediante solicitação.</p> <h3>Logs do sistema e manutenção</h3> <p>Para fins de operação e manutenção, este aplicativo e quaisquer serviços de terceiros poderão coletar arquivos que gravam a interação com este aplicativo (logs do sistema) ou usar, para este fim, outros dados Pessoais (tais como o endereço IP).</p> <h3>As informações não contidas nesta política</h3> <p>Mais detalhes sobre a coleta ou processamento de dados pessoais podem ser solicitados ao controlador de dados, a qualquer momento. Favor ver as informações de contato no início deste documento.</p> <h3>Os direitos dos usuários</h3> <p>Os usuários têm o direito de, a qualquer tempo, consultar o controlador de dados para saber se os seus dados pessoais foram armazenados e saber mais sobre o conteúdo e origem, verificar a sua exatidão ou para pedir que sejam complementados, cancelados, atualizados ou corrigidos, ou que sejam transformados em formato anônimo ou bloquear quaisquer dados mantidos em violação da lei, bem como se opor ao seu tratamento por quaisquer todas as razões legítimas. Os pedidos devem ser enviados para o controlador de dados usando a informação de contato fornecida anteriormente.</p> <p>Este aplicativo não suporta pedidos de &#8220;Não me rastreie&#8221;.</p> <p>Para determinar se qualquer um dos serviços de terceiros que utiliza honram solicitações de &#8220;Não me rastreie&#8221;, por favor leia as políticas de privacidade.</p> <h3>Mudanças nesta política de privacidade</h3> <p>O controlador de dados se reserva o direito de fazer alterações nesta política de privacidade a qualquer momento, mediante comunicação aos seus usuários nesta página. É altamente recomendável que esta página seja consultada várias vezes em relação à última modificação descrita na parte inferior. Se o Usuário não concorda com qualquer das alterações da política de privacidade, o usuário deve cessar o uso deste serviço (este aplicativo) e pode solicitar ao controlador de dados que apague os dados pessoais dele. Salvo disposição em contrário, a atual política de privacidade se aplica a todos os dados pessoais dos usuários que o controlador de dados tiver.</p> <h3>Definições e referências jurídicas</h3> <h3>Dados pessoais (ou dados)</h3> <p>Quaisquer informações relativas a uma pessoa física, pessoa jurídica, instituição ou associação, as quais sejam, ou possam ser identificadas, mesmo que indiretamente, por referência a quaisquer outras informações, incluindo um número de identificação pessoal.</p> <h3>Dados de uso</h3> <p>As informações coletadas automaticamente a partir deste serviço (ou serviços de terceiros contratados neste serviço (este aplicativo), que podem incluir: os endereços IP ou nomes de domínio dos computadores utilizados pelos usuários que utilizam este aplicativo, os endereços URI (Identificador Uniforme de Recurso), a data e hora do pedido, o método utilizado para submeter o pedido ao servidor, o tamanho do arquivo recebido em resposta, o código numérico que indica o status do servidor de resposta (resultado positivo, erro , etc.), o país de origem, as características do navegador e do sistema operacional utilizado pelo usuário, os vários detalhes de tempo por visita (por exemplo, o tempo gasto em cada página dentro do aplicativo) e os detalhes sobre o caminho seguido dentro da aplicação, com especial referência à sequência de páginas visitadas e outros parâmetros sobre o sistema operacional do dispositivo e/ou ambiente de TI do Usuário.</p> <h3>Usuário</h3> <p>A pessoa que usa este aplicativo que deverá coincidir com ou estar autorizada pelo titular dos dados a quem os dados pessoais se referem.</p> <h3>Titular dos dados</h3> <p>A pessoa jurídica ou física a quem os dados pessoais se referem.</p> <h3>Processador de dados (ou supervisor de dados)</h3> <p>A pessoa física, pessoa jurídica, a administração pública ou qualquer outro órgão, associação ou organização autorizada pelo controlador de dados para o processamento dos dados pessoais em conformidade com esta política de privacidade.</p> <h3>Controlador de dados (ou proprietário)</h3> <p>A pessoa física, pessoa jurídica, administração pública ou qualquer outra entidade, associação ou organização com direitos, também em conjunto com outro controlador dos dados, para tomar decisões sobre as finalidades e os métodos de processamento de dados pessoais e os meios utilizados, incluindo medidas de segurança relativas ao funcionamento e ao uso deste serviço. O controlador de dados, a menos que seja especificado de outra forma, é o proprietário deste serviço (este aplicativo).</p> <h3>Este aplicativo / Jogo</h3> <p>A ferramenta de hardware ou software pela qual os dados pessoais do usuário são coletados.</p> <h3>Cookie</h3> <p>Pequenas unidades de dados armazenados no dispositivo do usuário.</p> <h2>Informação jurídica</h2> <p>Aviso aos usuários europeus: esta declaração de privacidade foi elaborada em cumprimento das obrigações nos termos do art. n.10 da Diretiva 95/46/CE, e de acordo com as disposições da Diretiva 2002/58/CE, tal como revisto pela Diretiva 2009/136/CE, sobre o assunto de Cookies.</p> <p>Esta política de privacidade é apenas sobre este Aplicativo/Jogo.</p> <p><b>Última atualização:</b> 25 de Fevereiro de 2018</p> <p>&nbsp;</p> </div> <div class="fechar_popup">X</div> <div class="descer">⬇</div> <div class="subir">⬆</div> </div><!--container_popup--> </div><!--container_black--> <div id="fb-root"></div> <p>Clique para aparecer o poup</p> <p>Clique para aparecer o poup</p> <p>Clique para aparecer o poup</p></div> <script> $(document).ready(function(){ $("p").click(function(){ $(".container_black").fadeIn(); }); }); </script> <script> $(document).ready(function(){ $(".fechar_popup").click(function(){ $(".container_black").fadeOut(); }); }); </script> <script> $(document).ready(function(){ $(".descer").click(function(){ $(".container_popup").animate({ scrollTop: 1000 }, 1000); }); }); </script> <script> $(document).ready(function(){ $(".subir").click(function(){ $(".container_popup").animate({ scrollTop: 0 }, 500); }); }); </script> </body> </html>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.