malditas capas!!! no aparecen centradass!!

Snake nS · #1 (**permalink**) 01/06/2005, 12:41

Bueno estoy maquetando con capas en un archivo externo, digamos que pase las tablas a capas en dreamweaver y ahora tomo las referencias del codigo.

El problema radica en que las capas salen un poco mas hacia la izquierda que hacia la derecha (en el dreamweaver es innotorio), cosa que cuando tenia las tablas no pasaba... (aparecian centradas perfectamente)

Y otra duda que tengo es como escribir en una celda con un valor vertical "medio" no hablo de alineacion.

Saludos.

SiR.CARAJ0DIDA · #2 (**permalink**) 01/06/2005, 16:30

al parecer las capas se centran con margin:auto, pero solo me funciona usando doctype estricto.

lo de escribir en la celda no te entendi muy bien pero creo que buscas vertical-align:middle

Snake nS · #3 (**permalink**) 01/06/2005, 21:22

que capas del ***** no hay forma..... ahora entiendo porque la gente maqueta con tablas...

a que te referis con doctype estricto???

Lo de vertical-align:middle no me funco.....

Snake nS · #4 (**permalink**) 01/06/2005, 21:58

Bueno pude centrar una capa con esto :

position: relative;
align:center;

Sin embargo dreamweaver lo visualisa mal.

ahora que hago en una botonera por ejemplo dios!!! que son muchas capas una al lado del otrooooooooooooooooooooo............ con una tabla compuesta de celdas es sumamente facil porque centas la tabla y listo, pero con varias capas como percha haces???

kemie · #5 (**permalink**) 02/06/2005, 01:51

Snake, si nos pones el codigo que estas usando es mas facil ayudarte...

SiR.CARAJ0DIDA · #6 (**permalink**) 02/06/2005, 10:30

no existe la propiedad align:center, en todo caso text-align:center y eso centra texto.
para poner capas una al lado de la otra usa "display:inline"

Snake nS · #7 (**permalink**) 02/06/2005, 11:40

Bueno vamos por partes, me esta quemando la cabesa estas capas del ***

Archivo html:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
<link href="estilo1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="arriba1" class="arriba1"></div>
<div id="arriba2" class="arriba2"></div>
</body>
</html>

Snake nS · #8 (**permalink**) 02/06/2005, 11:43

Aqui el archivo de estilos:

Código:

.arriba1{
    margin-left: auto;
    margin-right: auto;
    width:779px;
    height:15px;
    z-index: 1;
    top: 0px;
    border: 1px none #000000;
    background-image: url(../Images/design_01.gif);
    }
    .arriba2{
    margin-left: auto;
    margin-right: auto;
    width:779px;
    height:59px;
    z-index: 2;
    left: 100px;
    top: 15px;
    border: 1px none #000000;
    background-image: url(../Images/design_02.gif);
    }

No se como colocar una tabla con width de 100px justo debajo de arriba2 que comiense del lado izquierdo, si utiliso una pocicion absoluta con un valor de left 109 px al abrir el archivo directamente el valor cambia a 100.......

Durgeoble · #9 (**permalink**) 02/06/2005, 12:32

Me imagino que te referiras a una capa de 100px para un menu ¿cierto? bien supongo que tu problema es que al meterlo te queda centrado en la pagina, esto es normal.

Las capas deben tomar un pnto de referencia, este punto puede ser la pagina(tu caso) o el contenedor de la pagina(puesto para evitar ese tipo de problemas), yo te recomiendo que para todo el contenido de la pagina pongas un unico div que la contenga (asi podras usarlo como ancla para el resto de elementos) de forma qe la pagina quedaria asi:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
<link href="estilo1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="pagina" class="pagina">
<div id="arriba1" class="arriba1"></div>
<div id="arriba2" class="arriba2"></div>
</div> </body>
</html>

El archivo css te quedaria asi:

Código:

 
.pagina{
    margin-left: auto;
    margin-right: auto;
    width:779px;
    z-index: 1;
    top: 0px;
    border: none 
    }
.arriba1{
    width:779px;
    height:15px;
    z-index: 1;
    top: 0px;
    left: opx;
    border: 1px none #000000;
    background-image: url(../Images/design_01.gif);
    }
    .arriba2{
    width:779px;
    height:59px;
    z-index: 2;
    left: 0px;
    top: 15px;
    border: 1px none #000000;
    background-image: url(../Images/design_02.gif);
    }
.menu {
    width:100px;
    left: 0px;
    }

Ya me contaras si asi se resuelve ese pequeño problema.
Por supuesto este es solo uno de los muchos metodos existentes, investiga ;)

Snake nS · #10 (**permalink**) 02/06/2005, 13:02

CHABON TE AMOO habia provado todo, pero nunca quedaba exactamente alineada debajo de la otra, ahora la capa pagina, es el ancla que contendra a todas las demas, mientras mas capas agregue la misma se estira hacia abajo?? podrias explicarme el funcionamiento??

En el menu ahora tengo un problema, es un menu horisontal, y no se como agregar la siguiente capa y que quede justo al lado de la otra.....

Durgeoble · #11 (**permalink**) 02/06/2005, 13:41

Es sencillo, las capas se ajustan por defecto al contenido a no ser que especifiques el tamaño previamente.

Si ajustas el ancho la capa cortara el texto donde corresponda estirandose hacia abajo, de haber una imagen(por ejemplo puede ser otra cosa) que superara el ancho de la capa pueden suceder varias cosas(depende de como este configurado por defecto o como lo configures tu)

Visible: la imagen se vera sobresaliendo de la capa como si fuera un postit que apegaras a un lateral del monitor (para que te hagas una idea del efecto)
hidden: la imagen quedara cortada por la capa y no se vera mas alla (como una ventana)
scroll: aparecera una barra de desplazamiento que te permitira desplazar el contenido de la capa para poder verlo en su totalidad (como cuando escribes mucho aqui o ponen un codigo muy largo)
auto: cogera los valores definidos por defecto en el navegador (de entre los anteriores)

En el ejemplo que te he puesto defines el ancho de la capa por lo que el texto en general no superara ese ancho sino que se adaptara al contenedor en el que se encuentre.
Las capas por defecto tambien son bloques y, de no definir posicion, se situan unas debajo de otras no es aconsejable dejarlas a su libre albedrio si no quieres tener efectos no deseados (por supuesto puedes dejarlas sin mas si los valores por defecto son los que te interesan.
Para situar capas unas al lado de otras puedes hacerlo definiendo su posicion o bien usando la propiedad float.

Para situar las capas puedes hacerlo de forma absoluta "absolute"(a la pagina) relativa "relative"(tomara como referencia el elemento que la contiene) estatica "static"(ignorara los valores de posicion que le pongas y aparecera segun la hayas situado en el codigo eso si respetando los margenes que hayas definido) o fija "fixed" (esta ultima mantendra la capa en su sitio sin moverse aunque hagas scroll con la pantalla, ideal para menus que quieras que se vean siempre o para que el membrete se vea mientras se desplaza la pagina)

De los tipos de posicion que te he puesto antes solo static afecta a otros elementos, el resto dejan la capa en una especie de limbo flotante por encima de otros elementos o por debajo de ellos (segun su z-index).

Para mas informacion deberias dirigirte a w3c.org y buscar el manual de css en español.

Snake nS · #12 (**permalink**) 02/06/2005, 18:22

Muchas gracias por haberte tomado tu tiempo explicandome, de las pociciones tenia idea pero como un gil jajaja estaba usando pociciones absolutas y me olvide de guardar el css por eso en el navegador lo visualisaba mal.

Lo que no logro entender es como:

.pagina{

logra contener a todas las capas.... cual es la propiedad, o con el echo de llamarse pagina crea una capa contenedora??

Durgeoble · #13 (**permalink**) 02/06/2005, 23:12

ninguna puedes llamarla como te de la gana .eixborrinueciotina si quieres, el efecto es el mismo pero .pagina es bastante explicito en su funcion a la hora de hacer modificaciones