0

Estou fazendo um teste e queria saber como não fazer a tela bugar, logo abaixo tem a página normal e ela quando a tela encolhe. inserir a descrição da imagem aqui

Quando diminuo a tela ela perde todo o desing

E eu estou com outro problema, eu queria dar um efeito do botão afundar quando pressionado, vi umas videoaulas, porém o meu botão quando ativo o evento active e coloco top:5px; ele sobe como na imagem abaixo. Botão pressionado

Código HTML

    <div id="moldura"><!--Essa div serve para os slides também-->
    <input id="bt1"  type="button" value="<" onclick="troca(-1)" />     
    <input id="bt2" type="button" value=">"onclick="troca(1)"/>
    </div>

Código CSS

 #moldura{//Localização da Div do slide
width:600px;
height: 450px;
background-color: #eeeeee;
transition: background-image 2s;
position:relative;
top:460px;
left:350px;
     }  

#bt1{//Botão 1
position: relative;
top:170px;
left:-20px;
font-size: 70px;
font-family: arial;
font-weight: 700;
border:none;
padding: 10px;
cursor: pointer;
background: black;
color: #fff;
box-shadow: 0 5px 0 #006000;
    }

#bt2{//botão2
position: relative;
clear:both;
top:170px;
left:500px;
font-size: 70px;
font-family: arial;
font-weight: 700;
border:none;
padding: 10px;
cursor: pointer;
background: black;
color: #fff;
box-shadow: 0 5px 0 #006000;
}   

#moldura input:hover{
background: blue;
color: #fff;
box-shadow: 0 5px 0 #003f00;
}

#moldura input:active{
box-shadow: none;
top:5px;//Aqui era para acontecer o pulo do gato, era pra parecer que o   
botao afundou, mas leva o botao la em cima como na imagem.
}

2 Respostas 2

1

Quanto a sua primeira dúvida, tente colocar uma porcentagem para cada espaço. Crie uma div para armazenar os textos e assim separar um tamanho em porcentagem.

Exemplo:

#wrap{
    max-width: 100%;
}

#foto-f-society{
    width: 20%;
    margin: 0 10%;
}

#textos{
    width: 60%;
}

Já a segunda questão, da uma olhada nesse Efeito Botao Click com CSS.

1

Criar sites que se adaptam ao tamanho da tela é um trabalho que na maioria das vezes dependem um esforço desnecessário

"Não é necessário reinventar a roda" - Claro que você já ouviu falar nisso e para tanto existem muitas soluções prontas para adicionar responsividade as suas páginas

Você pode utilizar frameworks css como bootrstrap, foundation, pure, semantic ui

Porém você já pode ter um site pronto e não quer código de terceiros bagunçando tudo que você já fez? Uma outra solução é utilizar sistemas de grids. Ex: http://www.w3schools.com/css/css_rwd_grid.asp

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .