How not to make the site bugar when I decrease the screen and problem with button going up in CSS?

Question

How not to make the site bugar when I decrease the screen and problem with button going up in CSS?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I'm doing a test and wanted to know how not to make the canvas bugar, just below it has the normal page and it when the screen shrinks.

AndI'mwithanotherproblem,Iwantedtogiveabuttonsinkeffectwhenpressed,Isawvideotapes,howevermybuttonwhenactiveactivatestheeventandputtop:5px;itrisesasintheimagebelow.

HTMLcode

<divid="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>

CSS Code

 #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.
}

html css

asked by anonymous 08.12.2016 / 14:33

2 answers

1

Creating websites that fit the screen size is a job that most often depends on unnecessary effort

"No need to reinvent the wheel" - Of course you've heard of it and there are many ready-made solutions to add responsiveness to your pages.

You can use css frameworks like bootrstrap, foundation, pure, semantic ui

But you already have a ready website and you do not want third-party code messing up everything you've ever done? Another solution is to use grids systems. Ex: link

08.12.2016 / 17:00

When should I use each log level in Android Studio? Counter in model

score 1 · Accepted Answer

As for your first question, try to put a percentage for each space. Create a div to store the texts and thus separate a size in percentage.

Example:

#wrap{
    max-width: 100%;
}

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

#textos{
    width: 60%;
}

The second question, take a look at this Click Effect Click with CSS .