0
I need to use the padding to leave a spacing between the edge and the center but when I use padding the div this moving any have any idea?
http://yugioh.site/layout.html
css
html, body { height: 100vh; width: 100vw; margin: 0;background-image: url("http://img13.deviantart.net/ae68/i/2012/268/1/8/akiza_yugioh_wallpaper_by_iad1l-d5fv2aa.jpg");background-size: 100% 100%;min-height:500px;min-width:1000px;}
#logo {
height: 14vh;
width: 20vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 0vh;
left: 0.5vw;
background-image: url("img/fundo_logo.png");
background-size: 100% 100%;
}
#usuarioonline {
height: 84vh;
width: 20vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 15vh;
left:0.5vw;
background-image: url("img/fundo_online.png");
background-size: 100% 100%;
}
#perfil {
height: 14vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 0vh;
left: 21vw;
background-image: url("img/fundo_usuario.png");
background-size: 100% 100%;
}
#desafio {
height: 39vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 15vh;
left:21vw;
background-image: url("img/fundo_usuario.png");
background-size: 100% 100%;
}
#chat {
height: 39vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 55vh;
left:21vw;
background-image: url("img/fundo_chat.png");
background-size: 100% 100%;
}
#chatinput {
height: 5vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 94vh;
left:21vw;
background-image: url("img/fundo_chatinput.png");
background-size: 100% 100%;
}
#menu {
height: 14vh;
width: 50vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 0vh;
left:49vw;
background-image: url("img/fundo_menu.png");
background-size: 100% 100%;
}
#conteudo {
height: 83.5vh;
width: 50vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 15.5vh;
left:49vw;
background-image: url("img/fundo_conteudo.png");
background-size: 100% 100%;
}
SEE THE SOURCE CODE I used the padding only in the first div logo and the same moved to the side.
I know I can put another div inside it and add the attributes I want, but in order to reduce the code I’d like to know if it’s possible what I want.
html
<div id="logo">logo</div>
<div id="usuarioonline">useronline</div>
<div id="perfil">perfil</div>
<div id="desafio">desafio</div>
<div id="chat">chat</div>
<div id="chatinput">chatinput</div>
<div id="menu">menu</div>
<div id="conteudo">conteudo</div>