Position Fixed

[river]

La maqueta consta de 2 columnas, y gracias a este foro pude lograr el efecto que buscaba, que la columna del Menu quede estatica y solo se mueva el contenido, que es la 2da. columna.
Ahora bien, solo me funciona bien en Explorer, lo pueden ver aca: http://www.hierrostorrent.com.ar/Prueba/posfija.htm

El ejemplo me lo dieron Uds. con este url http://www.tierradenomadas.com/rc012.phtml

sin embargo ahi le fuciona bien tanto en Explorer, como Mozilla, Opera, Netscape.

¿ que hice mal que no me funciona en los otros navegadores como si me funciona en Explorer ?

Dejo el archivo css:

html>body #Fija {
position:fixed;
}
#Todo {
position:absolute;
top:0;
left:160px;
width:90%;
height:100%;
overflow:auto;
}
html>body #Todo {
position:static;
top:auto;
left:auto;
width:auto;
height:auto;
overflow:visible;
}

#menu{
position: absolute;
top : 100px;
left : 0px;
width : 140px;
font-weight: bold;
margin-bottom: 0px;
background-color: #e6c9c1;
line-height: 20px;
}

#menu a{
display: block;
width: 155px;
text-align: center;
text-decoration: none;
font-family: sans-serif;
font-size:12px;
line-height: 20px;
color: #000000;
border: solid 0px #000000;
}

#menu a:hover {
font-size: 12px; COLOR: #44370f; font-weight: bold; text-decoration: none;
background-color:#F7ECEA;
}

[river]

Perdon el archivo css completo es el siguiente:


* html body {
overflow:auto;
}
#Fija {
position:absolute;
top:0;
left:0;

html>body #Fija {
position:fixed;
}

#Todo {
position:absolute;
top:0;
left:160px;
width:90%;
height:100%;
overflow:auto;
}
html>body #Todo {
position:static;
top:auto;
left:auto;
width:auto;
height:auto;
overflow:visible;
}

#menu{
position: absolute;
top : 100px;
left : 0px;
width : 140px;
font-weight: bold;
margin-bottom: 0px;
background-color: #e6c9c1;
line-height: 20px;
}

#menu a{
display: block;
width: 155px;
text-align: center;
text-decoration: none;
font-family: sans-serif;
font-size:12px;
line-height: 20px;
color: #000000;
border: solid 0px #000000;
}

#menu a:hover {
font-size: 12px; COLOR: #44370f; font-weight: bold; text-decoration: none;
background-color:#F7ECEA;
}

[river]

Foristas: por favor AYUDDDDDDDDDDDEEEEEEEEEENNNNNNNNNMEEEEEEEEEEE !!!

[furoya]

Hola river :

¡ Justo ahora no lo puedo revisar !, pero el código corregido está en la última respuesta de ( me falta verlo en Opera )

Colocar imágenes en las esquinas

saludos

furoya

[river]

Hola Furoya !!

Mil gracias por tu respuesta, hoy por la noche lo pruebo y te comento como me fue.

Muchas gracias por tu ayuda !

[river]

Furoya, finalmente ahora si me funciono: lo podes ver http://www.hierrostorrent.com.ar/Prueba/torrent3.htm

Ahora que tengo la maquetacion general, puedo seguir adelante con el sitio en particular. Igualmente te quiero preguntar si en el archivo css:

* html body {
overflow:hidden;
}

¿ puedo colocar ahi dentro las pautas generales para todo el sitio ?

El Dreamweaver me da los siguientes errores en el archivos css, los cuales me dejan bastante preocupado, ellos son:

1) position:fixed no se admitirá hasta la versión 6.1. [Netscape Navigator 6.0, Netscape Navigator 7.0]

¿ Significa esto que los navegadores anteriores no pueden ver el sitio ?

2) El valor 'fixed' no está admitido por la propiedad CSS position [Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0]

3) No se admite el atributo LEFTMARGIN y TOPMARGIN de la etiqueta Body. [Netscape Navigator 6.0 y 7.0
No se admite el atributo MARGINWIDTH de la etiqueta Body. [Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0]

Colocare copia del archivo css para que veas lo veas, me interesaria saber si es que se puede resumir.

Muchas gracias a Furoya en particular y a todos los foristas en general.

[river]

Aqui el archivo css:

<style>
* html body {
overflow:hidden;
}
#Fija {
position:absolute;
top:0;
left:0;
}
html>body #Fija {
position:fixed;
}
#Todo {
position:absolute;
padding-top : 0px;
padding-bottom : 30px;
padding-left : 170px;
padding-right : 5%;
width:100%;
height:100%;
overflow:auto;
text-align: justify;
}
html>body #Todo {
position:static;
top:auto;
left:auto;
width:auto;
height:auto;
overflow:visible;
}
#todo h1 {
font-size: 120%;
font-weight: normal;
color: #000000;
background-color : transparent;
}

#todo h2 {
font-size: 100%;
font-weight: bold;
color: #000000;
background-color : transparent;
}

#todo h4 {
font-size: 75%;
font-weight: bold;
color: #000000;
background-color : transparent;
text-align: center;
line-height: 3px;
}

#todo p{
font-size: 80%;
font-weight: normal;
color: #000000;
background-color : transparent;
line-height : 140%;
}

#menu{
position: absolute;
top : 68px;
left : 2px;
width : 140px;
font-weight: bold;
margin-bottom: 0px;
background-color: #e6c9c1;
line-height: 20px;
}

#menu a{
display: block;
width: 165px;
text-align: left;
text-decoration: none;
font-family: sans-serif;
font-size:12px;
line-height: 20px;
color: #000000;
border: solid 0px #000000;
}

#menu a:hover {
font-size: 12px; COLOR: #44370f; font-weight: bold; text-decoration: none;
background-color:#F7ECEA;
}

</style>

[furoya]

Hola river :

El problema es que los navegadores usan métodos distintos.

El IE pone 2 capas , una móvil y otra fija; Moz usa un elemento fijo y el resto del documento móvil.

Por eso es que hay que hacer 2 códigos distintos y meterlos en el mismo Css.

Lo que pongas con *... es para Internet Explorer; lo que pongas despues de ...>... sólo lo ve Mozilla.

saludos

furoya

[river]

ok. Y respecto a los otros errores que me señala Dreamweaver ¿ debo preocuparme ? me refiero a leftmargin, etc.

Saludos,
River

[furoya]

Ah!, eso es cierto. Te conviene usar CSS y no agregar propiedades dentro de las etiquetas. Igual, las que no sean soportadas simplemente no van a funcionar. En IE el texto del menú queda muy pegado al borde - no lo vi en Moz-. Prueba darle un margen izquierdo a los enlaces; si usas padding puede que el tamaño del bloque cambie ( en FF y Op pasa ).

Yo no le hago mucho caso a los programas de validación, porque son máquinas y no saben qué es lo que uno quiere hacer con su página. Te sugiero que descargues un Mozila y un Opera y la veas por ti mismo.

saludos

furoya