Ahora capas...
6 seguidores
¡GRACIAS!
Ya está resuelto.
Ahora, (esto se empieza a parecer a un exámen) me gustaría saber si hay alguna manera de que una capa se situe siempre centrada en la pantalla (centrada en lo ancho de la pantalla, no en lo alto).
Gracias de nuevo.
meddle
#capa {margin: auto; }
te aconsejo que leas tambien este fix para explorer: http://www.stilleye.com/projects/dhtml/marginfix/
Usuario desconocido
Perdona mi ignorancia, pero trabajo con Dreamweaver y no tengo ni idea de HTML, ¿dónde tengo que colocar ...{margin: auto; } ?. Lo he colocado al principio, después de <div id="Layer1" style="position:absolute; y no ha sucedido nada.
Lo del fix... parece que es lo que necesito... ¿sólo funcionaría en IE?.
Gracias.
kassel
ola se coloaca entre el head
y falta codigo mas o menos sería asi:
<code><STYLE TYPE="text/css">
#capa {margin: auto; }
</style></code>
y lugo en el div:
<code><div id="capa">
.
.
.
</div></code>
espero que te aclare4 aun asi ay mas maneras pero creo que esta es la que quieres
ola :D
meddle
como dijo kassel, pero asi:
<code>
<head>
<title>lo que sea</title>
<style type="text/css">
#capa {margin: auto;}
</style>
<script src="IEmarginFix.js" type="text/javascript"></script>
</code>
Si has leido la documentacion de la pagina de dave, veras que el script solo funcionara en IE porque es el unico navegador que no hace bien su trabajo de centrar horizontalmente. Los otros navegadores centraran bien sin necesidad del script, pero TODO se hace solo.
Usuario desconocido
Hola.
Puedes centrar una capa en horizontal sin necesidad de scripts, sólo con CSS. Un código de ejemplo sería este:
<html>
<head>
<title>Centrado</title>
<style type="text/css">
#Contenidos {position:absolute; top:0px; left:50%; width:760px; height:420px; margin-left:-380px; margin-top:0px; z-index:1}
</style>
</head>
<body>
<div id="Contenidos">Contenidos</div>
</body>
</html>
Lo más importante es que una vez le hayas asignado un ancho (760px en el ejemplo) deberás indicarle la mitad como margin-left (380px en el ejemplo).
Espero que te sirva de ayuda.
Un saludo.
---
Miguel Sánchez Pérez
<a href="http://www.miguelsanchez.com" target="_blank">www.miguelsanchez.com</a>
meddle
hola
para empezar, el ha pedido expresamente centrado horizontal y no vertical.
y esa tecnica, aunque valida en la mayoria de los casos, es arriesgada pues en algunos navegadores desplaza la capa fuera de la pantalla y no se puede leer el contenido. creo que ya hemos hablado de la tecnica aqui en dmstk antes.
cbp
puedes hacer lo siguiente:
<script>
var ancho_pantalla = parseInt(screen.width);
var ancho_capa = 800; // aquí pones el ancho de tu capa
var posicion_x = (ancho_pantalla - ancho_capa)/2;
document.writlen('<div id=Layer1 style="position:absolute;width:' + ancho_capa + ';left:' + posicion_x + ';">');
</script>
<!-- aquí pones el contenido de la capa -->
<!-- y después cierras el div -->
</div>
así te aseguras que funciona en todos los navegadores, o al menos en todos los que soporten javascript y tengan el objeto screen (que yo sepa, Explorer, Netscape y Mozilla, si alguien sabe si Opera y Firebird lo tienen...)
meddle
¿por que no nos dejamos de hacks y usamos el CSS como debe ser? leer mi primer comentario, anda porfi. :P
cbp
una pregunta meddle, si se hace cómo decías al principio, ¿hay que incluir un js específico para el IE, no? para el resto de navegadores no hace falta porque dices que lo hace automáticamente ¿y cual es el código que lleva ese js? yo he puesto el script de antes porque no sé cómo funciona el tuyo, pero si va bien la verdad es que queda más elegante tu solución ;)
meddle
leete el link de arriba (bueno esta cambiando la web, ahora es este link), lo explica todo (*) y el script se automatiza el mismo. No es mio, es de Dave Schontzler, experto y reconocido programador dhtml. Es el unico metodo que recomiendo para centrado horizontal.
* EDIT: ya no esta el articulo, solo el ejemplo. Como lo hizo para 13thparallel ahi va el articulo original donde explica como y por que usarlo: http://13thparallel.org/?issue=2002.04&title=margin_fix
El script debereis bajarlo de su web en: http://www.stilleye.com/temp/IEmarginFix.zip
cbp
¿y por qué es mejor usar este código que hacerlo directamente en la página? me refiero dejando de lado la limpieza o la elegancia del código. te pregunto porque pareces interesado en cierto tipo de programación que me resulta interesante, pero de la que no tengo casi idea :)
p.s.: cuando he terminado de escribir mi post he visto el tuyo editado, voy a leer el artículo
dirarck
Personalmente me gusta usar cada cosa para lo que es, no es que haya hecho muchas webs, es más soy principiante, pero yo que por mi parte he ido leyendo desde el principio para informarme, he podido darme cuenta de la potencia de CSS, en el caso del posicionamiento horizontal, deberias usar CSS convinado con el objeto que quieras centrar, en tu caso una capa, en http://tierradenomadas.com/ podrás encontrar información valiosa acerca del posicionamiento de capas, concretamente es este link el que te llevará al "tutorial" http://tierradenomadas.com/tw003.phtml. Espero que esto te sirva de ayuda. De alguna manera XHTML es el esqueleto de nuestra web, CSS la piel y Javascript el aparato locomotor que hace que podamos movernos. Espero que este símil esté bien hecho :P, en cualquier caso espero que alguien que lo tenga más claro pueda corregirme, asi lo tendremos claro todo.
andresca
Hola, soy nuevo en el foro, tengo varios conocimientos de HTML, JAVAScript, y otros..... pero me gustaria que me explicaran para que se utilizan las "tales" capas? :?:
Bueno, saludo.... :)
meddle
definicion cutre pero intuitiva: las capas son contenedores de elementos, que suelen actuar como un bloque, no como una linea.
dirarck
pos eso, extendiéndo lo que comenta el maestro meddle, las capas son contenedores, por lo que puedes tener en ellas, texto, otras capas, objetos flash, imagenes, etc etc etc. Para que te hagas una idea, la capa más general de todas, sería el documento en el que aplicas tu párrafos, tablas, y todos los tags html que se te puedan ocurrir ahora mismo (espero no equivocarmes en esta idea).
meddle
la capa mas general seria el body, no el documento, pero tiene propiedades propias, asi que no es exactamente lo mismo :P
cbp
y habría que decir también que las capas introducen el concepto de profundidad, ¿no? que permiten un apilamiento en el eje "z", además de un orden el "x" e "y" :)
Usuario desconocido
meddle
hola
para empezar, el ha pedido expresamente centrado horizontal y no vertical.
y esa tecnica, aunque valida en la mayoria de los casos, es arriesgada pues en algunos navegadores desplaza la capa fuera de la pantalla y no se puede leer el contenido. creo que ya hemos hablado de la tecnica aqui en dmstk antes.
Hola meddle.
¿Podrías indicarme en qué navegadores resulta problemática esta técnica?
<style type="text/css">
#Contenidos {position:absolute; top:0px; left:50%; width:760px; height:420px; margin-left:-380px; margin-top:0px; z-index:1}
</style>
Gracias y un saludo.
---
Miguel Sánchez Pérez
<a href="http://www.miguelsanchez.com" target="_blank">www.miguelsanchez.com</a>
Diotallevi
Hola a todos:
Yo casualmente utilizo el mismo código para centrar las capas que MiguelSánchez y sinceramente nunca he tenido problemas, a pesar de los comentarios de meddle.
Además esto te sirve tanto para centrar verticalmente y horizontalmente la capa, o sólo horizontalmente, dependiendo los valores que metas.
También es cierto que no llevo mucho tiempo en esto y que aunque yo no haya encontrado problemas puedan surgir con algún navegador con el que no haya trabajado.
Humildes saludos
meddle
como se explica en tierra de nomadas no funciona en NS4, Opera y quizas Konqueror. Lo malo no es que no se vea centrado, sino que no se puede leer el contenido puesto que desplaza la capa fuera de la pantalla.