Centrar pag en Dreamweaver MX
Hola gente! Estuve buscando x un montón d foros y la verdad k nadie me supo dcir como hacer para centrar una página con una tabla contenedora principal y más tablas adentro d esa misma y k cuando uno cambie de resolusión siempre se vea centrada en la pantalla.
Busqué en un montón d lados y no me dicen exactamente como hacerlo, admás yo quiero k la web quede centrada vertical y horizontalmente y en muchos lados encontré como hacerlo horizontalmente pero no verticalmente.
Acá les dejo un ejemplo de una página que si esta centrada horizontalmente y verticalmente en cualquier resolusión: www.rinarenuar.com.ar
Espero k me ayuden a solucionar este problema asi puedo subir la page lo más rápido posible... ya está terminada pero le falta ese detalle!
Muchisimas gracias de antemano!!!
Busqué en un montón d lados y no me dicen exactamente como hacerlo, admás yo quiero k la web quede centrada vertical y horizontalmente y en muchos lados encontré como hacerlo horizontalmente pero no verticalmente.
Acá les dejo un ejemplo de una página que si esta centrada horizontalmente y verticalmente en cualquier resolusión: www.rinarenuar.com.ar
Espero k me ayuden a solucionar este problema asi puedo subir la page lo más rápido posible... ya está terminada pero le falta ese detalle!
Muchisimas gracias de antemano!!!
Usuario Registrado
Fecha de Ingreso: ago-08
Mensajes: 11
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: Centrar pag en Dreamweaver MX
a la tabla contenedora tenes que darle un ancho fijo, ej: 900px; y aplicarle un margin automatico, algo así
<table id="tabla_contenedora">
bla bla
</table>
el estilo CSS podria ser...
#tabla_contenedora {
width: 900px
margin: 0 auto 0 auto;
text-align: center;
}
De esta forma la tabla va a tomar los margenes de los costados como automatico, todo lo que "sobre" de los 900px de la tabla en si se va a repartir a los lados... además, como muchas veces pasa, le ponemos un text-align para que algunos navegadores que no toman el automatico del margin nos centren la tabla (ojo, porque este center posiblemente afecte a los elementos dentro de la tabla, entonces a cada subtabla vas a tener que ponerle un text-align: left
En cuanto a lo de centrarla verticalmente, tenes que usar JavaScript (para que sea perfecto), o podes darle un centrado usando margenes porcentuales, pero no es perfecto...
Espero te sirva!!
<table id="tabla_contenedora">
bla bla
</table>
el estilo CSS podria ser...
#tabla_contenedora {
width: 900px
margin: 0 auto 0 auto;
text-align: center;
}
De esta forma la tabla va a tomar los margenes de los costados como automatico, todo lo que "sobre" de los 900px de la tabla en si se va a repartir a los lados... además, como muchas veces pasa, le ponemos un text-align para que algunos navegadores que no toman el automatico del margin nos centren la tabla (ojo, porque este center posiblemente afecte a los elementos dentro de la tabla, entonces a cada subtabla vas a tener que ponerle un text-align: left
En cuanto a lo de centrarla verticalmente, tenes que usar JavaScript (para que sea perfecto), o podes darle un centrado usando margenes porcentuales, pero no es perfecto...
Espero te sirva!!
Usuario Avanzado
Fecha de Ingreso: may-03
Mensajes: 2,099
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: Centrar pag en Dreamweaver MX
grax fulano x la respuesta...
No puede centrarla... ¿Cómo se hace con Javascript? Probé los márgenes porcentuales en "propiedades de página" pero nunca se centra perfecto... Tiene k haber algún método xke ya tngo la pág lista y no puedo centrarla...
Ahora voy a copiar el código de la pág para ver si ayudo un poco más...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="swfobject.js"></script>
<title>..:: Noe.Luz by Patricia García ::.. << Home >></title>
<style type="text/css">
<!--
body {
background-image: url(../Background.png);
margin-left: 125px;
margin-top: 50px;
margin-right: 100px;
margin-bottom: 0px;
}
.Estilo1 {color: #000000}
a:link {
color: #990000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: underline;
color: #990000;
}
a:active {
text-decoration: none;
color: #990000;
}
-->
</style>
</head>
<body>
<table width="200" border="0" bgcolor="#FEDED3">
<tr bgcolor="#FEDED3">
<td height="498" align="left" valign="top"><table width="200" border="0" bgcolor="#FEDED3">
<tr>
<td><img src="../Noe.Luz%20Logo.jpg" width="243" height="132"></td>
</tr>
<tr>
<td><img src="Text-Home.jpg" width="263" height="353"></td>
</tr>
</table></td>
<td height="498" align="left" valign="top"><table width="200" border="0">
<tr>
<td align="left" valign="top"><div align="right"><img src="../Dire.jpg" width="205" height="37" border="0" usemap="#Map"></div></td>
</tr>
<tr>
<td height="393" align="left" valign="top"><div align="center">
<div id="flashcontent1">
<div align="center">Para visualizar correctamente este sitio
se necesita disponer de Flash Player y habilitar el contenido bloqueado de
Internet Explorer, el mismo se activa desde
el recuadro amarillo que aparece bajo la barra de direcciones. <code>noscript</code>
Se puede habilitar el contenido dando click <a href="swfobject.html?detectflash=false">aquí</a></div>
</div></td>
<script type="text/javascript">
var so = new SWFObject("homeflash.swf", "homeflash", "500", "388", "6", "#FEDED3");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
so.write("flashcontent1");
</script>
</tr>
<tr>
<td><div align="center"><img src="MenuHome.jpg" width="489" height="54" border="0" usemap="#Map2"></div></td>
</tr>
</table></td>
</tr>
</table>
<table width="774" border="0">
<tr>
<td width="768" colspan="2"><div align="center"><span class="Estilo1"><font size="1" face="Tahoma">Para visualizar correctamente este sitio debe tener instalado <a href="http://www.adobe.com/shockwave/downl...d=BUIGP">Flash Player</a> - Diseño Web: <a href="mailto:revford20587@hotmail.com">Emiliano Vallaro</a> - © Copyright 2008 Noe.Luz - Todos los derechos reservados </font></span></div></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="82,3,201,16" href="mailto:noe.luz@hotmail.com" alt="noe.luz@hotmail.com">
</map>
<map name="Map2">
<area shape="rect" coords="219,18,272,35" href="../Fotos/Fotos.htm" alt="Fotos">
<area shape="poly" coords="95,20,105,20,111,20,116,17,123,17,130,18,1 34,21,141,24,143,26,147,19,154,19,162,21,171,22,17 9,23,190,22,195,26,195,31,190,37,181,39,174,40,157 ,35,146,35,135,35,111,35,108,41,100,41,90,41,85,38 ,89,29" href="../Quiensoy/Quiensoy.htm" alt="¿Quién Soy?">
<area shape="poly" coords="321,17,333,17,349,18,361,20,371,18,380,18, 386,23,394,22,396,18,406,18,415,18,425,19,435,21,4 47,18,453,20,459,21,463,13,471,18,471,29,471,38,44 9,38,435,42,421,35,399,36,332,33,303,34,296,28,305 ,21,298,25,311,19" href="../AsisInt/AsisInt.htm" alt="Asistencia Integral">
</map>
</body>
</html>
Gracias x ayudarme! Saludos!!!
No puede centrarla... ¿Cómo se hace con Javascript? Probé los márgenes porcentuales en "propiedades de página" pero nunca se centra perfecto... Tiene k haber algún método xke ya tngo la pág lista y no puedo centrarla...
Ahora voy a copiar el código de la pág para ver si ayudo un poco más...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="swfobject.js"></script>
<title>..:: Noe.Luz by Patricia García ::.. << Home >></title>
<style type="text/css">
<!--
body {
background-image: url(../Background.png);
margin-left: 125px;
margin-top: 50px;
margin-right: 100px;
margin-bottom: 0px;
}
.Estilo1 {color: #000000}
a:link {
color: #990000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: underline;
color: #990000;
}
a:active {
text-decoration: none;
color: #990000;
}
-->
</style>
</head>
<body>
<table width="200" border="0" bgcolor="#FEDED3">
<tr bgcolor="#FEDED3">
<td height="498" align="left" valign="top"><table width="200" border="0" bgcolor="#FEDED3">
<tr>
<td><img src="../Noe.Luz%20Logo.jpg" width="243" height="132"></td>
</tr>
<tr>
<td><img src="Text-Home.jpg" width="263" height="353"></td>
</tr>
</table></td>
<td height="498" align="left" valign="top"><table width="200" border="0">
<tr>
<td align="left" valign="top"><div align="right"><img src="../Dire.jpg" width="205" height="37" border="0" usemap="#Map"></div></td>
</tr>
<tr>
<td height="393" align="left" valign="top"><div align="center">
<div id="flashcontent1">
<div align="center">Para visualizar correctamente este sitio
se necesita disponer de Flash Player y habilitar el contenido bloqueado de
Internet Explorer, el mismo se activa desde
el recuadro amarillo que aparece bajo la barra de direcciones. <code>noscript</code>
Se puede habilitar el contenido dando click <a href="swfobject.html?detectflash=false">aquí</a></div>
</div></td>
<script type="text/javascript">
var so = new SWFObject("homeflash.swf", "homeflash", "500", "388", "6", "#FEDED3");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
so.write("flashcontent1");
</script>
</tr>
<tr>
<td><div align="center"><img src="MenuHome.jpg" width="489" height="54" border="0" usemap="#Map2"></div></td>
</tr>
</table></td>
</tr>
</table>
<table width="774" border="0">
<tr>
<td width="768" colspan="2"><div align="center"><span class="Estilo1"><font size="1" face="Tahoma">Para visualizar correctamente este sitio debe tener instalado <a href="http://www.adobe.com/shockwave/downl...d=BUIGP">Flash Player</a> - Diseño Web: <a href="mailto:revford20587@hotmail.com">Emiliano Vallaro</a> - © Copyright 2008 Noe.Luz - Todos los derechos reservados </font></span></div></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="82,3,201,16" href="mailto:noe.luz@hotmail.com" alt="noe.luz@hotmail.com">
</map>
<map name="Map2">
<area shape="rect" coords="219,18,272,35" href="../Fotos/Fotos.htm" alt="Fotos">
<area shape="poly" coords="95,20,105,20,111,20,116,17,123,17,130,18,1 34,21,141,24,143,26,147,19,154,19,162,21,171,22,17 9,23,190,22,195,26,195,31,190,37,181,39,174,40,157 ,35,146,35,135,35,111,35,108,41,100,41,90,41,85,38 ,89,29" href="../Quiensoy/Quiensoy.htm" alt="¿Quién Soy?">
<area shape="poly" coords="321,17,333,17,349,18,361,20,371,18,380,18, 386,23,394,22,396,18,406,18,415,18,425,19,435,21,4 47,18,453,20,459,21,463,13,471,18,471,29,471,38,44 9,38,435,42,421,35,399,36,332,33,303,34,296,28,305 ,21,298,25,311,19" href="../AsisInt/AsisInt.htm" alt="Asistencia Integral">
</map>
</body>
</html>
Gracias x ayudarme! Saludos!!!
Usuario Registrado
Fecha de Ingreso: ago-08
Mensajes: 11
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: Centrar pag en Dreamweaver MX
Lo que uso yo (y lo que usa la página que ponés de ejemplo) es establecer un ancho fijo y ubicarla con un left de 50%.
POR EJEMPLO: suponiendo que el div contenedor tiene un width de 700px, le ponés un left de 50% para que lo ubique horizontalmente en la mitad de la pantalla, y luego un margin-left de la mitad del ancho (en este caso 350px), para que la centre horizontalmente sin importar la resolución.
Lo mismo, evidentemente, para centrarla verticalmente: le especificás un height, un margin-top de la mitad y un top de 50%.
Cabe aclarar que para que funcione correctamente debe tener un position:absolute.
POR EJEMPLO: suponiendo que el div contenedor tiene un width de 700px, le ponés un left de 50% para que lo ubique horizontalmente en la mitad de la pantalla, y luego un margin-left de la mitad del ancho (en este caso 350px), para que la centre horizontalmente sin importar la resolución.
Lo mismo, evidentemente, para centrarla verticalmente: le especificás un height, un margin-top de la mitad y un top de 50%.
Cabe aclarar que para que funcione correctamente debe tener un position:absolute.
__________________
pinicio.com.ar
pinicio.com.ar
Usuario Normal
Fecha de Ingreso: nov-03
Edad: 29
Mensajes: 271
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: Centrar pag en Dreamweaver MX
probé cn lo k me dijeron y no sale
necesito ayuda gente!
spero k alguien me salve... arriba está el código para k lo vean bm y me digan dnd modificar para k se centre la pag
muchas grax d ante mano como 100pre =)
necesito ayuda gente!
spero k alguien me salve... arriba está el código para k lo vean bm y me digan dnd modificar para k se centre la pag
muchas grax d ante mano como 100pre =)
Usuario Registrado
Fecha de Ingreso: ago-08
Mensajes: 11
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: Centrar pag en Dreamweaver MX
Creá un div que envuelva la tabla. Es decir:
y después agregá este estilo:
PD: no hace falta que abras un tema nuevo
Código:
<div id="container"> <table width="780" bgcolor="#FEDED3"> blabla </table> </div>
Código:
#container {
position:absolute;
width:780px;
height:530px;
top:50%;
left:50%;
margin-left:-390px;
margin-top:-300px;
}
__________________
pinicio.com.ar
pinicio.com.ar
Usuario Normal
Fecha de Ingreso: nov-03
Edad: 29
Mensajes: 271
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: Centrar pag en Dreamweaver MX
Muchas grax r_bradbury!
Lo probé y me funcó d 10
y perdon x abrir otro tema...
soy nuevo en esto d los foros y x eso lo hice
Bueno ya está cerrado este tema xke ya pude solucionar el problema
ahora si... ni idea d como cerrarlo, no sé si lo tngo k hacer yo o un moderador
disculpen mi ignorancia y muchas grax
Lo probé y me funcó d 10
y perdon x abrir otro tema...
soy nuevo en esto d los foros y x eso lo hice
Bueno ya está cerrado este tema xke ya pude solucionar el problema
ahora si... ni idea d como cerrarlo, no sé si lo tngo k hacer yo o un moderador
disculpen mi ignorancia y muchas grax
Usuario Registrado
Fecha de Ingreso: ago-08
Mensajes: 11
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: Centrar pag en Dreamweaver MX
los foros los cierran los moderadores, pero igual los temas solucionados suelen no cerrarse, por si alguien tiene otra duda sobre este tema, habiendo encontrado la discucion por un buscador o en el foro, puede añadir su pregunta o duda, los temas se cierran cuando violan reglas del foro, o cuando son temas viejos y usuarios los reviven sin añadir ningun valor a su comentario o una duda y pregunta
Super Moderador
Fecha de Ingreso: dic-03
Edad: 24
Mensajes: 5,910
Gracias dadas: 0
Agradecido 3 veces en 3 Mensajes
Re: Centrar pag en Dreamweaver MX
tampoco mandes privados para que te demos soluciones :s, si estoy conectado y tengo la solucion a tu problema la voy a escribir en el topico que abriste...
Usuario Avanzado
Fecha de Ingreso: may-03
Mensajes: 2,099
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
| Herramientas | Buscar en Tema |
| Desplegado | |
Mode Lineal
|
| Tema | Autor | Foro | Respuestas | Último mensaje |
| Centrar página en Visual Studio 2008 | AMT9281 | Webmasters | 2 | 24-may-2009 23:24 |
| Centrar pagina HTML con Marcos | mcarnevali | Webmasters | 15 | 04-jul-2008 13:31 |
| Centrar contenido de div | Luciano_16 | Webmasters | 4 | 13-nov-2007 16:59 |
| Centrar swf | elocofede | Webmasters | 21 | 29-dic-2006 23:00 |
| Centrar paginas en dreamwever | fishoa | Webmasters | 0 | 23-oct-2005 00:00 |
La franja horaria es GMT -3. Ahora son las 05:22.
