Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Herramientas y Software (http://www.forosdelweb.com/f17/)
-   -   ¿Como centrar una capa con Dreamweaver? (http://www.forosdelweb.com/f17/como-centrar-capa-con-dreamweaver-133770/)

kahlito 31/05/2003 13:20

¿Como centrar una capa con Dreamweaver?
 
¿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. :pensando:

Saludosss :-)

JavierB 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, :adios:

kahlito 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. :pensando:

Bueno gracias de nuevo y un saludo :arriba:

JavierB 02/06/2003 05:36

Hola de nuevo.

No he entendido del todo tu último mensaje :pensando: 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, :adios:

kahlito 02/06/2003 06:21

Centrar capas con Dreamweaver
 
Hola de nuevo JavierB :-)

Haber sime explico mejor :cool:

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 :no: ,

Con Dreamweaver tampoco encuentro la manera. :-(

Un saludo :adios:

JavierB 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, :adios:

kahlito 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">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

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; }
obj.visibility=v; }
}
//-->
</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Un saludo ;-)

JavierB 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, :adios:

kahlito 03/06/2003 16:59

Que tal JavierB? :-)

Bueno ahora si que lo he conseguido :-D , 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 :risa:

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

Un saludo :adios:

JavierB 04/06/2003 02:24

Hola, kahlito.

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

Saludos, :adios:

Papeluis 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 06/09/2004 01:28

Ufff que de tiempo tiene ya este mensaje :borracho:

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 :arriba:

entomofauna 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 21/10/2004 15:23

¿Cómo centrar una capa con Dreamweaver?
 
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 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. :aplauso:

the_max

kahlito 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...... :pensando:

the_max 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. :no:

http://www.insttel.com/print.jpg

kahlito 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 :arriba:

the_max 02/11/2004 11:15

ete... no puedo poner el codigo porque es muy grande, por fa checalo de la pagina khalito. :-D , gracias adelantadas. :aplauso:

kahlito 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 :arriba: , fijate en 1024 x 768 que ahí hay menos por abajo.

Saludosss :adios:

the_max 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. :-D :arriba:

kahlito 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 :arriba:

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

Saludosss :adios:

the_max 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 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. :aplauso:

kahlito 11/11/2004 00:13

Bueno hombre me alegro que lo hayas resuelto tu solo :arriba: , así es como mejor se aprende ;-)

yodelsur 06/02/2008 17:42

Re: como centrar varias capas con tu code
 
Cita:

Iniciado por JavierB (Mensaje 402262)
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, :adios:

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!!!:arriba:

eban66 18/05/2010 10:39

Respuesta: ¿Como centrar una capa con Dreamweaver?
 
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


La zona horaria es GMT -6. Ahora son las 05:30.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2025, Jelsoft Enterprises Ltd.