Sliderbar position: absolute

[gerazmv]

Hola gente. Tengo una duda de css que necesito arreglar
Tengo un slidebar del lado derecho.


con el siguiente css:
padding:0px; position: absolute; top:130px; right:5px;

La pagina es de ancho variable segun el navegador.
Al achicar el navegador quiero que el slider quede trancado al llegar a los 600pixles desde la izquierda.

Como lo tengo ahora , si achico el navegador , este se me desplaza siempre quedando a 5px de la derecha.

pero lo que deseo es que si se reduce de menos de 600 pixeles el navegador este quede fijo y aparesca el famoso scroll inferior.

Alguien sabe como ayudarme?

Saludos Gerardo

[kseso?]

Hola Gerazmv:
La posición absoluta lo es siempre con relación al elemento padre, al contenedor.

Si tu diseño está basado en %, lo que debes hacer es definir un max-width y un min-width, de tal manera que evites sobrepasar un máximo de anchura o el colapso a bajas resoluciones.

Pero ¿a que no adivinas qué navegador no reconoce esas dos propiedades?
Así que hay que tener en cuenta a ie:

div {
max-width: 1200px;
width: expression(document.body.clientWidth > 1201? "1200px": "auto");
}
div {
min-width:600px;
width: expression(document.body.clientWidth < 601? "600px": "auto" );
}

Pon el nº de px que creas más conveniente.

[gerazmv]

No queria poner la url por que el dominio aun no esta terminado. pero no me queda otra.

La url es www.programasxd.com/index.php y si te fijas el menu 2 que seria el que tiene Top descargas Semanales

Se me desplaza siempre y si aparece un scroll pero queda totalmente deforma al reducir el tamaño del navegador.

los css serian los siguientes:


#page { margin:0px; padding: 0px; padding-left:10px; padding-right:10px; width: 98%; min-width:800px;}


#contenido { margin: 0 202px; min-width:405px; padding-top:5px; background-image:url(images/contenido_fondo.png); background-position:inherit; background-repeat:no-repeat; padding-left:10px; }
#m_1 {
width:200px;
margin:0px;
padding:0px;
position: absolute;
left: 6px;
top:130px;
border-right:1px dotted #CCCCCC;
background-color:#FFFFFF;
background-image:url(images/m_fondo.png);
background-position:top;
background-repeat:repeat-x;
}


#m_2 { width:200px; margin:0px; padding:0px; position: absolute; top:130px; right:5px; border-left:1px dotted #CCCCCC; background-color:#FFFFFF; background-image:url(images/m_fondo.png); background-position:top; background-repeat:repeat-x; }

[gerazmv]

Alguna Help?

[kseso?]

Hola Gerazmv
Disculpas, me había olvidado de este tema.

Mira lo que yo intentaría:
Todo el contenido central lo posicionaría en un div contenedor del mismo, tal como tienes hecho con #m_1 y #m_2.
A ese div darle un min-width.
En el html colocaría los div según se van a mostrar en pantalla, tal que así

• <div id="m_1"> todo su contenido</div>
• <div id="contenedor_central"> todo su contenido</div>
• <div id=m_2> todo su contenido</div>

También he visto que al elemento central donde alojas los programas (openarena, openoficce, no le tienes identificador (el que está dentro de #contenido, antes del#m_1) y quizás eso te pueda dar algún problemilla.

A ver si se arregla algo.