Comunidad de diseño web y desarrollo en internet

Problema al trabajar con porcentajes

Citar            
MensajeEscrito el 12 Abr 2017 12:18 am
Hola que tal amigos, soy nuevo en el foro, que por suerte lo encontre, les cuento: estoy teniendo problemas al trabajar con porcentajes, el problema es que al ponerle zoom a la pagina, en una parte, los margenes se me agrandan y en las demas partes no se agrandan. Como puedo hacer para que no se agrande en la parte que lo hace?

zoom normal


le pongo zoom y estos espacios no se agrandan


pero estos si son los que se agrandan





les dejo los codigos:


Código HTML :

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div id="contenedor">
<header>
</header>
<nav></nav>
<section id="articulos">
<article id="poesia1">
<article id="imagen1"></article>
<article id="lec1"></article>
</article>
<article id="poesia2">
<article id="imagen2"></article>
<article id="lec2"></article>
</article>
</section>
<section id="autor"></section>
<footer>
<address></address>
</footer>
</div>
</body>
</html>



Código CSS :

*{
box-sizing:border-box;
}
body{
margin: 0;
padding:0;

}
#contenedor{
margin: 0 auto;
padding: 0;
background: #F0FF00;
width:73.5294117647%;
max-width:1000px;
}
header{
margin:0 auto;
background: #A5B000;
width: 95%;
height: 200px;
}
nav{
background:#018207;
width:95%;
height:100px;
margin:0 auto;
}
#articulos{
background:#00FFD4;
width:60%;
height: 500px;
margin:1% 0% 1% 2.5%;
float:left;
}
#poesia1{
background: #FF00F3;
width:100%;
height:250px;
}
#imagen1{
background: #0027FF;
width: 39%;
height: 95%;
margin: 1% 1% 0.5% 1%;
float:left;
}
#lec1{
background: #0027FF;
width: 57%;
height: 95%;
margin: 1% 1% 0.5% 1%;
float:left;
}
#poesia2{
background: #FF00F3;
width:100%;
height:250px;
}
#imagen2{
background: #0027FF;
width: 39%;
height: 95%;
margin: 0.5% 1% 1% 1%;
float:left;
}
#lec2{
background: #0027FF;
width: 57%;
height: 95%;
margin: 0.5% 1% 1% 1%;
float:left;
}
#autor{
background:#0027FF;
width:35%;
height:500px;
margin:1% 1% 1% 0;
float:left;
}
footer{
background:#FF0000;
width: 95%;
height:100px;
margin:0 auto;
clear:both;
}

Por luks_carp

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 Abr 2017 01:55 pm
¿Has probado poner los márgenes fijos en px en vez de % ?

Por jearj

41 de clabLevel



 

mozilla
Citar            
MensajeEscrito el 12 May 2017 05:14 pm
Si vas a repetir código usa clases

Código :

<div id="contenedor">
  <header></header>
  <nav></nav>
  <section id="articulos">
    <article class="article">
      <div class="imagen"></div>
      <div class="lec"></div>
    </article>
    <article class="article">
      <div class="imagen"></div>
      <div class="lec"></div>
    </article>
    <article class="article">
      <div class="imagen"></div>
      <div class="lec"></div>
    </article>
  </section>
  <section id="autor"></section>
  <footer>
    <address></address>
  </footer>
</div>


Y como recomendación personal, usa % en anchos. En altos con medidas fijas

Código :

*{
  box-sizing:border-box;
}
body{
  margin: 0;
  padding:0;
}
#contenedor{
  margin: 0 auto;
  padding: 2.5%;
  background: #F0FF00;
  width:73.5294117647%;
  max-width:1000px;
}
header{
  margin:0 auto;
  background: #A5B000;
  width: 100%;
  height: 200px;
}
nav{
  background:#018207;
  width:100%;
  height:100px;
  margin:0 auto;
}
#articulos{
  background:#00FFD4;
  width:62%;
  margin:3px 2.5% 6px 0;
  float:left;
}
.article{
  background: #FF00F3;
  width:100%;
  height:250px;
  padding:2px;
}
.imagen{
  background: #0027FF;
  width: 40%;
  height: 100%;
  float:left;
}
.lec{
  background: #0027ba;
  width: 58%;
  height: 100%;
  float:right;
}
#autor{
  background:#0027FF;
  width:35%;
  height:500px;
  float:right;
  margin:3px 0 6px;
}
footer{
  background:#FF0000;
  width:100%;
  height:100px;
  margin:0 auto;
  clear:both;
}

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.