Fijar capas aunque varíe la resolución
Quisiera me ayudaras a decirme como puedo mantener las capas fijas en mi pag. Desarrollada en frontpage para que al momento de que alguien que tiene una diferente resolución en pantalla, pueda verla, sin que la capa se cambie de lugar.
Respuesta de riverophues
1
Antes de nada tienes que tener en cuenta que aunque puedas fijar las capas, ante distintas resoluciones siempre se verán más grandes o más pequeñas.
Entonces, si tu pones en la capa el position a absolute, la capa irá colocada en función a la esquina superior izquierda de la pantalla. Así, si tu capa es así:
Esto te posicionará la capa a 100pixels de alto y 100 de ancho de la esquina. Esto se ve distinto en una resolución que en otra ya que 100 pixels a 800x600 es más distancia que a 1024x768.
Por esto, una solución es detectar la resolución del usuario y en función a esto poner unas propiedades a la capa o otras: algo así:
Dependiendo de la resolución deberás sustituir distanciaAlto y distanciaAcho por los valores que lleven tus capas. Igualmente podrás poner el heigth y el widht de tus capas en función a la resolución.
Entonces, si tu pones en la capa el position a absolute, la capa irá colocada en función a la esquina superior izquierda de la pantalla. Así, si tu capa es así:
<div style="position:absolute; top:100; left:100">Capa</div>
Esto te posicionará la capa a 100pixels de alto y 100 de ancho de la esquina. Esto se ve distinto en una resolución que en otra ya que 100 pixels a 800x600 es más distancia que a 1024x768.
Por esto, una solución es detectar la resolución del usuario y en función a esto poner unas propiedades a la capa o otras: algo así:
if (screen.width + "x" +screen.height == "640x480"){
Response.write("<div style='position:absolute; top:distanciaAlto; left:distanciaAncho'></div>")
}
if (screen.width + "x" + screen.height == "800x600"){
Response.write("<div style='position:absolute; top:distanciaAlto; left:distanciaAncho'></div>")
}
if(screen.width + "x" + screen.height == "1024x768"){
Response.write("<div style='position:absolute; top:distanciaAlto; left:distanciaAncho'></div>")
}Dependiendo de la resolución deberás sustituir distanciaAlto y distanciaAcho por los valores que lleven tus capas. Igualmente podrás poner el heigth y el widht de tus capas en función a la resolución.
Gracias, es una solución adecuada y lógica, sólo que tengo un problema más, ya para cerrar está asesoría. Me marca un error de sintaxis, debido a que tal vez coloqué mal la ';' para separar todas las capas que necesito, a continuación te pongo la sintaxis para saber en que punto estoy mal:
if (screen.width + "Nombre pagina" + screen.height == "800 x 600"){
response.write'("<div style="position: absolute; left: 167px; top: 131px; width: 34; height: 49" id="capa2"><img src=Images/prueba1.GIF align="top"></div>//-->; <div style="position: absolute; left: 307px; top: 113px; width: 91; height: 15" id="capa1"><img src=Images/prueba.GIF border="0" align="top"></div>")'
}
if (screen.width + "Nombre pagina" + screen.height == "1024 x 768"){
response.write'("<div style="position: absolute; left: 279px; top: 131px; width: 34; height: 49" id="capa2"><img src=Images/prueba1.GIF align="top"></div>; <div style="position: absolute; left: 419px; top: 112px; width: 91; height: 15" id="capa1"><img src=Images/prueba.GIF border="0" align="top"></div>")'
}
Además no se si en la función el nombre de la pag. Debe llevar la extensión .html; te agradezco de antemano todas las molestias. Saludos!
if (screen.width + "Nombre pagina" + screen.height == "800 x 600"){
response.write'("<div style="position: absolute; left: 167px; top: 131px; width: 34; height: 49" id="capa2"><img src=Images/prueba1.GIF align="top"></div>//-->; <div style="position: absolute; left: 307px; top: 113px; width: 91; height: 15" id="capa1"><img src=Images/prueba.GIF border="0" align="top"></div>")'
}
if (screen.width + "Nombre pagina" + screen.height == "1024 x 768"){
response.write'("<div style="position: absolute; left: 279px; top: 131px; width: 34; height: 49" id="capa2"><img src=Images/prueba1.GIF align="top"></div>; <div style="position: absolute; left: 419px; top: 112px; width: 91; height: 15" id="capa1"><img src=Images/prueba.GIF border="0" align="top"></div>")'
}
Además no se si en la función el nombre de la pag. Debe llevar la extensión .html; te agradezco de antemano todas las molestias. Saludos!
Gracias por tu claridad, eres muy amable.
Este es el código tal cual. El que me has enviado de vuelta tenía mal algunas cosas. La "x" no es el nombre de ninguna página, es un literal y no se puede tocar. También tienes que tener muy en cuenta las comillas. Dentro de comilla doble va comilla simple, si no no se reconoce. Bueno el caso es que este código que te mando funciona. Toca lo imprescindible, también habías puesto espacios en el "800x600" y también fallaba
Suerte.
<script>
if (screen.width + "x" + screen.height == "800x600"){
document.write("<div style='position: absolute; left: 167px; top: 131px; width: 34; height: 49' id='capa2'>")
document.write("<img src='Images/prueba1.GIF' align='top'>");
document.write("</div>");
document.write("<div style='position: absolute; left: 307px; top: 113px; width: 91; height: 15' id='capa1'>");
document.write("<img src='Images/prueba.GIF' border=0 align='top'>");
document.write("</div>");
}
if (screen.width + "x" + screen.height == "1024x768"){
alert(screen.width + "x" + screen.height)
document.write("<div style='position: absolute; left: 279px; top: 131px; width: 34; height: 49' id='capa2'>");
document.write("<img src='Images/prueba1.GIF' align='top'>");
document.write("</div>");
document.write("<div style='position: absolute; left: 419px; top: 112px; width: 91; height: 15' id='capa1'>");
document.write("<img src='Images/prueba.GIF' border=0 align='top'>");
document.write("</div>");
}
</script>
Suerte.
<script>
if (screen.width + "x" + screen.height == "800x600"){
document.write("<div style='position: absolute; left: 167px; top: 131px; width: 34; height: 49' id='capa2'>")
document.write("<img src='Images/prueba1.GIF' align='top'>");
document.write("</div>");
document.write("<div style='position: absolute; left: 307px; top: 113px; width: 91; height: 15' id='capa1'>");
document.write("<img src='Images/prueba.GIF' border=0 align='top'>");
document.write("</div>");
}
if (screen.width + "x" + screen.height == "1024x768"){
alert(screen.width + "x" + screen.height)
document.write("<div style='position: absolute; left: 279px; top: 131px; width: 34; height: 49' id='capa2'>");
document.write("<img src='Images/prueba1.GIF' align='top'>");
document.write("</div>");
document.write("<div style='position: absolute; left: 419px; top: 112px; width: 91; height: 15' id='capa1'>");
document.write("<img src='Images/prueba.GIF' border=0 align='top'>");
document.write("</div>");
}
</script>
