Solucionado
Estou com um problema de dimensionamento que é o seguinte. Tenho 3 páginas criadas, todas com a mesma estrutura de html e css, e o que muda é o conteúdo. Só que quando eu mudo de uma página pra outra, o tamanho dos elementos muda, mesmo eu estando usando a mesma estrutura pra todos.
Rodrigo,
Essa diferença só acontece quando vc navega ou se vc abrir elas separadamente também acontece? Consegue disponibilizar seu código?
Abraço
Acontece do mesmo jeito. Percebi que em outro computador não acontece.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>Meus cuscos</title>
</head>
<body>
<main>
<h1> Por quê prefiro cachorros? </h1>
<div class="container">
<p>Eu sempre deixei bem clara minha preferência por cachorros à gatos. Não que eu saia por aí chutando os bichanos ou rodando-os pelo rabo, mas minha relação com cachorros é muito melhor. Cães são os melhores companheiros, eu os entendo e eles me entendem. Eis 10 razões que me fazem preferir os cães aos gatos:</p>
<p>1) Você já viu um gato persa ou um siamês servindo de guia para cegos? Cães são úteis;</p>
<p>2) Quem possui um gato de guarda? Cães são ótimos pra proteção pessoal e de sua propriedade;</p>
<p>3) Quando você chega em casa cansado de um dia de trabalho, o seu cãozinho pula como louco e mostra como sentiu a sua falta;</p>
<p>4) Cães em geral são dóceis e tranquilos, a depender da raça e de como foram criados;</p>
<p>5) Cães adoram crianças e tendem a ter laços afetivos fortes com seus filhos;</p>
<p>6) Exceção feita a algumas raças com pelo muito longo, cães não exigem um cuidado exagerado, bastando dar-lhes carinho e uma boa alimentação;</p>
<p>7) Cães são animais extremamente inteligentes, se bem treinados podem executar diversas tarefas;</p>
<p>8) Por demandarem passeios constantes farão você melhorar a sua condição física passeando com eles;</p>
<p>9) Eles te amam incondicionalmente;</p>
<p>10) Eles sentem o que você sente, se você estiver triste ele jamais sairá do seu lado.</p>
<p>É por isso que eu prefiro cães. Cachorro é o maior barato!</p>
</div>
</main>
<aside>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="cusco.html">Meus Cuscos</a></li>
<li><a href="#">Galeria</a></li>
<li><a href="#">Cuscoland</a></li>
</ul>
<ul class="icones-redes-sociais">
<li>
<a class="pata" href="#">
Pata
</a>
</li>
<li>
<a class="instagran" href="#">
instagran
</a>
</li>
<li>
<a class="facebook" href="#">
Facebook
</a>
</li>
</ul>
</aside>
<footer>
<p> © Cuscos do Klaes ltda, 2017 </p>
</footer>
</body>
</html>E esse é o html da outra página
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>Meus cuscos</title>
</head>
<body>
<main>
<h1> Cachorrada </h1>
<div class="container">
<ul class="meus_cuscos">
<li>
<figure>
<img src="jake.png" alt="Jake">
<figcaption>
Esse é o Jake. Ele adora subir em cima das coisas e é muito amigo e brincalhão.
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="rex.png" alt="Rex">
<figcaption>
Esse é o Rex. Ele é muito passifico e adora dar uma volta na rua.
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="safira.png" alt="Safira">
<figcaption>
Essa é a Safira. Adora um carinho e ta sempre alerta. É a primeira a lartir quando há algo estranho na rua.
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="bethoveen.png" alt="Bethoveen">
<figcaption>
E por fim, esse é o Bethoven. Ele é muito brigão e adora atenção. Também é o mais mimado da casa.
</figcaption>
</figure>
</li>
</ul>
</div>
</main>
<aside>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="cusco.html">Meus Cuscos</a></li>
<li><a href="#">Galeria</a></li>
<li><a href="#">Cuscoland</a></li>
</ul>
<ul class="icones-redes-sociais">
<li>
<a class="pata" href="#">
Pata
</a>
</li>
<li>
<a class="instagran" href="#">
instagran
</a>
</li>
<li>
<a class="facebook" href="#">
Facebook
</a>
</li>
</ul>
</aside>
<footer>
<p> © Cuscos do Klaes ltda, 2017 </p>
</footer>
</body>
</html>E aqui o css
@font-face {
font-family: "PuppyBellies";
src:url("fonte/PuppyBellies.TTF");
}
body{
font-family: "PuppyBellies";
background-color: #F2FFFC;
}
main{
}
main h1 {
display: inline-block;
width: 100%;
text-align: center;
background-color: #851944;
color: #FFF;
margin: 0;
padding: 25px;
border-bottom: 10px solid black;
font-size: 60px;
text-transform: uppercase;
}
main > div > p {
margin: 35px;
font-size: 135%;
}
main > div > p:nth-child(2n){
background-color: black;
color: white;
}
.container {
width: 720px;
margin: auto;
padding: 30px 0;
float: right;
width: 85%
}
aside ul li{
padding:15px;
text-align: center;
}
aside ul li a{
font-weight: bold
color: white;
text-decoration: none;
font-size: 125%
}
aside ul li a:link{
color: white;
}
aside ul li a:visited{
color: white;
}
aside ul {
display: block;
background-color: #3C1D3D;
border-right: 10px solid black;
float: left;
width: 15%;
box-sizing: border-box;
}
footer{
clear: both;
background-color: black;
color: white;
padding: 10px;
}
.icones-redes-sociais{
border-bottom: 10px solid black;
text-align:center;
}
.icones-redes-sociais li {
display: inline-block;
}
.icones-redes-sociais a {
width: 32px;
height: 32px;
display: inline-block;
text-indent: -99999px;
}
.pata{
background-image: url(pata.png);
}
.instagran{
background-image: url(instagran.png);
}
.facebook{
background-image: url(facebook.png);
}
.meus_cuscos{
padding: 10px;
padding-bottom: 30px;
}
.meus_cuscos li {
display: inline-block;
border: 8px solid black;
background-color: #FAFFFC;
width: 45%;
box-sizing: border-box;
padding: 26px;
margin-right: 16px;
margin-bottom: 16px;
text-align: center;
}
.meus_cuscos img {
width: 100%;
max-width:300px;
max-height:150px;
}Cara,
Testei seus arquivos e os dois estão com o mesmo tamanho. Não achei nenhum problema no css tbm. Verifica se não tem zoom do browser aplicado em uma das abas.
Qual browser vc está usando?
Cara, to me mijando de rir aqui. O problema era o zoom, e foi a única coisa que não tinha testado. Obrigado pela ajuda!
Rodrigo,
Huahuaha não deixa de ser engraçado, mas acontece..
Abraço