Ir para conteúdo
williammza

Centralizar Janela igual ao WhatsApp Web!

Recommended Posts

Estou querendo fazer um site que não use a scrollbar, e colocar o conteudo dentro de uma div, que fique centralizada no centro da página igual a janela do chat do whatsapp web, que você pode diminuir ou almentar que ela se adapta a janela do navegador, de largura consegui com o css

 

.sol {
    width: 960px;
    margin: 0 auto;
}

Ae ele fica no meio da página, mais da altura não sei como fazer, alguém poderia me da uma ajuda!

 

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

O que não falta é tutorial na internet ensinando esse macete.. da uma olhadinha, https://www.google.com.br/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=centralizar+na+vertical+css&*

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 19/3/2017 at 08:43, williammza disse:

Estou querendo fazer um site que não use a scrollbar, e colocar o conteudo dentro de uma div, que fique centralizada no centro da página igual a janela do chat do whatsapp web, que você pode diminuir ou almentar que ela se adapta a janela do navegador, de largura consegui com o css

 


.sol {
    width: 960px;
    margin: 0 auto;
}

Ae ele fica no meio da página, mais da altura não sei como fazer, alguém poderia me da uma ajuda!

 

Obrigado!

 

 

Você pode usar o Bootstrap, é uma estrutura ou conjunto de ferramentas de código aberto para design de sites e aplicativos da web. Ele contém modelos de design com tipografia, formas, botões, caixas, menus de navegação e outros elementos de design com base em HTML e CSS, bem como extensões de opcional adicionais de JavaScript. É o projeto mais popular no GitHub e é usado pela NASA e MSNBC entre outras organizações.

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 Diego Carlos
      Fiz um laço .each que retorna alguns button:   $(document).ready(function(){ listarPedidos() var consultas = setInterval(listarPedidos, 4000); }); function listarPedidos(){ $.getJSON('conectar/_pedidos/listaPedidos.php', function (data) { $.each(data, function(i, valor){ elementoFILA += "<tr id='statusFILA'>"; elementoFILA += "<td>" + valor.PED_ID + "</td>"; elementoFILA += "<td>" + valor.PED_DATA_N + "</td>"; elementoFILA += "<td>" + resultado + " / " + valor.CLI_TEL + "</td>"; elementoFILA += "<button class='btn btn-info' id='btnVisu' title='Visualizar Pedido'><i class='fas fa-eye'></i> </button>"; elementoFILA += "<button class='btn btn-primary' title='Editar Pedido'><i class='fa fa-pencil-alt'></i> </button>"; elementoFILA += "<button class='btn btn-dark' disabled='' title='Setar Saiu Entrega'><i class='fa fa-motorcycle'></i> </button>"; elementoFILA += "<button class='btn btn-dark' id='btnFinalizar' disabled='' title='Finalizar Pedido'><i class='fa fa-check'></i> </button>"; elementoFILA += '</td>' elementoFILA += "</tr>"; } Minha dificuldade é pegar linha id='btnVisu'.
      Estou tentando fazer dessa forma, mas não da certo:
      $('#btnVisu').click(function () { alert("clicou"); });  
       
      já fiz com class também mas não deu, engraçado que dessa forma deveria pelo menos pegar o primeiro da lista e não pega
       
      dês de já agradeço
       
       
    • Por Guga Alves
      Olá, estou enfrentando um problema no qual não tinha tido contato até então.

      Alguns textos em uma landing que estou trabalhando simplesmente não exibidos ou apresentam erros na exibição.

      Gostaria de saber se alguém já enfrentado esse problema poderia me ajudar com isso.

      Abaixo segue imagens dos erros
       
       
       


    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por jaquelss
      Estava fazendo download de coisas que uso no trabalho, mas parece que esqueci de algo. Sempre dá esse erro, mas tecnicamente parece que tá tudo ok?
      Eu esqueci algum programa ou algo do código em si?
      Agradeço desde já.
×

Informação importante

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