Foros del Web » Creando para Internet » CSS »

Porcentajes en lugar de pixeles

 Estas en el tema de Porcentajes en lugar de pixeles en el foro de CSS en Foros del Web. Hola a todos de nuevo hace nueve días hice un post para pedir ayuda como ya nadie volvió a responder tuve que googlear un poco ...
  #1 (permalink)  
Antiguo 19/08/2011, 09:03
 
Fecha de Ingreso: agosto-2011
Mensajes: 4
Antigüedad: 13 años, 3 meses
Puntos: 0
Pregunta Porcentajes en lugar de pixeles
Hola a todos de nuevo hace nueve días hice un post para pedir ayuda como ya nadie volvió a responder tuve que googlear un poco y encontré algo sobre que había que usar porcentajes en lugar de pixeles.

Con resolución de 1366x768 todo esta bien centrado como verán:


Pero en una resolución de 1024x768 los objetos de la izquierda se mueven aunque los de la derecha se mantiene en su lugar:



He aquí el código fuente:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
</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:49.53%; top:251px;">
<a href="http://" title="Encuentra la sucursal mas cercana a ti" target="_ELSE"><img src="http://i.imgur.com/qFitA.png"/></a>
<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>
<div class="double" style="position:absolute;left:49.53%; top:254px;">
</div>
<!-- Google Map Panel End -->
<!-- Facebook Panel Start -->
<div class="box peek" style="position:absolute; left:49.53%; 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:49.53%; top:92px;">
</div>
<!-- Facebook Panel End -->
<!-- Mail Panel Start -->
<div class="box peek" style="position:absolute; left:26.35%; 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:26.35%; top:92px;">
</div>
<!-- Mail Panel End -->
<!-- Twitter Panel Start -->
<div class="box peek" style="position:absolute; left:26.35%; top:251px;">
<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:26.35%; top:251px;">
</div>
<!-- Twitter Panel End -->
</body>
</html>
  #2 (permalink)  
Antiguo 19/08/2011, 09:13
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 107
Antigüedad: 14 años, 3 meses
Puntos: 3
Respuesta: Porcentajes en lugar de pixeles
Hola, creo que tendrías que usar min-width en el contenedor. Para que así, si bien se adapte a la resolución de pantalla, no se achique tanto que no te permita ver el contenido correctamente.

ejemplo:
Código CSS: 
Ver original
  1. min-width:100px;
  #3 (permalink)  
Antiguo 19/08/2011, 11:00
 
Fecha de Ingreso: agosto-2011
Mensajes: 4
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Porcentajes en lugar de pixeles
Mas o menos así no??? (perdón es que no llevo mucho en esto de diseño de web llevo como dos semanas a lo mucho de haber empezado en esto.)
Código CSS: 
Ver original
  1. body
  2. {
  3. background-image:url('http://fc02.deviantart.net/fs71/f/2010/173/b/0/iOS_fiber_Texture_by_reddevilsX.png');
  4. }
  5. *{ padding:0px; margin:0px; }
  6. a{ color:#000000; }
  7. .box{ 
  8.         
  9.         width: 305px; 
  10.         height: 150px; 
  11.         margin:10px; 
  12.         float:left; 
  13.         overflow: hidden;
  14.     }
  15. .double{ 
  16.        
  17.         width: 150px; 
  18.         height: 150px; 
  19.         margin-top:10px; 
  20.         float:left; 
  21.         overflow: hidden; 
  22.     }
  23. .box img{  
  24.             position: absolute; 
  25.             top: 0; 
  26.             left: 0; 
  27.             border: 0; 
  28.         }
  29. .container {
  30.      min-width:100px;
  31.       width: 640px;
  32.       margin: 290px auto;
  33.       text-align: left;
  34.     }
  35.     .tab-nav {
  36.       width: 640px;
  37.       overflow: hidden;
  38.     }
  39.     .tab-nav ul {
  40.       position: relative;
  41.       float: left; 
  42.       width: 1600px;
  43.       margin-left: 535px; 
  44.       padding-left: 0;
  45.       list-style-type: none;
  46.     }
  47.     .tab-nav li { 
  48.       float: left;
  49.       clear: left; 
  50.     }
  51.  
  52.     .tab-nav a {
  53.       display: block;
  54.       float: left;
  55.       text-align: center;
  56.       text-decoration: none;
  57.     }
  58. /* second level */
  59.     .tab-nav ul ul { float: left; width: auto; margin-left: 0;}
  60.     .tab-nav li li {clear: none;}
  61.     .tab-nav li li a { width: 100px; background-image: none;}

Etiquetas: chrome, html, lugar, porcentajes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:11.