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

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ajustar barra a todo el ancho de pantalla
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ajustar barra a todo el ancho de pantalla  (Leído 5,073 veces)
Ketchuz

Desconectado Desconectado

Mensajes: 31



Ver Perfil
Ajustar barra a todo el ancho de pantalla
« en: 5 Junio 2012, 00:21 am »

Hola compañeros.
Necesito su ayuda, por favor, espero que me ayuden.
Estoy creando un sitio estilo iPhone. Todo va bien, menos la barra superior, que en vez de rellenar todo el ancho de la pantalla, se ajusta al contenido y se queda corto para la pantalla.
Lo que necesito es que la barra ocupe todo el ancho de pantalla. Por favor necesito su ayuda, he tratado modificando el display:table-cell por otros y no resulta.
Gracias de antemano, y aquí está el código:
Código:
	<body>
<section id="button-menu">
<a href="javascript:abrir();"><img src="http://static.ak.fbcdn.net/rsrc.php/v2/y8/r/NwLTcDwF0zP.png" alt="=" title="Menú"></a>
</section>
<section id="header">
PÁGINA DE INICIO
</section>
Código:
#header {
display:table-cell;
background: url('http://k43.kn3.net/FF986C321.png') repeat-x top #6D84A2;
text-align:center;
padding:0.5em;
vertical-align:middle;
font-family: Myriad Pro, sans-serif;
font-weight:bold;
font-size: 1.2em;
color:#fff;
border-bottom:#fff 1px inset;
margin-right:5px;
background-image: linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);
background-image: -o-linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);
background-image: -moz-linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);
background-image: -webkit-linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);
background-image: -ms-linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);
}
#button-menu {
display:table-cell;
background: url('http://k43.kn3.net/FF986C321.png') repeat-x top #6D84A2;
vertical-align:middle;
text-align:center;
padding:0.2em;
border-right:#fff 1px inset;
border-bottom:#fff 1px inset;
background-image: linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);
background-image: -o-linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);
background-image: -moz-linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);
background-image: -webkit-linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);
background-image: -ms-linear-gradient(bottom, #6D84A2 47%, #B0BCCD 85%);


En línea

No robes, el gobierno odia la competencia
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Ajustar barra a todo el ancho de pantalla
« Respuesta #1 en: 5 Junio 2012, 15:51 pm »

Proba agregando esto:

Código
  1. html, body {padding:0; margin0}
  2.  
  3. #header {width:100%; padding:0}

Es decir, primero quetenes que eliminar el padding y el margin del body. Y luego tenes qeu poner el ancho en 100% para el #header. Tambien deberias dejarle el padding en 0 (al menos el de izq y derecha) asi ocupara todo el ancho.

Saludos


En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Ketchuz

Desconectado Desconectado

Mensajes: 31



Ver Perfil
Re: Ajustar barra a todo el ancho de pantalla
« Respuesta #2 en: 5 Junio 2012, 18:28 pm »

Gracias @El As del Club Paris, pero el código y la sugerencia que me diste no funcionaron  :-\ . La barra sigue sin extenderse a toda la pantalla. Creo que es porque está el display:table-cell; pero si lo quito hereda el display:block; y se ve peor.
¿Alguna otra idea?  :huh:
En línea

No robes, el gobierno odia la competencia
darkvidhack

Desconectado Desconectado

Mensajes: 159


Be Linux my friend...


Ver Perfil WWW
Re: Ajustar barra a todo el ancho de pantalla
« Respuesta #3 en: 18 Junio 2012, 00:23 am »

probaste esto?:

Código
  1. body{
  2.     width:100%;
  3. ...
  4. ..
  5. .
  6. }
  7.  
  8. #header{
  9.     width:100%;
  10. ...
  11. ..
  12. .
  13. }

xD yo no tengo problemas de esta manera, saludos.
En línea

live and let die

la duda es la base de todo conocimiento
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Ajustar barra a todo el ancho de pantalla
« Respuesta #4 en: 18 Junio 2012, 00:55 am »

Recuerda ademas que tienes un margin-right:5px; en el header.


Saludos
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ajustar a distintas resoluciones de pantalla ?
Programación Visual Basic
Urbe Tecnologica 6 15,023 Último mensaje 3 Enero 2010, 22:50 pm
por MCKSys Argentina
ajustar canvas dentro de un div dependiendo de la resolucion de pantalla
Desarrollo Web
OssoH 2 6,016 Último mensaje 10 Abril 2012, 16:59 pm
por OssoH
ajustar a lo ancho un texto dentro de un div. css [SOLUCIONADO]
Desarrollo Web
OssoH 8 53,835 Último mensaje 15 Abril 2012, 21:46 pm
por OssoH
Ajustar fondo en pantalla
Desarrollo Web
eugeniocol 3 2,570 Último mensaje 24 Febrero 2017, 20:31 pm
por eugeniocol
ajustar texto a pantalla completa. font-size 100%
Desarrollo Web
OssoH 0 2,835 Último mensaje 6 Noviembre 2020, 16:53 pm
por OssoH
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines