Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: RaloGomez en 16 Noviembre 2016, 23:42 pm


Título: Divs se descolocan al hacer zoom
Publicado por: RaloGomez en 16 Noviembre 2016, 23:42 pm
Aclarar que hará un año que no toco nada de css ni de html perdón por mi falta de conocimientos.

Bien el tema es que estoy haciendo una web muy simple que me han encargado, solo consta de la página principal con un reproductor. El problema es, que al hacer zoom (-) se me descolocan los divs. Creía que esto se solucionaba cambiando el tamaño de estos, es decir en vez de ponerlo en píxeles cambiarlo por pocentaje. Lo he probado y sigue sin dar efecto.

¿Tendría que cambiar todo el codigo de px a porcentaje, o solo al container que es el que engloba y el que no me interesa que se mueva?


Perdón se que me explico fatal, dejo el codigo por si no es ese mi fallo :

 
Código
  1. body{
  2. 	background-image:url("../img/fondo.jpg");
  3. 	background-repeat:no-repeat;
  4. 	background-size:1920px 1000px;
  5. 	font-family:Arial;
  6.  
  7. }
  8. /*-----------container----------*/
  9. #container{
  10. 	position:relative;
  11. 	margin:0 auto;
  12. 	width:1024px;
  13. 	height:768px;
  14. 	background-color:black;
  15. 	border:10px solid white;
  16. 	border-radius: 15px 15px 30px;
  17. 	margin-top:50px;
  18.  
  19. }
  20.  
  21.  
  22. /*-----------main----------*/
  23. #main{
  24. 	width:1024px;
  25. 	height:718px;
  26. 	float:right;
  27. 	font-size:13px;
  28.  
  29. }
  30.  
  31. /*-----------footer----------*/
  32. #footer{
  33. 	height:50px;
  34. 	width:1024px;
  35. 	float:left;
  36. 	background-color: white;
  37.  
  38.  
  39. }
  40. #footer p{
  41. 	font-family:Arial;
  42. 	font-weight:bold;
  43. 	text-align:center;
  44. }
  45. #video{
  46. 	width:1024px;
  47. 	height:718px;
  48. }

Título: Re: Divs se descolocan al hacer zoom
Publicado por: matake en 18 Noviembre 2016, 23:38 pm
No has puesto el html ( como tienes los divs en html )

Yo he probado con esto + tus estilos:
Código
  2.   <div id="container">
  3.     <div id="main">
  4.       <div id="video">			
  5.       </div>	
  6.     </div>
  7.     <div id="footer">
  8.     </div>
  9.   </div>
  10. </body>
  11.  

Y al hacer zoom (-) ... no se descoloca nada ( he probado en chrome , IE11 , edge, Firefox, Opera , Safari )


De manera que lo he puesto yo, no veo sentido para los float:left y float:right en tu css.

A no ser que lo tienes ordenados de otra manera

Título: Re: Divs se descolocan al hacer zoom
Publicado por: Patrick Bateman en 23 Noviembre 2016, 12:16 pm
Así sin mas datos es difícil averiguar cual es el problema. Pero de primeras si a ahcer zoom te refieres a modificar el tamaño de la ventana, el problema debe ser que alguno de los elementos no varía las proporciones y es por eso que se recoloca.

Si el contenedor de los elementos varía, todo debe variar en la misma proporción para seguir igual.

Si nada varía su tamaño en píxeles, entonces el problema esta en que es el screen size quien varía sus proporciones y entonces tendrías que usar media queries.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines