Hola de nuevo :
Cita: ... la barra de desplazamiento del iexplore aparece más a la izquierda de lo normal (La web tendrá que ser navegada por este navegador obligatoriamente) y también me queda fijo la imagen del fondo (Algo que no deseo) ...
Devil Akuma : Y justo para el
Internet Explorer ...
Si fuera otro navegador, podrías usar
position:fixed, pero éste no lo reconoce ( hay algo llamado
stationary, pero seguramente tampoco funciona ).
Le estuve dando vueltas al asunto porque no puede ser que algo así no salga.
Los problemas están en que la capa ( porque hay que resolverlo con capas ) que se desplaza es, generalmente, la de adelante. Pero tú quieres desplazar los enlaces, el fondo, y dejar fijos los planetas que están primero. Ésto nos lleva a que la Luna -que está arriba a la derecha- no pueda flotar sobre el contenido, ya que al quedar sobre la capa desplazable pisa la
scrollbar.
En eso estaba cuando cuando saltó una chispa sináptica, y recordé que hace bastante tiempo vi una tema sobre "detectar la existencia de '
scrollbars' en un documento"; y yo me pregunté "
para qué puede servir éso?"; pero igual lo resolví. Ahora le encontré la utilidad. Adaptando algunas líneas nos va a servir para ubicar la Luna.
Código:
<HTML><HEAD><TITLE>Índice</TITLE>
<script>
function ajusta(){
document.body.style.overflow="scroll";
ancho=document.body.clientWidth-200;
document.getElementById("luna").style.left=ancho+"px";
document.body.style.overflow="hidden";
}
</script>
<STYLE>
A {
FONT-FAMILY: Arial; FONT-SIZE: 20px; TEXT-DECORATION: none
}
BODY {
padding:0; margin:0; scrollbar-face-color: #000000; scrollbar-highlight-color: #aaaaaa; scrollbar-shadow-color: #aaaaaa; scrollbar-3dlight-color: #eeeeee; scrollbar-arrow-color: #eeeeee; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000
}
#enlaces{
height:100%; overflow:auto; background:url("http://cine.eol.us/~devil/tierra/images/index_fondo.gif");
}
#luna{
height:100%;width:10px; position: absolute; left:100%; top:0; vertical-align:top; padding:0; z-index:1; border-collapse:collapse
}
#luna td{
vertical-align:top; padding:0
}
#tierra{
height:100%;width:10px; position: absolute; left:0; botom:0; vertical-align:bottom; padding:0; z-index:1; border-collapse:collapse
}
#tierra td{
vertical-align:bottom; padding:0
}
</STYLE>
<SCRIPT src="http://cine.eol.us/~devil/tierra/main/JSFX_LinkFader.js" type=text/javascript></SCRIPT>
</HEAD>
<BODY onload="ajusta()" onresize="location.reload()" aLink=#770000 link=#770000 text=white vLink=#cc0000>
<table id="luna">
<td>
<IMG alt=Cargando... border=0 vspace=0
src="http://cine.eol.us/~devil/tierra/images/esquina_luna.gif" title="La Luna!"></td>
</td>
</table>
<table id="tierra">
<td>
<IMG
alt=Cargando... border=0 src="http://cine.eol.us/~devil/tierra/images/esquina_tierra.gif"
title="La Tierra!"></td>
</table>
<div id="enlaces">
<BR><BR><BR><BR><BR><BR><BR>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Conócenos</A></FONT></P>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Temario</A></FONT></P>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Vocabulario</A></FONT></P>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Ejercicios</A></FONT></P>
<P align=center><FONT face=Arial><A href="http://www.cineol.net/"
target=_blank>Curiosidades</A></FONT></P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</div>
</BODY></HTML>
Supongo que la página en cuestión es una prueba, ya que es evidente que los enlaces no se van a centrar verticalmente en cualquier resolución, y en algunos casos hasta van a quedar tapados por la Tierra. Pero ese es otro tema.
saludos
furoya
P.D. : A mí también me queda la barra separada del borde. En el ejemplo que da el autor en TdN no pasa. Habría que avisarle. ( en
IE se puede arreglar, pero temo que lo descalibremos para los otros navegadores.)