¿Como centrar una capa con Dreamweaver?

kahlito · #1 (**permalink**) 31/05/2003, 13:20

¿Hay alguna manera de centrar una capa o capas con Dreamweaver?,

¿y aún así es posible que siempre queden centradas para varias resoluciones?

P.D: He echo una busqueda en el foro pero de Dreamweaver no me dice nada.

Saludosss

JavierB · #2 (**permalink**) 01/06/2003, 03:57

Hola, kahlito.

No se si se podrá hacer con Dreamweaver, pero te dejo este código que te puede servir:

Código PHP:

  <html> 
<head> 
<script> 
function centrarCapa(obj) { 
    an=parseInt(document.getElementById(obj).style.width); 
    al=parseInt(document.getElementById(obj).style.height); 
    x=(document.body.clientWidth-an)/2; 
    y=(document.body.clientHeight-al)/2; 
    document.getElementById(obj).style.left=x; 
    document.getElementById(obj).style.top=y; 
} 
</script> 
</head> 
 
<body onLoad="centrarCapa('Layer1')" onResize="centrarCapa('Layer1')"> 
<div id="Layer1" style="border:1px solid red; position:absolute; width:200px; height:115px; z-index:1"></div> 
</body> 
</html>

Con esto la capa estará centrada independientemente de la resolución, incluso aunque el usuario cambie el tamaño de la ventana.

Saludos,

kahlito · #3 (**permalink**) 01/06/2003, 05:29

Gracias de nuevo JavierB, con ese código si logro centrar una capa

, solo que mi intención es la de dejarla centrada y a la vez escondida ya que esa capa seria para un roll over, y al convertirla en escondida y al utilizarla como roll over pulsando en otra imagen no vuelve a salir.

Bueno gracias de nuevo y un saludo

JavierB · #4 (**permalink**) 02/06/2003, 05:36

Hola de nuevo.

No he entendido del todo tu último mensaje

Si te refieres a que no quieres que se vaya centrando al cambiar el tamaño de la pantalla, deja el body asi:

<body onLoad="centrarCapa('Layer1')">

Si es otra tu duda, no dudes en volver a preguntar. Saludos,

kahlito · #5 (**permalink**) 02/06/2003, 06:21

Hola de nuevo JavierB

Haber sime explico mejor

Lo de centrar capas ya lo solucioné con tu código, pero el problema es que estoy haciendo un roll over de la siguiente manera:

Primero pongo una imagen o foto normal, y por otro lado una capa, y al pasar el ratón por encima de la foto pues aparecerá la capa y al quitarlo volverá a desaparacer, bueno un roll over normal, solo que al intentar centrar esas capas que aparecerán y desaparecerán no se como hacerlo para que siempre me aparezcan en el centro aún con diferentes resoluciones

,

Con Dreamweaver tampoco encuentro la manera.

Un saludo

JavierB · #6 (**permalink**) 02/06/2003, 11:30

Rehola.

Podrías poner el código que estás utilizando para el roll-over (o como se escriba) a ver si nos hacemos una idea.

Saludos,

kahlito · #7 (**permalink**) 02/06/2003, 14:35

Este es el código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ofertas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body bgcolor="#000066">
<div id="Layer1" style="position:absolute; left:240px; top:91px; width:217px; height:77px; z-index:1; visibility: hidden;"><img src="cocheaa.jpg" width="300" height="300"></div>
<div id="Layer2" style="position:absolute; left:250px; top:118px; width:249px; height:132px; z-index:2; visibility: hidden;"><img src="alfaromeo.jpg" width="229" height="150"></div>
<div id="Layer3" style="position:absolute; left:256px; top:124px; width:222px; height:76px; z-index:3; visibility: hidden;"><img src="coche4.jpg" width="250" height="150"></div>
<table width="100%" border="0">
<tr>
<td><div align="center"><a href="javascript:;" onMouseOver="MM_showHideLayers('Layer1','','show') " onMouseOut="MM_showHideLayers('Layer1','','hide')" ><img src="logo_1999.jpg" width="70" height="70" border="0"></a></div></td>
<td><div align="center"><a href="javascript:;" onMouseOver="MM_showHideLayers('Layer2','','show') " onMouseOut="MM_showHideLayers('Layer2','','hide')" ><img src="logo_1965.jpg" width="75" height="75" border="0"></a></div></td>
<td><div align="center"><a href="javascript:;" onMouseOver="MM_showHideLayers('Layer3','','show') " onMouseOut="MM_showHideLayers('Layer3','','hide')" ><img src="3p_01.jpg" width="70" height="70" border="0"></a></div></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>

Un saludo

JavierB · #8 (**permalink**) 03/06/2003, 03:00

Rerehola.

En primer lugar derás poner las capas del mismo tamaño (ancho y alto) que las imágenes que has puesto dentro. En segundo, en tu código tienes que añadir lo que aparece en rojo:

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
if (v=='visible') centrarCapa(obj);
obj.visibility=v; }
}
function centrarCapa(obj) {
an=parseInt(obj.width);
al=parseInt(obj.height);
x=(document.body.clientWidth-an)/2;
y=(document.body.clientHeight-al)/2;
obj.left=x;
obj.top=y;
}

Saludos,

kahlito · #9 (**permalink**) 03/06/2003, 16:59

Que tal JavierB?

Bueno ahora si que lo he conseguido

, me ha costado un poco la verdad, ya que no me quedaban centradas al principio por que no tenia las imagenes y capas al mismo tamaño, pero despues las he ido ajustando todas y al final me han quedado correctamente

Pues nada JavierB MUCHAS GRACIAS de nuevo por tu ayuda que me está sirviendo de mucho

Un saludo

JavierB · #10 (**permalink**) 04/06/2003, 02:24

Hola, kahlito.

No hay de que. Me alegro de que te haya funcionado.

Saludos,

Papeluis · #11 (**permalink**) 04/09/2004, 22:24

Hola, yo tengo un problema tambien con Capas,
se trata de lo siguiente. Tengo todo un sitio web hecho en capas (con dreamweaver mx) y se ve bien mientras el usuario tiene resolucion de 800×600, el problema (estetico) es cuando tienen resolucionas mas grandes.
¿Que puedo hacer?

esta es mi web
www.muestrate.cl

a ver si algun guru del dreamweaver me ayuda

kahlito · #12 (**permalink**) 06/09/2004, 01:28

Ufff que de tiempo tiene ya este mensaje

Hola Papeluis las cosas ya han cambiado algo desde aquel entonces, fijate en esta dirección donde se habla del tema:

http://www.tierradenomadas.com/tw003.phtml

Espero que te sirva

entomofauna · #13 (**permalink**) 12/09/2004, 15:52

Hola JavierB.
La solución que me propones para centrar una capa está genial y desde luego que la capa queda centrada. (M'has salvao la vida.. je je..)
Pero existe un poblema, y si visitas http://www.firanatura.ipcena.org lo verás.
A resolución 1024x768 va perfecto, pero a resolución 800x600 la capa queda escondida por arriba, debajo de los menús del mismo navegador.
¿Cómo es posible ésto? ¿Existe forma de solucionarlo?
-----------------------------------------
SOLUCIÓN
Bueno, finalmente me estuve rompiendo la cabeza y lo solucioné yo mismo:
Simplemente se trataba de eliminar la "y" del código, de forma que el código quedaría así:
<script>
function centrarCapa(obj) {
an=parseInt(document.getElementById(obj).style.wid th);
x=(document.body.clientWidth-an)/2;
document.getElementById(obj).style.left=x;
}
</script>

Del mismo modo, si se quisiera hacer lo contrario, habría que quitar la "X" y dejar la "y"... pero eso cada uno con sus necesidades.
Lo he escrito aquí por si alguien lo necesitaba.
Saludos,
Carles.

entomofauna · #14 (**permalink**) 21/10/2004, 15:23

JavierB escribió:
function centrarCapa(obj) {
an=parseInt(document.getElementById(obj).style.wid th);
x=(document.body.clientWidth-an)/2;
... (aqui he recortado un poco el código pa que no fuera tan largo)
<body onLoad="centrarCapa('Layer1')" onResize="centrarCapa('Layer1')">
.....Con esto la capa estará centrada independientemente de la resolución, incluso aunque el usuario cambie el tamaño de la ventana.
-------------------------------------------------------------
Hola Javier:
El código que mandaste es fantástico para centrar una capa, y me funciona perfectamente en htm con Dreamweaver.
Pero me da un pequeño problema con Netscape 7.0, sólamente cuando ejecuto ésta función:

<script>
function pantallacompleta (URL){
var opciones=("toolbar=no, location=no, directories=no, status=no, menubar=no ,scrollbars=no, resizable=no, fullscreen=yes");
window.open(URL,"",opciones);
}
</script>

... donde la URL es precisamente la página que contiene el código para centrar capas, con Explorer no pasa nada, pero con Netscape se me va la capa hacia la esquina izquierda superior y se esconde la capa casi por completo.
-----------------------------
Solucioné el problema a medias, modificando el código "fullScreen" en la página madre que llama a la URL, de la siguiente manera:

<script>
function pantallacompleta (URL){
var opciones=("toolbar=no, location=no, directories=no, status=no, menubar=no ,scrollbars=no, resizable=no, fullscreen=yes");
if (navigator.appName == "Netscape") {window.open(URL,opciones);}
if (navigator.appName == "Microsoft Internet Explorer") {window.open(URL,"",opciones);}
}
</script>

Haciéndolo así, consigo que la ventana que se abre, tenga siempre la capa centrada, pero en Netscape 7.0 no se abre en fullscreen sino como pantalla normal. Me dijeron en otro foro que para que no suceda eso, debería insertar en la página de destino, el siguiente código:

<script>
// Netscape Resize Fix
if (document.layers) {
widthCheck = window.innerWidth
heightCheck = window.innerHeight
window.onResize = resizeFix
}
function resizeFix() {
if (widthCheck != window.innerWidth || heightCheck != window.innerHeight)
document.location.href = document.location.href
}
</script>

Lo inserté en la página de destino (la que lleva la capa centrada) y tampoco funciona. Puedes ver el ejemplo en la siguiente galería fotográfica:
http://www.webpersonal.net/entomofau...artropodos.htm

¿Qué solución crees que puedo aplicar?
Un cordial saludo,
Carles.

the_max · #15 (**permalink**) 26/10/2004, 12:02

hola, el codigo de JabierB funciona muy bien con las resoluciones, pero ahora tengo otro problema para centra mi página. resulta que me sale un espacio en blanco en las partes superior e inferior del sitio. ésta es la dirección de una página prueba: insttel.com

por fa si me pudiera ayudar a corregir el código se los agradecería mucho. igual gracias de antemano.

the_max

kahlito · #16 (**permalink**) 27/10/2004, 02:51

Hola the_max la verdad no se a que te refieres, veo la web centrada , eso si con más margen superior que inferior......

the_max · #17 (**permalink**) 29/10/2004, 22:47

hola doc, gracias por responder. me refiero a ese espacio que queda sobrando cuando lo pruebo en resolucio de 800 x 600. se supone que no se deberia mostrar, he intentado todo (todo lo que está a mi alcance, obviamente) pero no he logrado hacer que desaparezca. ayuda plz.

kahlito · #18 (**permalink**) 31/10/2004, 07:43

Hola the_max ese espacio puede quedar así posiblemente por los margenes que le hayas aplicado, en concreto en el superior que se va algo más arriba de la cuenta.

Creo que si pones el código te podremos ayudar mejor

the_max · #19 (**permalink**) 02/11/2004, 11:15

ete... no puedo poner el codigo porque es muy grande, por fa checalo de la pagina khalito.

, gracias adelantadas.

kahlito · #20 (**permalink**) 03/11/2004, 03:32

Hola de nuevo the_max, creo que el problema está aqui:

<div id="principal" style="position:absolute; width:790px; height:444px; z-index:1">

Esas dimensiones superan el tamaño estandar para una resolucíon de 800 x 600 y por lo tanto hace que por algun lado se coma la imagen. Si pones por ejemplo de ancho 770 por 420 de alto quizás se te arregle

, fijate en 1024 x 768 que ahí hay menos por abajo.

Saludosss

the_max · #21 (**permalink**) 05/11/2004, 00:47

hola khalito, mmm... con tu sugerencia no pude lograr eliminar ese espacio tan molesto, creo que se debe a una mala configuracion de las tablas pues puse alguna en porcentajes, asi que armare de nuevo esa pagina con los valores exactos en px. sabes, estuve probando ese codigo con otra pagina pero la verdad no me liga, es decir en una resolucion de 1024... sale, pero en la de 800 naca, como te explico... digamos que la esquina superior izquierda debe estar en valor Y=0 y X=0 , pero esta mas bien Y=-10 y X=-8, entiendes, es decir como que la capa se mete por ese lado y mi logotipo sale fuera de pantalla, medio confusa la explicacion. gracias de todas formas.

kahlito · #22 (**permalink**) 05/11/2004, 01:30

Hola de nuevo.

Si vas a rearmarlo todo mejor, de todas formas ¿por qué no pruebas con los ejemplos de esta web?, alomejor te complicas menos

http://www.tierradenomadas.com/tw003.phtml

Saludosss

the_max · #23 (**permalink**) 10/11/2004, 12:08

hola, gracias por la sugerencia, ya habia visto esa pagina de ejemplos, e intente algunos pero no encuentro lo q me sirva. lo que quiero es que mi site se vea a toda pagina en 800x600 y que en 1024x700 quede centrada horizontalmente y pegada hacia el extremo superior verticalmente. no se como puedo hacer eso y que de paso funcionen mis capas. incluso ya estaba pensando en utilizar flash para que haga el trabajo de las capas, pero laverdad es que me parece inutil usarlo en este caso. gracias.

the_max · #24 (**permalink**) 10/11/2004, 23:59

hola, por fin encontre la solucion a mi problema con lo de las capas, gracias a que entomafuna colgo su web y pude ver su codigo fuente, chequee como entomafuna le quito tres lineas al codigo inicial que colgo JavierB, solo le cambie el top de la capa a 0px y... voilá: quedo pegada hacia arriba como yo queria y centrada horizontalmente. gracias totales a la gente del foro por ayudar. Pueden ver como quedo mi pagina aqui para que si alguien necesita darle un ojo al codigo. thanks a lot friends.

kahlito · #25 (**permalink**) 11/11/2004, 00:13

Bueno hombre me alegro que lo hayas resuelto tu solo

, así es como mejor se aprende

yodelsur · #26 (**permalink**) 06/02/2008, 17:42

Cita:

Iniciado por JavierB

Hola, kahlito.

No se si se podrá hacer con Dreamweaver, pero te dejo este código que te puede servir:

Código PHP:

  <html> 
<head> 
<script> 
function centrarCapa(obj) { 
    an=parseInt(document.getElementById(obj).style.width); 
    al=parseInt(document.getElementById(obj).style.height); 
    x=(document.body.clientWidth-an)/2; 
    y=(document.body.clientHeight-al)/2; 
    document.getElementById(obj).style.left=x; 
    document.getElementById(obj).style.top=y; 
} 
</script> 
</head> 
 
<body onLoad="centrarCapa('Layer1')" onResize="centrarCapa('Layer1')"> 
<div id="Layer1" style="border:1px solid red; position:absolute; width:200px; height:115px; z-index:1"></div> 
</body> 
</html>

Con esto la capa estará centrada independientemente de la resolución, incluso aunque el usuario cambie el tamaño de la ventana.

Saludos,

hola javierb use tu codigo y me centro la capa a ahora mi pregunta es como puedo centrar varias capas es decir q le agrego a tu code para centrar otras capas mas...... tengo hecho el formato ya son 5 capas como le agrego ese code?
agraadeceria me ayudaras saludos!!!

eban66 · #27 (**permalink**) 18/05/2010, 10:39

Yo se que el tema es viejisimo, pero resulta que de todo lo que probe, esto fue lo unico que me sirvio, el codigo de JavierB.
Me funciono perfectamente con Internet Explorer, pero si lo abro con Firefox ya no se ve centrado, habra algo que se pueda modificar del codigo de Javier para que funcione en todos los navegadores.

Se que hay formas de Css para hacerlo, pero estube probando con todas las forma que encontre y no me funciono ninguna, cuando probe con la de javier andubo perfecto con IE pero con Firefox mozilla no, agradeceria si me pueden dar una mano