AJUSTE DE RESOLUÇÃO HTML/CSS

CSS

HTML5

16/03/2020

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>
Victor Alcantara

Victor Alcantara

Curtidas 1

Melhor post

Matheus Campos

Matheus Campos

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:

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
GOSTEI 2

Mais Respostas

Matheus Campos

Matheus Campos

16/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:

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;
    }
}
GOSTEI 2
POSTAR