AJUSTE DE RESOLUÇÃO HTML/CSS
16/03/2020
0
Eu estou iniciando agr na programação, literalmente não sei fazer nada, porém estou praticando e tentando resolver sozinho, mas no meu ultimo problema na hora de "criar um site", eu tive problemas com a resolução não consigo adaptar ela a 2 monitores diferentes, e nem a navegadores diferentes, e ouvi dizer que para que a resolução se adapte é preciso colocar as resoluções em % porém eu não faço ideia de como fazer isso eu vi posts de calculo e tudo mais, mas fico perdido na hora de aplicar isso no site que eu estou fazendo, e alem da resolução tem um traço(com a cor verde escuro) ao lado da Div de conteudo e não sei removelo mas acredito que tbm esteja ligado a resolução, e se alguem puder me dizer como corrigir esses problemas e como melhorar agradeço. Segue abaixo o código do arquivo:
<!DOCTYPE html!>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>EcoBra</title>
<style>
*{
margin: 0;
padding: 0;
}
#topo{
height: 175px;
background-color: #20B2AA;
}
#conteudo {
padding: 0;
width:782px;
height:435px;
background-color:#F0FFFF;
float:left;
margin: 0;
border-top: 0px solid #2E8B57;
}
#lt_e{
width:305px;
height:425px;
float:left;
background-color: #1C1C1C;
border-right: 15px solid #C0C0C0;
border-top: 5px solid #2E8B57;
border-bottom: 5px solid #2E8B57;
margin: 0;
padding: 0;
}
#lt_d{
width:305px;
height:425px;
float:right;
background-color: #1C1C1C;
border-left: 15px solid #C0C0C0;
border-top: 5px solid #2E8B57;
border-bottom: 5px solid #2E8B57;
margin-right: 0;
padding: 0;
}
#rodape{
width:1440px;
height:75px;
clear:both;
background-color: #1C1C1C;
border-top: 5px solid #00FA9A;
}
body{
background-color: #2F4F4F;
font-family: "Verdana";
font-size: 18;
}
.link_menu {
text-decoration: none;
color: white;
font-size: 18;
}
.nav_tabs{
position: relative;
}
.nav_tabs ul{
list-style: none;
}
.nav_tabs ul li{
float: left;
}
.nav_tabs label{
width: 280px;
padding: 20px;
background-color: #1C1C1C;
cursor: pointer;
display: inline-table;
text-align: left;
border-bottom: 5px solid #00FA9A;
margin: 0;
}
.bl_tabs:checked ~ label{
background-color: #00FA9A;
color: #1C1C1C;
border-top: 5px;
}
.bl_tabs{
display: none;
}
</style>
</head>
<body>
<div id="topo">
</div>
<nav class="nav_tabs">
<ul>
<li>
<a class="link_menu" href="">
<input type="radio" name="tabs" class="bl_tabs" id="tab" checked>
<label for="tab">Iniciativa</label>
</a>
</li>
<li>
<a class="link_menu" href="aps1.html">
<input type="radio" name="tabs" class="bl_tabs">
<label>Desperdício De Água</label>
</a>
</li>
<li>
<a class="link_menu" href="aps2.html">
<input type="radio" name="tabs" class="bl_tabs">
<label>Poluição Marinha</label>
</a>
</li>
<li>
<a class="link_menu" href="aps3.html">
<input type="radio" name="tabs" class="bl_tabs">
<label>Desmatamento</label>
</a>
</li>
<li>
<a class="link_menu" href="aps4.html">
<input type="radio" name="tabs" class="bl_tabs">
<label>Corpos Hídricos</label>
</a>
</li>
</ul>
</nav>
<div id="lt_e">
</div>
<div id="conteudo">
</div>
<div id="lt_d">
</div>
<div id="rodape">
</div>
</body>
</html>
<!DOCTYPE html!>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>EcoBra</title>
<style>
*{
margin: 0;
padding: 0;
}
#topo{
height: 175px;
background-color: #20B2AA;
}
#conteudo {
padding: 0;
width:782px;
height:435px;
background-color:#F0FFFF;
float:left;
margin: 0;
border-top: 0px solid #2E8B57;
}
#lt_e{
width:305px;
height:425px;
float:left;
background-color: #1C1C1C;
border-right: 15px solid #C0C0C0;
border-top: 5px solid #2E8B57;
border-bottom: 5px solid #2E8B57;
margin: 0;
padding: 0;
}
#lt_d{
width:305px;
height:425px;
float:right;
background-color: #1C1C1C;
border-left: 15px solid #C0C0C0;
border-top: 5px solid #2E8B57;
border-bottom: 5px solid #2E8B57;
margin-right: 0;
padding: 0;
}
#rodape{
width:1440px;
height:75px;
clear:both;
background-color: #1C1C1C;
border-top: 5px solid #00FA9A;
}
body{
background-color: #2F4F4F;
font-family: "Verdana";
font-size: 18;
}
.link_menu {
text-decoration: none;
color: white;
font-size: 18;
}
.nav_tabs{
position: relative;
}
.nav_tabs ul{
list-style: none;
}
.nav_tabs ul li{
float: left;
}
.nav_tabs label{
width: 280px;
padding: 20px;
background-color: #1C1C1C;
cursor: pointer;
display: inline-table;
text-align: left;
border-bottom: 5px solid #00FA9A;
margin: 0;
}
.bl_tabs:checked ~ label{
background-color: #00FA9A;
color: #1C1C1C;
border-top: 5px;
}
.bl_tabs{
display: none;
}
</style>
</head>
<body>
<div id="topo">
</div>
<nav class="nav_tabs">
<ul>
<li>
<a class="link_menu" href="">
<input type="radio" name="tabs" class="bl_tabs" id="tab" checked>
<label for="tab">Iniciativa</label>
</a>
</li>
<li>
<a class="link_menu" href="aps1.html">
<input type="radio" name="tabs" class="bl_tabs">
<label>Desperdício De Água</label>
</a>
</li>
<li>
<a class="link_menu" href="aps2.html">
<input type="radio" name="tabs" class="bl_tabs">
<label>Poluição Marinha</label>
</a>
</li>
<li>
<a class="link_menu" href="aps3.html">
<input type="radio" name="tabs" class="bl_tabs">
<label>Desmatamento</label>
</a>
</li>
<li>
<a class="link_menu" href="aps4.html">
<input type="radio" name="tabs" class="bl_tabs">
<label>Corpos Hídricos</label>
</a>
</li>
</ul>
</nav>
<div id="lt_e">
</div>
<div id="conteudo">
</div>
<div id="lt_d">
</div>
<div id="rodape">
</div>
</body>
</html>
Victor Alcantara
Curtir tópico
+ 1
Responder
Post mais votado
19/03/2020
Eu rodei seu código aqui e pelo o que eu pude entender está faltando as famosas e temidas @media queries, mas não precisa ter medo do css você pega o jeito com ele praticando, não tem jeito, as medias querias fazem com que os elementos da página tenham um determinado comportamento de acordo com o tamanho da tela pré-definido por você, um exemplo disso:
O que eu disse aí é que em telas com tamanho até 480px a div será de 300px de largura e 150px de altura acima desse valor receberá o valor que está declarado fora do @media.
talvez este artigo te ajude no que você precisa: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
body {
margin: 0;
padding: 0;
text-decoration: none;
width: 100%;
height: 100%;
}
div {
width: 500px;
height:300px;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: auto;
}
@media( max-width: 480px ) {
.container {
width: 300px;
height: 150px;
}
}O que eu disse aí é que em telas com tamanho até 480px a div será de 300px de largura e 150px de altura acima desse valor receberá o valor que está declarado fora do @media.
talvez este artigo te ajude no que você precisa: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Matheus Campos
Responder
Mais Posts
19/03/2020
Matheus Campos
Eu rodei seu código aqui e pelo o que eu pude entender está faltando as famosas e temidas @media queries, mas não precisa ter medo do css você pega o jeito com ele praticando, não tem jeito, as medias querias fazem com que os elementos da página tenham um determinado comportamento de acordo com o tamanho da tela pré-definido por você, um exemplo disso:
O que eu disse aí é que em telas com tamanho até 480px a div será de 300px de largura e 150px de altura acima desse valor receberá o valor que está declarado fora do @media.
talvez este artigo te ajude no que você precisa: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
body {
margin: 0;
padding: 0;
text-decoration: none;
width: 100%;
height: 100%;
}
div {
width: 500px;
height:300px;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: auto;
}
@media( max-width: 480px ) {
.container {
width: 300px;
height: 150px;
}
}O que eu disse aí é que em telas com tamanho até 480px a div será de 300px de largura e 150px de altura acima desse valor receberá o valor que está declarado fora do @media.
talvez este artigo te ajude no que você precisa: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
CORREÇÃO DO CÓDIGO:
body {
margin: 0;
padding: 0;
text-decoration: none;
width: 100%;
height: 100%;
}
div {
width: 500px;
height:300px;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: auto;
}
@media( max-width: 480px ) {
div{
width: 300px;
height: 150px;
}
}
Responder
Clique aqui para fazer login e interagir na Comunidade :)
