Pesquisar na Comunidade

Boa tarde pessoal, estou precisando de ajuda. Tenho uma página web que possue botões e quando eu passo o mouse em cima deles outros botões se expandem para os lados. A questão é que ao se expandir elas estão indo para o lado e passando da janela criando uma barra de rolagem e dificultando a leitura desses botões. Eu quero que quando esses botões forem passar da janela eles se expandam para baixo ao invés de se expandirem para o lado, mas apenas os botões que vão ultrapassar a janela. Conseguem me ajudar dizendo como fazer isso no CSS?

Eu fiz um componente que consiste em uma caixa que vai ser exibida dentro do meu background. Eu preciso de 4 dessas caixas e para isso, usei o v-for para não precisar criar 4 componentes basicamente iguais. Só que, com isso, as caixas não estão ficando posicionadas corretamente e o meu fundo não acompanha a adição de componentes na tela. Defini a position do componente (box) como absoluta já que foi a única maneira de colocá-las dentro do background, contudo, as 4 caixas ficam sobrepostas e eu preciso de movê-las pela tela. As demais posições fazem com que elas fiquem a cima do fundo, num espaço em branco da tela. Como posso resolver isso? Não gostaria de criar componentes iguais para resolver esse problema. Background CSS: <style> *{ margin: 0; padding: 0; } .background{ height: 100vh; background-color: #3B3B3B; } .title{ border: 1px solid #707070; border-left: none; border-right: none; padding-top: 5em; } .title h2{ text-align: left; color: #B16DFF; padding-top: 0.8em; font-size: 2em; padding-bottom: 0.5em; margin-left: 1.5em; font-weight: 600; } @media(max-width: 600px){ .title h2{ font-size: 1.17em; } } </style> Component (box) CSS: <style scoped> *{ margin: 0; padding: 0; } .box{ display: flex; flex-direction: column; position: absolute; z-index: 10; width: 45em; height: 30em; margin-left: 1.5em; margin-top: 12em; background-color: #232323; } .title{ border-bottom: 1px solid #707070; } .title p{ padding: 0.2em 0.8em; font-size: 1.5em; font-weight: 600; color: white; text-align: left; } </style> Vue.App CSS: <style> html, body { margin: 0; padding: 0; box-sizing: border-box; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; }

Eu estou fazendo uma página pra faculdade que só pode ser usado HTML e CSS, e nessa página eu gostaria de ter um scrolls, Porém, ao invés de usar o scroll do mouse, usar um botão dentro da própria página levando ela ao conteúdo desejado. No caso, a página seria uma só e teriam algumas camadas, a camada da página inicial que conteria todos os botões levando a todas as outras camadas, camada de baixo com algum conteúdo, outra camada com outro conteúdo... Como posso fazer? Além de querer saber como criar os scrolls, queria saber como criar backgrounds separados, página inicial de uma cor, conteúdo de outra, assim como no site. Desde já, agradeço. Site de exemplo: Arcadis.com

E ai pessoal, tudo certo? Estou com um problema para manipular algumas propriedades do CSS pelo JavaScript. Trecho JavaScript: function rodadas(){ for(i=0;i<=9;i++){ for(novaRodada=0;novaRodada<5;novaRodada++){ if (cacheGame[i] == 1){ document.getElementById('janela1').style.display='block'; //erro: Uncaught TypeError: Cannot read property 'style' of null //alert("abrir janela1"); break; } if (cacheGame[i] == 2){ //document.getElementById('janela2').style.display='block'; alert("abrir janela1"); break; } if (cacheGame[i] == 3){ alert("abra a janela 3!"); break; } if (cacheGame[i] == 4){ alert("abra a janela 4!"); break; } if (cacheGame[i] == 5){ alert("abra única porta!"); break; } } } } Trecho CSS: #janela1{ float: left; width: 260px; height: 218px; position: relative; left: 180px; top: 57px; background: url(../imagens/Janela.png); display: none;/* ESTOU TENTANDO PASSAR DE "none" PARA "block" VIA JAVASCRIPT*/ }