Autor Tema: [Tuto] Centrar una capa  (Leído 1150 veces)

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
[Tuto] Centrar una capa
« en: 12 de Noviembre de 2009, 22:02:32 pm »
Mucha gente se come la cabeza para centrar una capa, como para mostrar mensajes.

En realidad es tan sencillo como hacer esto (con CSS):
1º Definir un ancho y alto (Ej: 100x100)
2º Usar margin-top y margin-left para restar la mitad del ancho alto (Ej: -50 -50 notad el "-")
3º MUY IMPORTANTE: Colocar position como ABSOLUTE, para que no dependa del elemento que lo contiene
4º (Opcional, recomendado): Establecer un z-index alto para que se superponga sobre el resto de elementos
Y ya esta!
Quedaria algo asi
Código: [Seleccionar]
<div style="width:100px;height:100px;margin-top:-50px;margin-left:-50px;position:absolute;z-index:1000;">HOLA, ESTOY CENTRADO</div>

Es muy sencillo ;), para cerlo mas dinamico, podeis ver este tuto
« Última modificación: 12 de Noviembre de 2009, 22:20:14 pm por westwest »

Comunidad PHPeros

[Tuto] Centrar una capa
« en: 12 de Noviembre de 2009, 22:02:32 pm »

Desconectado Focux

  • PHPero Master
  • ******
  • Mensajes: 1.010
  • Karma: 22
    • Ver Perfil
Re:[Tuto] Centrar una capa
« Respuesta #1 en: 12 de Noviembre de 2009, 22:07:17 pm »
Buen aporte, algunos de estos valores pueden usarse para codear un layout mediante divs.
Mixtiqueros.net

<?PHP
define
(_miNombre, &#39;Focux&#39;);
if(_miNombre == &#39;Focux&#39;): printf(&#39;%s es un programador avanzado&#39;, _miNombre); else: printf(&#39;Tu no eres %s&#39;, _miNombre); endif;
?>

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[Tuto] Centrar una capa
« Respuesta #2 en: 12 de Noviembre de 2009, 22:20:34 pm »
Gracias ;) acabo de añadir un tuto para acerlo "dinamicamente"

Desconectado Fedek

  • PHPerit@
  • *
  • Mensajes: 3
  • Karma: 0
  • Aprendiendo PHP
    • Ver Perfil
    • Fede Site
Re:[Tuto] Centrar una capa
« Respuesta #3 en: 02 de Diciembre de 2009, 18:15:04 pm »
Muchas gracias, pero no me sirvió para lo que estoy buscando.
Me gustaría saber si alguien sabe como escribir dibujando Div encima de una imágen de fondo de tabla (con la tabla centrada) sin que el texto del Div se descuadre.

El ejemplo lo tengo en mi web: www.fedegallery.es
La imágen de fondo de tabla no esta centrada, los textos estan dibujados por Div, pero si en ves de ponerla así, pongo la tabla centrada y hago los Divs los textos se descolocan de su sitio y no cuadran.

A ver si alguien consigue ayudarme, un saludo y gracias
Fedek

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[Tuto] Centrar una capa
« Respuesta #4 en: 02 de Diciembre de 2009, 18:25:36 pm »
Muchas gracias, pero no me sirvió para lo que estoy buscando.
Me gustaría saber si alguien sabe como escribir dibujando Div encima de una imágen de fondo de tabla (con la tabla centrada) sin que el texto del Div se descuadre.

El ejemplo lo tengo en mi web: www.fedegallery.es
La imágen de fondo de tabla no esta centrada, los textos estan dibujados por Div, pero si en ves de ponerla así, pongo la tabla centrada y hago los Divs los textos se descolocan de su sitio y no cuadran.

A ver si alguien consigue ayudarme, un saludo y gracias
Fedek

No entiendo a que te refieres, es que los divs no se dibujan para empezar...

Desconectado Fedek

  • PHPerit@
  • *
  • Mensajes: 3
  • Karma: 0
  • Aprendiendo PHP
    • Ver Perfil
    • Fede Site
Re:[Tuto] Centrar una capa
« Respuesta #5 en: 02 de Diciembre de 2009, 18:36:13 pm »
Perdona mi ignorancia pero no es que sepa mucho del tema, vine a este foro para aprender. Me equivoqué en lo que decía, me refería a un Div PA, en Dreamweaver (Insertar - Dibujar Div PA)

A ver si ahora me entiendes, un saludo y gracias.

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[Tuto] Centrar una capa
« Respuesta #6 en: 02 de Diciembre de 2009, 21:05:19 pm »
Sigo sin comprender, basarse en programas para hablar me desconcierta bastante...

Segun acabo de ver, es un div normal y corriente, con posicion absoluta

Lo que aria seria coger el fondo y ponerlo centrado usando este metodo (y div en vez de tablas) y cuadrar los div "a mano", el tema es la resolucion, pero se solucionaria ejecutando al cargar la pagina una funcion que coja el offsetLeft del fondo y lo sume al left de tus divs, los cuales debes calcular primero a mano.
He publicado en la seccion de JavaScript un tutorial de "offsets" que puedes consultar.