elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Ayuda] Problema con tamaño de ventana (posicionamiento css)		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Ayuda] Problema con tamaño de ventana (posicionamiento css)  (Leído 3,229 veces)
Funebrer0

Desconectado Desconectado

Mensajes: 13


Ver Perfil
[Ayuda] Problema con tamaño de ventana (posicionamiento css)
« 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.  
« Última modificación: 21 Julio 2015, 15:19 pm por #!drvy » En línea
DarK_FirefoX


Desconectado Desconectado

Mensajes: 1.263


Be the change you wanna see in te world


Ver Perfil
Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
« Respuesta #1 en: 17 Julio 2015, 16:27 pm »
¿Podrías poner una imagen de que es lo que pasa cuando redimensionas el navegador?

Salu2s
En línea
Funebrer0

Desconectado Desconectado

Mensajes: 13


Ver Perfil
Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
« Respuesta #2 en: 18 Julio 2015, 18:17 pm »
Ahí agregue una imagen.
En línea
$pedrojo2704

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
« Respuesta #3 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

Espero que te sirva de ayuda.

Saludos!
En línea
Funebrer0

Desconectado Desconectado

Mensajes: 13


Ver Perfil
Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
« Respuesta #4 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?
En línea
$pedrojo2704

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re:
« Respuesta #5 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
En línea
reprogramacion

Desconectado Desconectado

Mensajes: 3


A programar se aprende programando


Ver Perfil WWW
Re: [Ayuda] Problema con tamaño de ventana (posicionamiento css)
« Respuesta #6 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 "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.
« Última modificación: 27 Julio 2015, 11:47 am por reprogramacion » En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
2 preg... Apagar monitor y cambiar tamaño ventana
Programación Visual Basic 		Fr4NN^ 2 1,546 Último mensaje 9 Enero 2008, 03:18 am
por Fr4NN^
Como adaptar la GUI al tamaño de la ventana?
.NET (C#, VB.NET, ASP) 		Skeletron 7 5,400 Último mensaje 10 Octubre 2009, 01:06 am
por seba123neo
¿crear una ventana popup de tamaño automático?[resuelto, código incluido]
Desarrollo Web 		flacc 5 8,606 Último mensaje 7 Enero 2011, 04:56 am
por flacc
Ayuda google chroome tamaño de ventana
Software 		Senior++ 0 1,229 Último mensaje 4 Octubre 2013, 21:23 pm
por Senior++
Tamaño ventana
Desarrollo Web 		jalbtercero 0 2,026 Último mensaje 21 Mayo 2016, 12:04 pm
por jalbtercero
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines