Foros del Web » Creando para Internet » CSS »

Ver Capas en diferentes resoluciones

Estas en el tema de Ver Capas en diferentes resoluciones en el foro de CSS en Foros del Web. 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;} ...
  #1 (permalink)  
Antiguo 06/07/2006, 11:51
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
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
  #2 (permalink)  
Antiguo 07/07/2006, 10:04
Avatar de Daniel M.  
Fecha de Ingreso: julio-2005
Ubicación: Lima Perú
Mensajes: 108
Antigüedad: 12 años, 5 meses
Puntos: 0
Relative

trata de usuar pociciones relativas, en ves de absolutas a mi me funciona ...saludos!
__________________
Daniel M.
TEXT-IDENT
  #3 (permalink)  
Antiguo 07/07/2006, 10:48
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Tenes un ejemplo que podamos ver online? Asi a ciegas es muy dificil saber donde esta el problema (ni hablar de la solucion).
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #4 (permalink)  
Antiguo 08/07/2006, 02:41
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
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;}
  #5 (permalink)  
Antiguo 08/07/2006, 03:54
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Cita:
Iniciado por Laika
#divScrollTextCont {position:absolute; left:771px; top:197px; width:295px; height:305px; overflow:hidden; visibility:hidden;}
Esta capa no puede verse, porque está oculta 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,
  #6 (permalink)  
Antiguo 08/07/2006, 11:58
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
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
  #7 (permalink)  
Antiguo 10/07/2006, 01:49
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
¿No hay solución?

Simplemente quiero que mi capa se vea en el mismo sitio en todas las resoluciones

  #8 (permalink)  
Antiguo 10/07/2006, 16:46
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
<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>&nbsp;</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">&nbsp;</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">&nbsp;</td>
<td width="295" valign="top"><p>&nbsp;</p>
<p align="justify" class="Estilo6">&nbsp;</p></td>
<td width="45">&nbsp;</td>
</tr>
<tr>
<td height="386">&nbsp;</td>
<td valign="top"></td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>
  #9 (permalink)  
Antiguo 10/07/2006, 19:07
 
Fecha de Ingreso: abril-2006
Mensajes: 25
Antigüedad: 11 años, 8 meses
Puntos: 0
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:
#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;
}
Suerte.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:56.