Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Ketchuz en 5 Junio 2012, 00:21 am



Título: Ajustar barra a todo el ancho de pantalla
Publicado por: Ketchuz 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%);


Título: Re: Ajustar barra a todo el ancho de pantalla
Publicado por: [u]nsigned 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


Título: Re: Ajustar barra a todo el ancho de pantalla
Publicado por: Ketchuz 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:


Título: Re: Ajustar barra a todo el ancho de pantalla
Publicado por: darkvidhack 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.


Título: Re: Ajustar barra a todo el ancho de pantalla
Publicado por: #!drvy en 18 Junio 2012, 00:55 am
Recuerda ademas que tienes un margin-right:5px; en el header.


Saludos