Mantener Divs en su lugar al hacer zoom con Ctrl+

Tampico · #1 (**permalink**) 20/01/2012, 11:36

Que tal compañeros antes que nada les envío un respetuoso saludo.

He estado tratanto de resolver un problema que sinceramente no se a que se deba, les platico estoy haciendo una página la que he maquetado de la siguiente manera-

Código HTML:

<body>
	<div id="page-wrapper">
	<div id="page" class="clearfix">
		<div class="myclear"></div>
		
		<div id="header" class="clearfix">
			<div id="logo-left">						
			</div>
			<div class="headermain">
				
			</div>
			<div id="logo-right">
			</div>	
		
		</div>
		<div class="myclear"></div>
		<center>
		 <div id="group-logos" class="clearfix">
			<div id="row">
				
				<div class="logos" id="left">					
				</div>
				
				<div class="logos" id="middle">
				</div>
				
				<div class="logos" id="middle-1">
				</div>
				
				<div class="logos" id="rigth">					
				</div>
			</div>
			 <div id="row">
				
				<div class="logos" id="left">                    
				</div>
				
				<div class="logos" id="middle">
				</div>
				
				<div class="logos" id="middle-1">
				</div>
				<div class="logos" id="rigth">	
				</div>
			 </div>
		 </div>
		</center>
		<div class="myclear"></div>
		<div id="footer" class="clearfix">
		
			 <div id="logo_right">                   
			 </div>    
			 <div id="direccion">					
			</div>
			<div id="social">
			  
			</div>
		</div>
		</div>
	</div>

Y la hoja de estilos que le aplico es la siguiente.

Código:

html,
body {
    background: #6e8c45;
	min-height: 100%;
	margin: 0;
	padding: 0;
	width: auto;
}


.myclear {
clear: both;
}

.logos{
	background-position: center;
	width: 128px;
	height: 128px;
	background-image: url(./img/ico2__.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: black;
	vertical-align: middle;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: -0.5px;
	margin: 100px;
	font-style: italic;
	background-repeat: no-repeat;
}
#header, h2.headermain {
color: white;
}
.headermain {
font-weight: bold;
float: left;
}
.logos:hover {
background-image: url(./img/ico3.png);
color: #F93;
cursor: pointer;
background-repeat: no-repeat;
}
#header{
background-image: url(./img/bground.JPG);
height: 141px;
width: 100%;
}
#logo-left{
float: left;
background-image: url(./img/logo.jpg);
height: 137px;
width: 343px;
margin-left: 150px;
}
#titulo{
text-align: left;
float: left;
height: 137px;
width: 600px;
}

#logo-right{
float: right;
background-image: url(./img/iser.jpg);
height: 137px;
width: 247px;
margin-right: 150px;
}
 #group-logos {
    display: table;
 }

  #row{
    display: table-row;
    }

  #left, #right, #middle,#middle-1,.logos {
    display: table-cell;
}

#footer{
background-image: url(./img/inferior.jpg);
height: 120px;
color: #fff;
font-size: 0.9em;
width: 100%;
}
#footer #logo_right {
    background-image: url(./img/contorno.png);
    background-repeat: no-repeat;
    float: left;
    height: 100%;
    margin-top: 10px;
    width: 93px;
	margin-left: 200px;
}
#footer #direccion{
    text-align: left;
    float: left;
	margin-top: 10px;
}
#footer #social{
float: right;
margin-top: 30px;
margin-right: 200px;
text-align: left;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}


#page-wrapper {
    margin: 10px 5%;
   background: none repeat scroll 0 0 #5B7439;
    padding: 5px;
    min-width: 930px; /* fixes minimum page width */
}

#page {
    background: #fff;
    padding: 5px;
    width: auto;
}

Pues el problema que se me presenta que tanto los divs que estan el header y los divs que estan el footer Se mueven al hacer zoom con Ctrl+ me refiero a que se mueven con que si estan alineados 3 Divs al hacer zoom el div a la derecha se baja. Según yo esto se debería arreglar con el segmento de código

Código:

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

Lo que busco es que cuando se haga zoom no se mueva nada y se mantenga todo en su lugar y solo crezca en tamaño. las imagenes y letras. De antemano agradezco su atención.

memoadian · #2 (**permalink**) 20/01/2012, 13:46

Casi todas las webs se descomponen al hacer zoom con ctrl

sobre todo si tu diseño es fluido, por que los divs toman el tamaño en porcentajes de acuerdo a la pantalla.

y en tu caso mezclas fluido con fijo porcentajes y pixeles no se llevan muy bien.

replantea la situación.

Tampico · #3 (**permalink**) 20/01/2012, 14:46

Cita:

Iniciado por memoadian

Casi todas las webs se descomponen al hacer zoom con ctrl

sobre todo si tu diseño es fluido, por que los divs toman el tamaño en porcentajes de acuerdo a la pantalla.

y en tu caso mezclas fluido con fijo porcentajes y pixeles no se llevan muy bien.

replantea la situación.

Esto es una idea de lo que pasa

Tampico · #4 (**permalink**) 21/01/2012, 20:11

Al final encontré aquí la pista

[URL="http://mx.answers.yahoo.com/question/index?qid=20090415151700AAgtbU9"]http://mx.answers.yahoo.com/question/index?qid=20090415151700AAgtbU9[/URL]

Efectivamente El problema de que los divs se muevan al hacer zoom se da por el hecho de que si un div contenedor esta como que el atributo width es 100% y los Divs contenidos indicamos anchos en pixeles se provocara que estos se muevan.

ejemplo sencillo

Código HTML:

<div id="contendor" >
     <div id="contenido-1">
     </div>

     <div id="contenido-2">
     </div>

    <div id ="contenido-3">
    </div>
</div>

Código css

Código:

#contenedor{
width: 100%;
height: 127px;
}

contenido-1{
width: 343px;
height: 127px;
}

contenido-2{
width: 500px;
height: 127px;
}

#contenido-3{
width: 247px;
height: 127px;
}

Solucione mi problema de la siguiente manera

Código css

Código:

#contenedor{
width: 100%;
height: 127px;
}

contenido-1{
width: 30%;
height: 127px;
}

contenido-2{
width: 40%;
height: 127px;
}

#contenido-3{
width: 30%
height: 127px;
}

Tampico · #5 (**permalink**) 21/01/2012, 20:14

Cita:

Iniciado por memoadian

Casi todas las webs se descomponen al hacer zoom con ctrl

sobre todo si tu diseño es fluido, por que los divs toman el tamaño en porcentajes de acuerdo a la pantalla.

y en tu caso mezclas fluido con fijo porcentajes y pixeles no se llevan muy bien.

replantea la situación.

Al principio no entendí, Y perdón pero se me había dado la respuesta. Gracias y pues deje algo de karma. Procurare poner mas atención.