Hola a todos, vereis, tengo una página en la que el contenido está centrado y con una anchura de 770px (el div princuipal que lleva todo el contenido) el caso es que ahora no quiero que se vea así, quiero expandirla y que ocupe toda la página... hasta ahí bien, sería ponerle un ancho al 100% y listo PERO siempre tengo un PERO!!!
Si le doy de ancho 100% de repente la cabecera y el menú (lo demás no se mueve porque lo tengo en 'px')ya no es fijo, al hacer la ventana pequeña se va desplazando y quiero que aunque se haga pequeña la ventana no se mueva! Si lo pongo en pixeles se queda fijo, he probado con todas las posiciones, fija, absoluta... y nada, se mueve!
¿Es por el '%'? ¿Cúal es la mejor manera de hacer una página que sea visible en todas las resoluciones?
Aquí el código CSS:
Código HTML:
body {
margin: 0;
padding: 0;
background: #F2F5FE url("../imagenes/fondo.gif") 0 0 repeat-x;
font: 70%/160% "verdana", sans-serif;
color: #192666;
}
ul, ol {
margin: 1em 0 1em 2em;
padding:0;
}
#contenedor {
width:770px;
margin: 50px auto 0 auto;
}
#cabecera {
width: 770px;
position: relative;
height: 100px;
margin: 0;
padding: 0;
background: #233C9B url("../imagenes/cabecera.jpg") no-repeat;
color: #FFF;
}
#contenido {
width: 760px;
margin: 0 5px;
background: #FFF;
}
#contenido #principal {
float: right;
width: 530px;
margin-top: 15px;
padding:0 0 0 20px;
background: #FFF;
}
#contenido #secundario {
float: left;
width: 200px;
margin: 15px 0 0 0;
padding: 0;
background: #CEDBF9 url("../imagenes/fondo_columna.gif") no-repeat;
}
Espero algún consejo
Muchas gracias!!