Amigo, tengo la solucion a tu problema, es lo que te explique con anterioridad, en principio te diria que dejes de usar % y empieces a usar pixeles, usar % esta buenisimo, pero hay que saber utilizarlos, yo no lo se hacer todavìa, en algun momento aprendere.
Aca va la solucion:
Tus divs se mueven todos porque no estan contenidos, estan sueltos en la pagina y cuando cambias la resolucion se mueven, la solucion es hacer lo siguiente, a todo tu codigo html colocalo dentro de un div, llamado wrapper por ejemplo.
o sea :
<html>
<body>
<div id="wrapper">
<aca esta todo tu codigo html>
</div>
</body>
</html>
En el css pones:
#wrapper{
width: 1000px;
margin: 0 auto;
position: relative;
}
Despues de esto vas a ver que cuando cambies de resolucion los divs no se te mueven.
OK, primer problema solucionado, siempre trata de que tus cajas esten contenidas y no sueltas o tiradas en el body.
Segundo problema, se ve lindo en Firefox, en Explorer no se ve nada, para que los divs no se te corran de lugar el procedimiento es el mismo tanto en explorer como en Firefox, lo que sugiero es que empieces nuevamento todo tu diseño, siguinedo esta premisa, posiciones fijas (px) no %, (repito, usar % es lo mas, pero hay que saber usarlos, sino son peligrosos), utiliza un contenedor para toda tu pagina con position: relative y luego dentro de este contenedor anda colocando los diferentes div, ya sea head, menu, contenidos, columnas, footer, y ando posicionandolos de manera que se vaen bien en ambos navegadores, espero haberte ayudado, si esto no te sirve es porque me explique mal, asi que vuelve a comentar y veo como hacemos.
Te paso el codigo html, fijate que solo agregue un div, el wrapper.:
Código:
<html>
<head>
<!-- Llamar css */ -->
<link rel="stylesheet" href="css.css" type="text/css" media="all">
</head>
<body>
<!-- No borrar*/ -->
<div id="wrapper">
<div id="head" onclick="location.href='http://www.asdf.com/'">
<p>Tte<br>
</p>
</div>
<div id="menu">
<ul>
<li><a href='empresa.htm'>EMPRESA</a></li>
<li><a href='historia.htm'>HISTORIA</a></li>
<li><a href='personal.htm'>PERSONAL</a></li>
<li><a href='formacion.htm'>FORMACION</a></li>
<li><a href='servicios.htm'>SERVICIOS</a></li>
<li><a href='contacto.htm'>CONTACTO</a></li>
</ul>
</div>
<div id="contenido">
<div id="titulo">
<h1>bababaA</h1>
</div>
<div id="content">
a
</div>
</div>
<div id="pie">
<p>
a<br>
</p>
</div>
</div>
</body>
</html>
Te paso el codigo css, tambien fijate que solo te agregue el wrapper, miralo en firefox, en explorer tampoco se mueve mas, pero se ve muy feo, eso porque esta mal maquetado todo, pero eso es otro tema:
Código:
body {
background-color: #91aefe;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
margin: 0px;
}
#contenedor{
text-align:left; /* Esto te sirve para IE*/
width: 780px 1000px; /* Aqui pones la resoluciones que quieres trabajar, es decir si deseas hacerlo global, deberias dejarlo en mil o al menos 960, si deseas que tabien se vean en 800x600 deberias ponerle entonces 780 o 760, eso es a tu criterio*/
margin: 0px auto; /* esto es muy importante, deberias agregarle el 0 antes del auto para que IE6 lo tome sino no sabe que hacer y a veces falla, pero en general lo uso solamente asi, esto indica que 0 para IE debe ser el margen general, y que auto le diga a los navegadores nuevos sobretodo FF que hay un margen automatico pero absoluto, deberias de poner un reset o bien ponerle margin;0; a la etiqueta body */
}
#wrapper{
border:1px solid red;
position:relative;
width:1000px;
margin:0 auto;}
/* Cabecera */
#head {
margin:0%;
margin-top:0%;
background-image: url("../files/head.jpg");
background-position: left;
background-repeat: no-repeat;
height: 140px;
width: 100%;
}
#head p {
text-align: center;
color: #fff;
font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: oblique;
padding-top: 40px;
padding-left: 400px;
margin-top: 0%;
position:relative;
}
/* Menu*/
#menu {
float:left;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
background-image: url("../files/menu.jpg");
background-repeat: no-repeat;
height: 40px;
position:relative;
border:1px solid green;
}
#menu ul, li { list-style-type: none;
}
#menu ul
{ width:auto;
margin:auto;
}
#menu li {
display:inline;
position:relative;
}
/* separacio entre boto
#menu li+li a {
border-left: 1px solid #FFF;
}
*/
#menu a {
color: #fff;
text-decoration: none;
text-align: left;
width: 0%;
margin-left: 130px;
margin-right: 0%;
float: left;
padding: 7px;
padding-right: 0%;
display: block;
outline:none;
cursor:pointer;
}
#menu a:hover { /* background: #FFFFFF; fondo cuadro*/
color:#000000;
}
/*Contenido*/
#contenido { border: 3px solid #FF0000;
width: 65%;
height: 65%;
margin-top:40px;
margin-left: 180px;
margin-bottom: 20px;
float: left;
position: relative;
}
#titulo{
width: 100%;
height: auto;
}
#titulo h1 {
color: #660000;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
#content{
width: 100%;
height: auto;
padding-top: 0px;
}
#content p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
/*Pie*/
#pie {
width: 100%;
background-image: url("../files/pie.jpg");
background-repeat: no-repeat;
height: 80px;
margin-top: 0%;
clear: both;
padding: 1px;
position: relative;
padding-bottom: 0%
}
#pie p {
text-align: center;
color: #fff;
font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
margin-bottom: 0%;
espero tus comentarios, a ver si te sirvio de algo todo esto. Saludos.-