Diseño CSS. Capas absolutas?
Hola,
Estoy empezando en esto del diseño con CSS.
Voy a crear un portal, donde el contenido de cada capa va a ser dinamico, es decir, podran administrar lso contenidos.
He estado mitrando muchos ejemplos de layout de css, con dos, tres columnas, etc.
Pero tnego una gran duda. Todos estos css, la posicion de las capas es relativa, floats, etc. SOn paginas que se restructuras solas segun la resolucion y todo eso.
Pero si yo quiero un layout como este <a href="http://www.clock-work.org/layout"> layout </a> y todo y ser los contenidos dinamicos no quieroq ue se restructure el diseño, es decir, que sea fijo,
vale posicionar todas las las layers con posiciones absolutas ?
osea asi
#lay1 {
position:absolute;
height:21px;
width:31px;
left:374px;
top:410px;
z-index:10;
}
#lay2{
position:absolute;
width: 800px;
height:60px;
left: 0px;
bottom:0px;
top: 814px;
background-color: #99CCCC;
}
o esto es como jugar a futbol con las manos?
alguien me puede aclarar esta duda existencial?
gracias ! ;)
meddle
siempre que se pueda hay que evitar las posiciones absolutas. en tu caso se puede evitar, pero deberas definir posiciones relativas y tamaños para todas las cajas, incluyendo lo mismo para una caja que las contenga a todas.
suerte
heman2
Muchas gracias Meddle, una cosita mas ...
La web tendria que estar validada por la W3C. COn posiciones absolutas se valida? o eso no tiene nada que ver con la validacion ... otras cosa, porque dices que hay que evitar las posiciones absolutas? (he mirado la web en Netsacpe, Opera, I6 y se ve en todas identicamente)
cuando dices que en mi caso se puede evitar, a qué te refieres? que puedo usar absolutas o no?
Es que he mirado muchisimos layouts de ejmplo y todos son con columas, pero en el caso de mi layout son 3 columnas pero dentro de cada columna hay otras capas que salen o entran de caja, no se si me explico, y no logro posicionarlo bien si no es con absolutas.
Porque con relativas, alineo la columna de la izquierda a la izquierda, la de la derecha a la derecha, pero la del centro .... ? se va a tomar por c....
I'm crazy locura
Help!!! y muchas gracias ;)
meddle
Heman2
La web tendria que estar validada por la W3C. COn posiciones absolutas se valida? o eso no tiene nada que ver con la validacion ...
no tiene nada que ver ;)
Heman2
otras cosa, porque dices que hay que evitar las posiciones absolutas? ... cuando dices que en mi caso se puede evitar, a qué te refieres? que puedo usar absolutas o no?
es mejor no usar absolute para no sacar los elementos de su flujo natural. en tu caso se puede hacer una mezcla entre relative/absolute (una opcion que uso ultimamente para evitar el uso de float)
Heman2
...pero en el caso de mi layout son 3 columnas pero dentro de cada columna hay otras capas que salen o entran de caja, no se si me explico, y no logro posicionarlo bien si no es con absolutas.
tu layout como te he dicho deberian ser bloques con posiciones relativas que incluyan bloques con posiciones absolutas (que tomas como punto de referencia el punto (0,0) del bloque padre, que esta en relative en la pagina.
Heman2
Porque con relativas, alineo la columna de la izquierda a la izquierda, la de la derecha a la derecha, pero la del centro .... ? se va a tomar por c....
los bloques deberian ser horizontales, no verticales. Es decir. Tienes un primer bloque (pos. rel) de tres capas, izq, centro, derecha (las tres en pos. abs., top:0 y left dependiendo, mas un width), luego otra capa debajo, con tres capas mas... etc.
heman2
Muchas gracias,
ahora me pondre a investigar a esto que me coemtas, tiene buena pinta
... te he enviado un mail con una cosa que quizas te interese ...
gracias de nuevo
ikgoru
meddle
se puede hacer una mezcla entre relative/absolute (una opcion que uso ultimamente para evitar el uso de float)
Hola meddle, puedes exponer un poco más esa manera de maquetación?
Llevo algún tiempo pensando que prescindir de los float me ahorraría problemas y veo que no soy el único, cuando he leido esto que comentas de combinar divs relativos con divs absolutos me he puesto a probar y no encuentro la manera de controlarlos a mi gusto. me explico:
El div contenedor si solo contiene divs no se "estira" de manera vertical al tamaño del contenido
Si no se las medidas verticales de los divs de dentro (por q se genera automáticamente) no puedo usar valores absolutos, porque se me puden solapar las capas.
en un principio estos dos son los mayores problemas que veo, por eso me gustaría saber un poco más de esa técnica de maquetación, posteo el ejemplo con el que he empezado a probar, que es lo que yo había entendido:
XHTML:
<div id="relative">
<div id="absolute">
Este es el div con posicion absoluta
</div>
</div>
CSS:
#relative {
position: relative;
top: 25px;
left: 25px;
width: 500px;
background: gold;
padding: 5px;
}
#absolute {
position: absolute;
top: 25px;
left: 25px;
width: 250px;
background: olive;
}
Un saludo.
meddle
ikgoru
Hola meddle, puedes exponer un poco más esa manera de maquetación?
ahora mismo no puedo, lo siento :( pero puedes mirar un ejemplo en la pagina del OFFF: http://www.offf.ws/
un buen weblog que habla de este truco es el de Dave Shea: http://www.mezzoblue.com/archives/2004/03/04/positioning_/
si tu problema es que "se estire" el fondo, lo arreglé combinando la tecnica de arriba con el truco de las falsas columnas: http://www.alistapart.com/articles/fauxcolumns/
suerte.
ikgoru
gracias meddle, ahora yo también ando liado, espero hecharle un vistazo esta tarde o a la noche.
Ya comentaré las cosas que valla viendo y no olvidemos que esto es un foro, las respuestas no tienen porque ser inmediatas, y muchas gracias por poner direcciones donde porder encontrar la solución. Es un gustazo compartir una comunidad con gente como tú.
Agur.