Tengo que realizar el siguiente screen:
Pues bien el problema es que en principio el website no debe tener scroll del html, body, si no como se aprecia lo tendra el div de abajo. Lo ideal seria que si el navegador necesita hacer scroll porque no se puede ver todo el contenido pues lo haga (lo ideal). Pero posicionando la columna de la izquierda con position:fixed me he encontrado con que scrolea con todo el documento y no quiero que ocurra esto, necesito que la columna se quede en su posicion. Soy consciente de que tendre que hacer hack para IE, ya lo tengo controlado. Quiero que funcione en Firefox al menos.
XHTML
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Combino</title> <link rel="shortcut icon" href="favicon.ico" /> <link href="css/combino.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="contenedor"> <div id="header"> <div id="header-topbar"></div> <div class="imagen"><img src="imagenes/cabecera1.jpg" alt="" /></div> <div id="header-bottombar"></div> </div> <div id="columna" class="imagen"><img src="imagenes/temp-columna.jpg" alt="" /></div> </div> </body> </html>
CSS
Código :
html,body {
text-align:center;
margin:0;
font-family:Arial, sans-serif;
font-size:11px;
color:rgb(58,54,54);
font-weight:normal;
text-decoration:none;
height:100%;
overflow:auto;
}
.imagen {font-size:0;}
#contenedor {
width:981px;
margin:46px auto 0 auto;
}
#header {
background-color:#18476d;
background-color:#ccc;
}
#header-topbar {
border:1px solid #c5c5c5 0;
background:url(../imagenes/header-topbar.gif) repeat-x 0 0;
height:28px;
}
#header-bottombar {
background:url(../imagenes/header-bottombar.gif) repeat-x 0 0;
height:16px;
}
#columna {
position:fixed;
top:48px;
margin-left:23px;
display:block;
}Que estoy haciendo mal?
Gracias por adelantado
