Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Funebrer0 en 17 Julio 2015, 15:22 pm


Título: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
Publicado por: Funebrer0 en 17 Julio 2015, 15:22 pm
Buenos días, estoy viendo algo de html/css para la facultad y resulta que ando complicado en el tema del posicionamiento. Estoy haciendo un encabezado con un menú simple y unas imágenes y si tengo el navegador en pantalla completa se ve bien, pero si modifico el tamaño de la pantalla se empieza a ver mal. Supongo que estoy posicionando mal. Les dejo el código y espero me puedan dar una mano.
Saludos!

HTML:
Código
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<link rel="stylesheet" href="css/styles.css">
  6. 		<title>Inicio</title>
  7. 	</head>
  8. 	<body>
  9. 		<header>
  10. 			<ul>
  11. 				<li><a href="#">Inicio</a></li>
  12. 				<li><a href="#">Categorias</a></li>
  13. 				<li><a href="#">Contacto</a></li>
  14. 			</ul>
  15. 			<a href="#"><img src="img/fb.png" alt="" class="imhead"></a>
  16. 			<a href="#"><img src="img/tw.png" alt="" class="imhead"></a>
  17. 		</header>
  18. 	</body>
  19. </html>
  20.  

CSS:
Código
  1. *{
  2. 	margin: 0;
  3. 	padding: 0;
  4. }
  5.  
  6. body{
  7. 	background-color: rgb(205,205,205);
  8. }
  9.  
  10. ul{
  11. 	list-style-type: none;
  12. }
  13.  
  14. a{
  15. 	text-decoration: none;
  16. }
  17.  
  18. header{
  19. 	background-color: rgb(47,159,203);
  20. 	width: 100%;
  21. 	border-bottom: 1px solid rgb(68,68,68);
  22. 	position: fixed;
  23. 	height: 40px;
  24. }
  25.  
  26. header ul{
  27. 	text-align: center;
  28. }
  29.  
  30. header ul li{
  31. 	padding: 10px;
  32. 	display: inline-block;
  33. 	margin-right: 10px;
  34. 	margin-left: 10px;
  35. }
  36.  
  37. header ul li:hover{
  38. 	-webkit-transition: background .4s ease-out;
  39. 	-moz-transition: background .2s ease-out;
  40. 	-ms-transition: background .2s ease-out;
  41. 	-o-transition: background .2s ease-out;
  42. 	background-color: rgb(58,58,58);
  43. 	border-radius: 2px;
  44. }
  45.  
  46. header ul li a{
  47. 	color: #FFF;
  48. 	font-family: Verdana;
  49. }
  50.  
  51. header a img{
  52. 	width: 30px;
  53. 	position: relative;
  54. 	left: 96.5%;
  55. 	top: -35px;
  56. }
  57.  

(http://i59.tinypic.com/qyfp0k.jpg)

Título: Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
Publicado por: DarK_FirefoX en 17 Julio 2015, 16:27 pm
¿Podrías poner una imagen de que es lo que pasa cuando redimensionas el navegador?

Salu2s

Título: Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
Publicado por: Funebrer0 en 18 Julio 2015, 18:17 pm
Ahí agregue una imagen.

Título: Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
Publicado por: $pedrojo2704 en 18 Julio 2015, 22:34 pm
Ocurre porque el diseño CSS actúa sobre cualquier tamaño de pantalla. En tu caso lo has diseñado para una pantalla grande y al hacer la pantalla más pequeña, el CSS sigue actuando igual y por eso se descoloca cada elemento.

Para solucionar eso deberías hacer un diseño "responsive" (o adaptativo) para que, cuando se utilice un tamaño de pantalla grande (por ejemplo al utilizar un monitor) se ejecute una parte del CSS y cuando se utilice un tamaño de pantalla pequeño (por ejemplo, un Smartphone) se ejecute otra parte de CSS, adaptando así los distintos elementos a los diferentes tamaños.

El uso de este tipo de diseño es bastante sencillo de utilizar, aunque habrá que utilizar más líneas de código. Para hacerlo, te recomiendo utilizar el "media" del CSS. Te dejo este link donde se explica con ejemplos su funcionamiento: https://developer.mozilla.org/es/docs/CSS/Media_queries (https://developer.mozilla.org/es/docs/CSS/Media_queries)

Espero que te sirva de ayuda.

Saludos!

Título: Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
Publicado por: Funebrer0 en 19 Julio 2015, 17:29 pm
Gracias! La voy a hacer responsive entonces. Me recomendas que lo haga con bootstrap? O que primero aprenda a hacerlo por mi cuenta sin frameworks?

Título: Re:
Publicado por: $pedrojo2704 en 20 Julio 2015, 02:40 am
Si tienes poco tiempo para hacerlo, utiliza Bootstrap, será rápido y sencillo, pero si tienes todo el tiempo que quieras, entonces aprende a hacerlo desde cero, nunca está mal saber hacerlo, además, siempre tendrás tiempo de utilizar Frameworks más adelante para ahorrar trabajo ;)

Enviado desde mi Nexus 5 mediante Tapatalk

Título: Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
Publicado por: reprogramacion en 22 Julio 2015, 10:37 am
Si tienes tiempo yo también te recomiendo aprender primero las técnicas básicas del Responsive Web Design (http://www.campusmvp.es/catalogo/Product-Responsive-Web-Design_212.aspx) "a pelo". Si te metes directamente con Boostrap llegarás antes al resultado final, pero no sabrás por qué.

Por cierto, si te vas a iniciar en el diseño responsive  te recomiendo leer la traducción del artículo original de Ethan Marcotte (A List Apart) que, digamos, fue el que bautizó esta técnica (http://xn--diseowebresponsive-q0b.org/).


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