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

 

 


Tema destacado: Introducción a Git (Primera 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 1,787 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.255


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 818 Ú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 4,119 Ú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 7,071 Último mensaje 7 Enero 2011, 04:56 am
por flacc
Ayuda google chroome tamaño de ventana
Software
Senior++ 0 329 Último mensaje 4 Octubre 2013, 21:23 pm
por Senior++
Tamaño ventana
Desarrollo Web
jalbtercero 0 981 Último mensaje 21 Mayo 2016, 12:04 pm
por jalbtercero
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines