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)
| | |-+  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 4,164 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.809



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:  

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