Comunidad de diseño web y desarrollo en internet online

La pagina se deforma al aumentar o disminuir el zoom

Citar            
MensajeEscrito el 17 Dic 2009 03:39 pm
hola, quizá alguien sabe como evitar que mi pagina web se deforme al aumentar o disminuir el zoom en cualquier navegador, la maquetacion la tengo en en un archivo css y me imagino que es alguna propiedad de que me falta en dicho archivo. Gracias....

Por sebastiancb

62 de clabLevel



 

msie8
Citar            
MensajeEscrito el 17 Dic 2009 05:14 pm
Mmm... Sin ver tu página ni tu CSS quizás me cueste ayudarte. Pero en qué sentido se "deforma"? Agradecería que fueses un poco más claro.

Prueba lo siguiente: Qué tal si pones las medidas de los contenedores en em? De este modo, su tamaño variará dependiendo el de la tipografía. ^^

Por Drake

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Dic 2009 03:23 pm
Mira, no puedo subir la pagina, pero voy a colocar el codigo y la verdad es que la pagina se deforma solamente al disminuir el zoom en el navegador, esto se puede ver al presionar la tecla control y la ruedita del mouse.
/*codigo css*/
*{margin:0;padding:0;}

body {margin:10px;
padding:0;
background-color:rgb(173,210,236);
/*background-image:url(../imagenes/fondo.jpg);*/
}

#content {
margin:0 auto;
position:relative;
width:800px;
height:820px;
border:1px solid #999999;
background-color:transparent;
}

#header {
text-align:center;
vertical-align:middle;
width: 800px;
height:120px;
/*border-bottom:1px solid #999999;*/
background-color:#006699;
}


#buscar{
width:300px;
height:22px;
float:left;
border-bottom:1px solid #999999;
background-color:#990000;
}

#menuhorizontal{
width:500px;
height:22px;
float:left;
background-color:#99CC33;
border-bottom:1px solid #999999;
}

#navegacion {
width:186px;
height:627px;
border-right:1px solid #999999;
float:left;
background-color:#CC6600;
}

#contenido {
width:452px;
height:627px;
float:left;
background-color:#003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#333333;
text-align:center;
}

#mas {
width:160px;
height:627px;
border-left:1px solid #999999;
float:left;
background-color:#3399FF;
}


#pie {
clear:both;
width:800px;
height:49px;
border-top:1px solid #999999;
background-color:#00FFFF;
font-weight:bold;
color:#666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}


/****codigo html*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div id="header"></div>
<div id="buscar"></div>
<div id="menuhorizontal"></div>
<div id="navegacion"></div>
<div id="contenido"></div>
<div id="mas"></div>
<div id="pie"></div>
</div>
</body>
</html>

Por sebastiancb

62 de clabLevel



 

msie8
Citar            
MensajeEscrito el 21 Dic 2009 07:51 pm
Como bien dice drake, pon las medidas en "em" o en porcentajes "%". Creo que así se te solucionaría el problema.

Por jtole

6 de clabLevel



 

msie8
Citar            
MensajeEscrito el 21 Dic 2009 08:29 pm
Intenta utilizando "em" en vez de "px", así usas una medida relativa, sin embargo, sería mucho más útil que montaras tu web en algún lugar donde pudieramos verla para ayudarte mejor.

Por elfleat

871 de clabLevel

2 tutoriales

Genero:Masculino  

Miami, USA

firefox
Citar            
MensajeEscrito el 14 Ene 2010 04:29 pm
Voy a explicar como es q se deforma, solo sucede cuando disminuyo el zoom en el navegador, la maquetacion está a tres columnas y cuando se deforma me refiero a que la columna derecha (div #mas") se me va a debajo del div navegacion y viendo el codigo descubri q esto sucede cuando escribo border-right:1px solid #999999 en el div navegacion y border-left:1px solid #999999 en el div mas y he intentado corregirlo pero nada.

Por sebastiancb

62 de clabLevel



 

msie8

 

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