Ajustar barra a todo el ancho de pantalla

Ketchuz · 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 [Seleccionar]


	<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 [Seleccionar]


#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%);

[u]nsigned · 5 Junio 2012, 15:51 PM

Proba agregando esto:

Código (css) [Seleccionar]

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

Ketchuz · 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?

darkvidhack · 18 Junio 2012, 00:23 AM

probaste esto?:

Código (css) [Seleccionar]

body{
     width:100%;
...
..
.
}

#header{
     width:100%;
...
..
.
}

xD yo no tengo problemas de esta manera, saludos.

#!drvy · 18 Junio 2012, 00:55 AM

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

Saludos

Test Foro de elhacker.net SMF 2.1

Ajustar barra a todo el ancho de pantalla

Ketchuz

[u]nsigned

Ketchuz

darkvidhack

#!drvy