Algunos problemas

Jamess0000 · #1 (**permalink**) 09/08/2011, 18:34

Hola a todos en este mi primer post en el foro he venido a pedir ayuda lo que quiero es hacer que todos los objetos se mantengan centrados sin importar la resolución para practicidad dejo el [URL="http://download1472.mediafire.com/uypjoqot8hwg/d38bdbmn8lmpzb8/prueba2.html"]archivo[/URL] html (el css esta en el código fuente) para que algún alma caritativa lo pueda modificar para ayudarme con este problema también aprovecho para que me ayuden con otro problema no tan importante pero que igual me ha dado dolores de cabeza y es que por alguna extraña razón la pagina deja mucho espacio en la parte baja de la misma (no tiene nada que ver con la leyenda de derechos de autor de hecho la puse ahí para que no se viera tan vació ese espacio) igual cualquier modificación al código fuente de la pagina que crean que sea necesaria y mejore el rendimiento de la misma sera bien recibido de antemano gracias.

caricatos · #2 (**permalink**) 09/08/2011, 19:11

Hola:

Hemos movido el tema al foro css,,, sobre la pregunta:para los elementos inline el centrado se hace con el estilo text-align (center); y para los bloques margin: auto; por las dudas de que no lo notes; asegúrate de poner en la página el doctype.

Saludos

dukeblass · #3 (**permalink**) 10/08/2011, 14:10

estas muy entremezclado ese código, te recomiendo que uses javascript, que calcules el tamaño de la ventana y lo restes al tamaño que ocupan los divs de clase box y el resultado es el margen izquierdo, lo insertar y listo.
con css seria asi
width:700px; margin:0 auto;
para el contenedor padre pero las imágenes tienes posición absoluta (por javascript) y ello viola lo anterior
por ende te recomiendo javascript

Jamess0000 · #4 (**permalink**) 10/08/2011, 19:37

@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 &copy; 2011, Nacional Ferretera de Hidalgo, S.A. de C.V. </font></div>
     <div id="footer" width="100%" height="10%">


        
</body>
</html>