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:
<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>
#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%);
Proba agregando esto:
html, body {padding:0; margin0}
#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
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:
probaste esto?:
body{
width:100%;
...
..
.
}
#header{
width:100%;
...
..
.
}
xD yo no tengo problemas de esta manera, saludos.
Recuerda ademas que tienes un margin-right:5px; en el header.
Saludos