Foros del Web » Creando para Internet » CSS »

Crear un header perfecto y adaptable

Estas en el tema de Crear un header perfecto y adaptable en el foro de CSS en Foros del Web. Hola, quiero posteriormente usar resposive web o lo que yo entiendo por "responsive web" jaja usar las media @querry. Así que supongo que el header ...
  #1 (permalink)  
Antiguo 30/03/2016, 11:20
ilu7ionHD
Invitado
 
Mensajes: n/a
Puntos:
Crear un header perfecto y adaptable

Hola, quiero posteriormente usar resposive web o lo que yo entiendo por "responsive web" jaja usar las media @querry.

Así que supongo que el header tiene tiene que ser en porcentajes.
¿Como hago un header que ocupe el 15% total de la pantalla, y 100% con respecto al largo, que sea de color tengo, que adentro a la izquierda incluya un logo con fondo transaparete (.png) y a la derecha tenga <li> que usare como links a otras páginas. Esto lo quiero crear una vez sola y luego por cada página PHP usar include

Saludos
  #2 (permalink)  
Antiguo 30/03/2016, 13:33
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 9 años, 8 meses
Puntos: 26
Respuesta: Crear un header perfecto y adaptable

para solucionar el alto del header solo asignale un height:15vh y width:100% no hay mayor dificultad y ya dentro de header colocas tu logo y los li.

saludos!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #3 (permalink)  
Antiguo 30/03/2016, 17:17
ilu7ionHD
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Crear un header perfecto y adaptable

porque vh y no % ?
  #4 (permalink)  
Antiguo 30/03/2016, 18:24
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 9 años, 8 meses
Puntos: 26
Respuesta: Crear un header perfecto y adaptable

https://jsfiddle.net/twzcfqee/
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #5 (permalink)  
Antiguo 31/03/2016, 04:01
ilu7ionHD
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Crear un header perfecto y adaptable

Entiendo! Muchas gracias!.
Lo que no entiendo es porque no toma el 15% de la pantalla, como funciona? en que se basa para ese 15%
  #6 (permalink)  
Antiguo 31/03/2016, 09:54
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 9 años, 8 meses
Puntos: 26
Respuesta: Crear un header perfecto y adaptable

[SegúnYo]
Porque así como esta estructurado el código ¿en base al alto de qué tomará un 15%? en todo caso sería del alto del body, pero el body que alto tiene? tal parece que es el alto del contenido, veamos este ejemplo, si hay un div que lo contiene y este sí tiene un alto definido si funciona poner un alto en porcentaje.
https://jsfiddle.net/twzcfqee/1/
[/SegúnYo]

Antes eso de definir un alto al 100% o 50% de la pantalla se hacia con jquery y el vh vino a salvar muchas vidas!!
Compatibilidad:
http://caniuse.com/#feat=viewport-units

Saludos!!!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #7 (permalink)  
Antiguo 31/03/2016, 12:29
ilu7ionHD
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Crear un header perfecto y adaptable

Hola! muy muy pero muy claro!.
Muchas gracias
  #8 (permalink)  
Antiguo 31/03/2016, 14:46
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 11 años, 4 meses
Puntos: 44
Respuesta: Crear un header perfecto y adaptable

También lo puedes hacer usando %, pero primero tienes que decirle al html y body que tomen todo el alto.
Código CSS:
Ver original
  1. html, body {
  2.     height:100%;
  3. }

Saludos!
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #9 (permalink)  
Antiguo 31/03/2016, 16:06
ilu7ionHD
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Crear un header perfecto y adaptable

Serìa asì?

Código CSS:
Ver original
  1. html, body {
  2.     height:100%;
  3.     width:100%;
  4. }

Etiquetas: adaptable, color, header, perfecto
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




La zona horaria es GMT -6. Ahora son las 12:36.