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.