Posicionamiento de capas en la ventana

[harvey]

Tengo una serie de capas div con position:absolute; con las que genero un esquema. ¿Como hago para que el conjunto de ellas este centrado en una ventana del navegador?

En principio lo que he hecho es meterlas dentro de otro div con los siguientes atributos:

margin:auto;
position:relative;
height:100%;
width:960px;
z-index:50;

Y de esta manera aparece centrada. El problema es que quiero cambiar el height y el width de manera que se adapten al espacio que ocupa el contenido (todas esas capas con position:absolute) pero no sé como hacerlo.

[Knight_Rider]

Lo primero,.. esto es la sección de programación PHP no de diseño CSS La próxima vez, postea las preguntas en el lugar adecuado.

Y respondiendo a tu pregunta
HTML:

Código HTML:

<div id='centrado'>
   <div id='contenedor'>
      <div id='contenido1'>Aqui va el contenido numero 1<br/>
      </div>
      <div id='contenido2'>Contenido 2
      </div>
   </div>
</div> 

CSS:

Código:

#Centrado {
	position:relative;
	margin:auto; // Importante para el centrado!
	width:924px;// especificamos el ancho de lo que vamos a centrar
	top:0px; 
	min-height:500px; //especificamos el tamaño mínimo
	height: auto;
}
#Contenedor {
	position:absolute;
	left:180px; //defino el espacio en el que ubico el contenedor dentro de los 924px que se centran
	top:188px; // dejo un espacio arriba de 188px para colocar un head por ejemplo
	width:578px; /el contenedor mide de ancho 578px
	z-index:1;
	height: auto; //importante.. para que sea mas alto o menos en base al contenido de las otras capas....
}

El resto de Div's dado que las tienes como relativas y son hijas de Contenedor, irán relativas al orden en html y una debajo de otra pero dentro de contenedor, yo en mi caso, Contenedor lo he colocado en posición absoluta porque:

La capa Centrado tiene el el ancho de 924px así que puedo situar el Contenedor dentro de esta capa, y así por ejemplo,... Contenedor lo sitúo debajo de otras capas y a x distancia del menu lateral por ejemplo, en este caso, el contenedor ajustará tu contenido a la web aunque permanecerá centrada horizontalmente... si lo que buscas es un centrado de toda la web tanto vertical como horizontal, es otro tema...

[harvey]

Estoy trabajando con PHP y las dudas que podian estar teniendo eran de PHP por eso cuando he posteado no me he dado cuenta de que efectivamente no era la sección adecuada. Perdon.

En cuanto al código creo que no has entendido lo que quiero hacer. Olvida el tema de diseñar una web con cabecera y demás y centrar la página. De hecho incluso olvida el css que puse arriba. Verás tengo un esquema jerarquico realizado a base de divs cada una de las cuales tiene una posición fijada con position:absolute. El esquema (es decir el conjunto de todas estas capas) lo que pretendo es que se vea centrado en una ventana de navegador. Y ese es el problema que tengo: he conseguido incluso centrarlo porque las posiciones absolute las toma en referencia a la capa en la que esta contenido pero ese contenedor no adquiere el tamaño en relación al esquema sino que se queda arriba y le esquema sobresaliendole.

El contenedor tiene estos atributos:
background-color:#ffebc4;
margin:auto;
padding:10px;
position:relative;
height:100%;
width:960px;
z-index:50;

aunque el padding y el background-color los he puesto solo para ver la capa mientras pruebo a ver como lo hago. El height y el width solo estan por las mismas razones mientras no encuentre los valores que necesito (que se amolde al esquema). Con auto no lo hace.

[dashtrash]

Iniciado por harvey

problema que tengo: he conseguido incluso centrarlo porque las posiciones absolute las toma en referencia a la capa en la que esta contenido pero ese contenedor no adquiere el tamaño en relación al esquema

Lo cual es el comportamiento que deben tener los elementos con posicionamiento absoluto, ya que estan fuera del normal flow, y sus dimensiones no cuentan para calcular el tamaño del elemento contenedor.
Lo que buscas, simplemente, no es posible, al menos con CSS.Si usas posicionamiento absoluto, y quieres redimensionar el elemento padre segun el tamaño de los hijos, tendrías que, por javascript, calcular el tamaño que tiene que tener el elemento padre, comprobando la posición y dimensiones de cada uno de los hijos.

El esquema jerarquico qué es? Un árbol?

[harvey]

Iniciado por dashtrash

Lo cual es el comportamiento que deben tener los elementos con posicionamiento absoluto, ya que estan fuera del normal flow, y sus dimensiones no cuentan para calcular el tamaño del elemento contenedor.
Lo que buscas, simplemente, no es posible, al menos con CSS.Si usas posicionamiento absoluto, y quieres redimensionar el elemento padre segun el tamaño de los hijos, tendrías que, por javascript, calcular el tamaño que tiene que tener el elemento padre, comprobando la posición y dimensiones de cada uno de los hijos.

El esquema jerarquico qué es? Un árbol?

Un arbol genealógico. Entendería que ese fuera el comportamiento que debe tener si no fuera por el hecho de que todas las posciones absolutas las toma en relación no a la ventana sino a la posición donde se inserta el contenedor.

En cualquier caso, tiene que haber alguna manera de hacerlo con css, no es posible que yo necesite hacer eso y no haya sido previsto algo asi.

[pateketrueke]

Iniciado por harvey

En cualquier caso, tiene que haber alguna manera de hacerlo con css, no es posible que yo necesite hacer eso y no haya sido previsto algo asi.

Estás completamente mal, un árbol genealógico para empezar es un concepto gráfico que no puedes representar naturalmente con HTML y CSS, no es un documento per se.

Tu eres el que debe saber la tecnología con la que estás lidiando para ver si se adapta a tus necesidades o no, nadie puede estar previendo los caprichos de todo mundo.

Mientras sigas usando posicionamiento absoluto no resolverás nada, eso es todo.

Dicho concepto debes masticarlo bien para que lo entiendas, un elemento absoluto es aquel que no se mueve, y por ende sus coordenadas y dimensiones deben ser especificadas para que se ajusten de manera correcta.

Si buscas que estos elementos se ajusten o muevan deberás hacerlo con Javascript, no con CSS.

[harvey]

Iniciado por pateketrueke

Estás completamente mal, un árbol genealógico para empezar es un concepto gráfico que no puedes representar naturalmente con HTML y CSS, no es un documento per se.

Tu eres el que debe saber la tecnología con la que estás lidiando para ver si se adapta a tus necesidades o no, nadie puede estar previendo los caprichos de todo mundo.

Mientras sigas usando posicionamiento absoluto no resolverás nada, eso es todo.

Dicho concepto debes masticarlo bien para que lo entiendas, un elemento absoluto es aquel que no se mueve, y por ende sus coordenadas y dimensiones deben ser especificadas para que se ajusten de manera correcta.

Si buscas que estos elementos se ajusten o muevan deberás hacerlo con Javascript, no con CSS.

No me gusta el tono de tu post, porque es grosero, en especial la parte de "los caprichos". Por otro lado permiteme cuestionar el funcionamiento de las capas y el css y no creerme las cosas a pies juntilla.

El código que he hecho genera un arbol genealógico con css y php en función de una base de datos comprendiendo cualquier número de generaciones y él unico problema que tengo es centrar dicho arbol. Es más, como dije antes incluso consigo centrar el arbol pero hace una chapuza con las capas que ni siquiera tendria que ver puesto dichas capas no requieren color pero como no me gustan las chapuzas intento solucionarlo. Si no me pongo tikismikis incluso tengo un resultado decente (pero no perfecto que es lo que busco) sin usar dicha chapuza.

En serio, tu post no me soluciona nada y me sobra mucho.

[pateketrueke]

¡Pues claro que mi post no soluciona nada, y esa era la intención!

¿Acaso esperabas una trozo de código mágico para solucionar tu problema de sentido común?

La verdad es que no hay mucho que agregar, que para empezar posteaste en el foro incorrecto, así que debes atenerte a las respuestas fuera de lugar.

Finalmente tu problema sigue siendo de CSS y nada que ver con el foro, así que mientras no comprendas las normas y limitantes de las hojas de estilo no vas a llegar a ningún lado.




PDTA: Originalmente es tu comentario el que está de sobra, y por ende el mío.

Iniciado por harvey

En cualquier caso, tiene que haber alguna manera de hacerlo con css, no es posible que yo necesite hacer eso y no haya sido previsto algo asi.

Vamos, ¿quieres que los patos le disparan a las escopetas?

Porque ese comentario arremete contra todo un consorcio que se encarga de definir estándares, que tu no te adaptes a ellos no te da derecho de tachar como mediocre su trabajo, sólo por no haber pensado en tu problema.

Que gracioso.

[harvey]

Yo no he usado la palabra mediocre en ningun momento simplemente creo que el funcionamiento de las capas y el css tiene limitaciones que no debería tener.

Y si, ciertamente me equivoque de foro, cosa que admiti y por la cual me disculpé. Más no puedo hacer que esperar que un moderador ponga el post donde corresponde.

¿Crees que mi error excusa tu falta de educación?

[pateketrueke]

Iniciado por harvey

¿Crees que mi error excusa tu falta de educación?

No hacen falta excusas para expresarse libremente, no necesito tu permiso, gracias.

El issue que tienes pensar que "css tiene limitaciones que no debería tener", si eso es lo que te detiene entonces escribe un paper a la W3C y pide de favor que piensen en tus necesidades, explicando lo que hicieron mal y como deberían solucionarlo.

Si crees que algo está mal entonces has lo posible por cambiarlo sin afectar a todos.

Pero piensa que tu problema es nada comparado a los del mundo.

Los estándares ayudan a mantener estables las cosas.

¿Que le vamos a hacer?

[harvey]

Cierto, tienes razón, eres libre de ser un impertinente sin educación.

[Knight_Rider]

flipo y llevo rato partiendome la caja... toma al mundo del internet...

Entre el árbol genealogico... que ya me parto que hasta me escuchan los vecinos... y lo de que el CSS tiene limitaciones que no debería...

Mira.. el CSS no tiene limitacion alguna,... las limitaciones te las pones tu intentando contener agua en un lapiz y esperando escribir con un vaso...

[dashtrash]

Iniciado por harvey

Entendería que ese fuera el comportamiento que debe tener si no fuera por el hecho de que todas las posciones absolutas las toma en relación no a la ventana sino a la posición donde se inserta el contenedor.

Lo que es su comportamiento normal, según las especificaciones CSS.Más exactamente, los elementos con posicionamiento absoluto toman su referencia del primer padre con posicionamiento relativo, o, en su defecto, de la "ventana" (tag body), el cual, no es más que otro contenedor.

Iniciado por harvey

En cualquier caso, tiene que haber alguna manera de hacerlo con css, no es posible que yo necesite hacer eso y no haya sido previsto algo asi.

O a lo mejor, la gente que hace css conoce muy bien su trabajo, y lo que crees que es "falta de previsión", es en realidad, falta de comprensión del problema, por tu parte.
Piensa sólo un detalle.Sólo este: si los elementos en posicionamiento absoluto, contaran como parte de las dimensiones del objeto contenedor, exactamente, cómo se colocarían objetos a la izquierda, o arriba del contenedor.....si inmediatamente el contenedor crecería para albergarlos?

Tsk..hay problemas complejos..Cuando uno cree que gente *buena* no ha "previsto" algo...lo más posible es que uno no entienda el problema...

[harvey]

dashtrash precisamente por eso dije que no es posible que no se haya previsto, obviamente se me escapa algo en el posicionamiento y obviamente no acabo de entender como hacerlo. Por eso pregunto en este post.

En cuanto a lo que me dices de cómo se pondrian objetos a la izquierda o en la parte superior de su contenedor si este creceria para abarcarlos... es que yo hasta el momento no me he encontrado con la necesidad de hacer algo así: si tengo un objeto encima o a la izquierda de otro lo que hago es contener ambos en otro.

En cualquier caso voy a volver a revisar el funcionamiento del posicionamiento.

Gracias dashtrash.

[masterpuppet]

Tema movido desde PHP a CSS

[pzin]

No estoy en un ordenador, y leí rápido por encima. Pero yo creo que el problema es que te estás creando tú mismo el problema usando cosas por conveniencia, pero que no se deberían de usar para tales fines.
Y esto es algo que siempre pasa cuando se hace posiciona de forma absoluta, que por hacerlo más fácil primero, luego hay que explicar su funcionamiento y hacer entender que esa no era la manera de hacerlo.