06/07/2006, 10:51
| ||||
| ||||
| Ver Capas en diferentes resoluciones Hola, Tengo un problema con las capas. Tengo una capa a la que le aplicado un estilo: #divScrollTextCont {position:absolute; left:771px; top:197px; width:295px; height:305px; overflow:hidden; visibility:hidden;} Viendolo a una resolción de 1280 x 800, se ve donde yo quiero verla situada, pero si cambio la resolucióna 1024 x 768 la capa se mueve y queda descolocada. ¿Cómo puedo hacer para que se vea en su sitio en las 2 resoluciones? Gracias, Laika |
|
07/07/2006, 09:04
| ||||
| ||||
| Relative trata de usuar pociciones relativas, en ves de absolutas a mi me funciona ...saludos! |
|
07/07/2006, 09:48
| ||||
| ||||
| Tenes un ejemplo que podamos ver online? Asi a ciegas es muy dificil saber donde esta el problema (ni hablar de la solucion).
__________________ mi tumblelog sobre diseño La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta. |
|
08/07/2006, 01:41
| ||||
| ||||
| Si, yo también necesito un ejemplo porque he probado po niendo relative en vez de absolute y s eme descoloca la página. Mi capa: #divScrollTextCont {position:absolute; left:771px; top:197px; width:295px; height:305px; overflow:hidden; visibility:hidden;} |
|
08/07/2006, 02:54
| ||||
| ||||
| Cita: Esta capa no puede verse, porque está oculta
Iniciado por Laika #divScrollTextCont {position:absolute; left:771px; top:197px; width:295px; height:305px; overflow:hidden; visibility:hidden;}  Explica un poco mejor a qué te refieres con "si cambio la resolucióna 1024 x 768 la capa se mueve y queda descolocada."Si tienes la página subida a internet y pones un enlace, mucho mejor. Saludos,  |
|
08/07/2006, 10:58
| ||||
| ||||
| A La Capa al pasar el raton por una imagen le pongo visibility y se ve pero lo que quiero decir es que al verse a 1024 x 768 se ve en otra posición que si la veo a 1200 x 800. Olvidate de lo de hidden, imaginate que desde el principio en el estilo no está oculta, sino visible. Llevo tiempo para reoslver esto buscando por ahi pero no lo he conseguido. haber si me opdeis ayudar Gracias, Laika |
|
10/07/2006, 15:46
| ||||
| ||||
| <html> <head> <style type="text/css"> #divUp {position:absolute; left:1022px; top:101px;} #divDown {position:absolute; left:1018px; top:436px;} #divScrollTextCont {position:absolute; left:771px; top:133px; width:295px; height:305px; overflow:hidden; visibility:hidden;} #divText {position:absolute; left:0px; top:0px;} .Estilo6 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } .Estilo9 {font-size: 22px; font-family: "Monotype Corsiva"; color: #0D4500; text-decoration:none} body { background-color: #F8FEA5; margin-top: 0px; } </style> <script> function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=this.agent.indexOf("Opera 5")>-1 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=new lib_bwcheck() //If you want it to move faster you can set this lower, it's the timeout: var speed = 30 //Sets variables to keep track of what's happening var loop, timer //Object constructor function makeObj(obj,nest){ nest=(!nest) ? "":'document.'+nest+'.' this.el=bw.dom?document.getElementById(obj):bw.ie4 ?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; this.css=bw.dom?document.getElementById(obj).style :bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; this.scrollHeight=bw.ns4?this.css.document.height: this.el.offsetHeight this.clipHeight=bw.ns4?this.css.clip.height:this.e l.offsetHeight this.up=goUp;this.down=goDown; this.moveIt=moveIt; this.x=0; this.y=0; this.obj = obj + "Object" eval(this.obj + "=this") return this } // A unit of measure that will be added when setting the position of a layer. var px = bw.ns4||window.opera?"":"px"; function moveIt(x,y){ this.x = x this.y = y this.css.left = this.x+px this.css.top = this.y+px } //Makes the object go up function goDown(move){ if (this.y>-this.scrollHeight+oCont.clipHeight){ this.moveIt(0,this.y-move) if (loop) setTimeout(this.obj+".down("+move+")",speed) } } //Makes the object go down function goUp(move){ if (this.y<0){ this.moveIt(0,this.y-move) if (loop) setTimeout(this.obj+".up("+move+")",speed) } } //Calls the scrolling functions. Also checks whether the page is loaded or not. function scroll(speed){ if (scrolltextLoaded){ loop = true; if (speed>0) oScroll.down(speed) else oScroll.up(speed) } } //Stops the scrolling (called on mouseout) function noScroll(){ loop = false if (timer) clearTimeout(timer) } //Makes the object var scrolltextLoaded = false function scrolltextInit(){ oCont = new makeObj('divScrollTextCont') oScroll = new makeObj('divText','divScrollTextCont') oScroll.moveIt(0,0) oCont.css.visibility = "visible" scrolltextLoaded = true } //Call the init on page load if the browser is ok... if (bw.bw) onload = scrolltextInit </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Historia</title> </head> <body> <div id="divUp"> <a href="#" class="Estilo9" onClick="return false" onMouseOver="scroll(-2)" onMouseOut="noScroll()">Subir</a></div> <div id="divDown"> <a href="#" class="Estilo9" onClick="return false" onMouseOver="scroll(2)" onMouseOut="noScroll()">Bajar</a></div> <div id="divScrollTextCont"> <div id="divText"> <p align="justify" class="Estilo6">pero cuando el mundo corría peligro se convertía en el Hombre de Acero, Superman, una identidad que ocultaba celosamente. Y sin ningún tipo de explicaciones, un día desapareció y dejó a la Tierra sin un superhéroe que la defendiese. Sin él, Lois Lane, la mujer a la que ama, ha rehecho su vida y tiene un hijo, y el crimen ha crecido alarmantemente en todo el mundo. La ciudad de Metrópolis está en peligro por culpa de Lex Luthor, que recién salido de la cárcel ya planea hacerse con el poder y el control a toda costa. Con su plan a punto de cumplirse, Superman regresa tras descubrir que su lugar en el universo está en la granja de los Kent, su única familia. Superman tendrá que luchar por salvar a un mundo que le necesita más que nunca. Mucho se ha hablado de esta nueva entrega del más famoso superhéroe de DC Comics. Pasó por muchas manos hasta que al final el encargado de dirigirla ha sido Bryan Singer (X-Men). Desde su debut en el cómic en 1938, la figura del Hombre de Acero se ha convertido en un símbolo universal y hoy en día se sigue distribuyendo mundialmente en 25 idiomas y en más de 40 países. En 1978 apareció el personaje en una pantalla de cine con el rostro del ya fallecido Christopher Reeve. Por eso, la búsqueda de un nuevo Superman se convirtió en todo un reto hasta encontrar a un actor casi desconocido, Brandon Routh, pero con un gran parecido con Reeve. Le acompañan Kate Bosworth (El chico de tu vida), James Marsden (X-Men 2), Eva Marie Saint (Con la muerte en los talones) y en el papel de Lex Luthor, un carismático Kevin Spacey (American Beauty). pero cuando el mundo corría peligro se convertía en el Hombre de Acero, Superman, una identidad que ocultaba celosamente. Y sin ningún tipo de explicaciones, un día desapareció y dejó a la Tierra sin un superhéroe que la defendiese. Sin él, Lois Lane, la mujer a la que ama, ha rehecho su vida y tiene un hijo, y el crimen ha crecido alarmantemente en todo el mundo. La ciudad de Metrópolis está en peligro por culpa de Lex Luthor, que recién salido de la cárcel ya planea hacerse con el poder y el control a toda costa. Con su plan a punto de cumplirse, Superman regresa tras descubrir que su lugar en el universo está en la granja de los Kent, su única familia. Superman tendrá que luchar por salvar a un mundo que le necesita más que nunca. Mucho se ha hablado de esta nueva entrega del más famoso superhéroe de DC Comics. Pasó por muchas manos hasta que al final el encargado de dirigirla ha sido Bryan Singer (X-Men). Desde su debut en el cómic en 1938, la figura del Hombre de Acero se ha convertido en un símbolo universal y hoy en día se sigue distribuyendo mundialmente en 25 idiomas y en más de 40 países. En 1978 apareció el personaje en una pantalla de cine con el rostro del ya fallecido Christopher Reeve. Por eso, la búsqueda de un nuevo Superman se convirtió en todo un reto hasta encontrar a un actor casi desconocido, Brandon Routh, pero con un gran parecido con Reeve. Le acompañan Kate Bosworth (El chico de tu vida), James Marsden (X-Men 2), Eva Marie Saint (Con la muerte en los talones) y en el papel de Lex Luthor, un carismático Kevin Spacey (American Beauty). </p> </div> </div> <table width="957" height="516" border="0" align="center" cellpadding="1" cellspacing="0"> <tbody> <tr> <td width="955" height="516" valign="top" bgcolor="#000000"><table width="955" height="522" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#92A4FA"> <tbody> <tr> <td width="955" height="402" valign="top" bgcolor="#FFFFFF"><table width="964" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> <tr> <td width="964"></td> </tr> <tr> <td><table width="964" height="461" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="586" height="461" valign="top"> </td> <td width="378" height="461" valign="top"><table width="377" height="455" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="37" height="69"> </td> <td width="295" valign="top"><p> </p> <p align="justify" class="Estilo6"> </p></td> <td width="45"> </td> </tr> <tr> <td height="386"> </td> <td valign="top"></td> <td> </td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td> </td> </tr> </table></td> </tr> </tbody> </table></td> </tr> </tbody> </table> </body> </html> |
|
10/07/2006, 18:07
| |||
| |||
| Tu problema con la resolución se debe a que estás utilizando posiciones absolutas en cada momento. Por lo tanto cuando cambias la resolución el número total de pixel como bien sabrás también cambia. Deberías de utilizar posiciones relativas, en lugar de usar absolutas. Otra cosa que puedes hacer es poner todas esas capaz en contenedores con posiciones relativas, y luego la capa puede llevar posición absoluta (referente al contenedor). Aquí te dejo un ejemplo que yo he utilizado:
Código:
Suerte. #container {
margin: 0 auto;
position: relative;
text-align: left;
background: url(../img/containerBg.gif) repeat-y center;
width: 672px;
}
#linkList {
position: absolute;
top: 325px;
left: -60px;
margin: 0;
padding: 0;
}
|
