@caricatos: Probe lo que me dices pero me manda los cuadros a la esquina superior izquierda.
@dukeblass: También probé lo que me sugeriste pero aun así se siguen moviendo los cuadros al cambiar de resolución.
Por si aun no entienden a lo que me refiero.
Esto es lo que busco:
Y esto es lo que quiero evitar cuando se aumente la resolución o se haga zoom: (zoom en este caso)
Ahora como les decía creo que seria que mejor modificasen el codigo fuente para agilizar las cosas.
Código HTML:
<!DOCTYPE html>
</html><head>
<!-- The Title of the Website -->
<title>Inicio - Nacional Ferretera de Hidalgo S.A. de C.V.</title>
<!-- The Style Sheet -->
<link href="http://f.cl.ly/items/3k2t2o1Z1T1f0t0s2b0m/ios%20obscuro.css" rel="stylesheet" type="text/css"/>
<!-- The Favicon -->
<link href="http://cl.ly/2r2F0A2o2y143S0d0k2D/favicon_2.ico" rel="shortcut icon" type="image/ico" />
<!-- Required Jquery Engines --><script src="http://f.cl.ly/items/2t451J182k292A3U0R2g/jquery.js" type="text/javascript"></script><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script><!-- Sliding Panel Code --><script type="text/javascript" src="http://f.cl.ly/items/1w1V1W0E0P0f0x2A3v3F/slider.js"></script><!-- Sliding Start Button Code --><script src="http://f.cl.ly/items/1M0u042z1u13293u1c3E/menu.js" type="text/javascript"></script><!-- Meta Data for Windows 7 Pinning Feature -->
<!-- This should be the Name of your Site. -->
<meta content="Metro" name="8 Start" />
<!-- This should point to the directory where this site is, otherwise known as your main directory. -->
<meta content="#" name="msapplication-starturl" />
<!-- This should be your content description for you site. -->
<meta content="Pagina principal de Nacional Ferretera de Hidalgo S.A. de C.V." name="msapplication-tooltip" />
</head>
<body> <div align="center"><img src="http://i.imgur.com/W2nHn.png" width="700" height="120" align="bottom"></div>
<!-- This is the Start Menu. -->
<div class="container">
<div id="tab-nav-1" class="tab-nav">
<ul>
<li>
<!-- This is the actual Start Button. -->
<a href="#" title="Has clic aqui para expandir el menu"><img src="http://i.imgur.com/beg4Y.png" border="0"></a>
<ul>
<ul>
<!-- These are Start Menu Items. -->
<li>
<a href="" title="Informate sobre nosotros y a que nos dedicamos" target="_ELSE"><img border="0" src="http://i.imgur.com/7yMVP.png" /></a></li>
<li>
<a href="" title="Revisa nuestro catalogo seguro encontraras lo que necesitas"target="_ELSE"><img border="0" src="http://i.imgur.com/jFb3I.png" /></a></li>
<li>
<a href="http://www.google.com/chrome" title="La pagina se ve mejor con el navegador Google Chrome compruebalo"target="_ELSE"><img border="0" src="http://platform.ak.fbcdn.net/www/app_full_proxy.php?app=45439413586&v=1&size=z&cksum=2ef2373519d6b824b71d2faa7308ffb7&src=http%3A%2F%2Fwww.thechromesource.com%2Fwp-content%2Fuploads%2F2011%2F07%2FNew-Chrome-Icon-300x300.png" /></a></li>
</ul>
</li>
</ul>
</div>
</div>
<br />
<!-- Google Map Panel End -->
<div class="box peek" style="position:absolute; left:352px; top:254px;">
<!-- The Exposed Panel Code -->
<a href="http://" title="Encuentra la sucursal mas cercana a ti" target="_ELSE"><img src="http://i.imgur.com/qFitA.png"/></a>
<!-- The Covered Panel Code -->
<a href="http://" title="Encuentra la sucursal mas cerca a ti" target="_ELSE"><img class="cover" src="http://i.imgur.com/Rum20.png"/></a></div>
<!-- The Seperate Cover Code -->
<div class="double" style="position:absolute; left:351px; top:254px;">
</div>
<!-- Google Map Panel End -->
<!-- Facebook Panel Start -->
<div class="box peek" style="position:absolute; left:671px; top:92px;">
<a href="http://facebook.com" title="Danoabs un me gusta en Facebook" target="_ELSE"><img src="http://i.imgur.com/Kq3Ez.png"/></a>
<a href="http://facebook.com" title="Dale me gusta en Facebook" target="_ELSE"><img class="cover" src="http://i.imgur.com/FHBto.png"/></a></div>
<div class="double" style="position:absolute; left:671px; top:92px;">
</div>
<!-- Facebook Panel End -->
<!-- Mail Panel Start -->
<div class="box peek" style="position:absolute; left:352px; top:92px;">
<a href="mailto:[email protected]" title="Para pedidos, preguntas, dudas y/o comentarios envianos un e-mail"><img src="http://i.imgur.com/4Rpjr.png"/></a>
<a href="mailto:[email protected]" title="Para pedidos, preguntas, dudas y/o comentarios envianos un e-mail"><img class="cover" src="http://i.imgur.com/6wmNd.png"/></a></div>
<div class="double" style="position:absolute; left:351px; top:92px;">
</div>
<!-- Mail Panel End -->
<!-- Twitter Panel Start -->
<div class="box peek" style="position:absolute; left:671px; top:254px;">
<a href="http://twitter.com" title="Siguenos en Twitter" target="_ELSE"><img src="http://i.imgur.com/Lu0ap.png"/></a>
<a href="http://twitter.com" title="Siguenos en Twitter" target="_ELSE"><img class="cover" src="http://i.imgur.com/7IIKO.png"/></a></div>
<div class="double" style="position:absolute; left:671px; top:254px;">
</div>
<!-- Twitter Panel End -->
<div style="position:absolute; left:470px; top:800px;"><font size="1" face="Arial, Helvetica, sans-serif">Todos
los derechos reservados © 2011, Nacional Ferretera de Hidalgo, S.A. de C.V. </font></div>
<div id="footer" width="100%" height="10%">
</body>
</html>