problemas con capa rebelde y CSS ...
Bueno, ya sé que la última vez me sacasteis los colores, pero como dice el dicho, "el hombre es el único animal que tropieza 3 veces en la mísma piedra", pos aquí voy...
tengo una capa (div) con otras 3 capas dentro, el problema es que la capa esta se me mueve hacia abajo con todas ellas dentro y se me descuadra la web que estoy haciendo.
La web se compone de 3 divs en paralelo, y el tercero acabando por la derecha, se me mueve hacia abajo, cuando antes no lo hacía.
Os dejo parte del codigo
-----------------------------// CSS
#right_box {
position: absolute;
width: 350px;
height: 580px;
margin-left: 400px;
margin-top: 0px;
padding-top: 0px;
z-index: 1;
}
#right_up {
position: relative;
background-image: url(imagenes/muneca.jpg);
background-repeat: no-repeat;
background-position: left top;
border-left-width: 1px;
border-left-style: dashed;
border-left-color: #018a8a;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #018a8a;
width: 350px;
height: 450px;
margin-left: 0px;
margin-top: 0px;
z-index: 4;
}
#right_middle {
position: relative;
margin-left: 0px;
margin-top: 0px;
width: 350px;
z-index: 4;
}
#right_down {
position: relative;
margin-left: 0px;
margin-top: 0px;
width: 350px;
z-index: 4;
}
--------------------------------------------// HTML
<body>
<div id="left_box"></div>
<div id="center_box">
<div id="center_up"></div>
<div id="center_middle">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like
</div>
<div id="center_down">abajo</div>
</div>
<div id="right_box">
<div id="right_up"></div>
<div id="right_middle">hola</div>
<div id="right_down">hola</div>
</div>
</body>
--------------------------------// FIN DE CODIGOS
Bueno a ver si me ayudais un poquillo que estoy algo verde en CSS.
GRACIAS!
:)
txuma Plus
LazyRoy
aunque si un día de estos vuelvo por aqui dando el coñazo con el css no me solteis los pitbulls eh??...;)
Al revés, te ayudaremos encantado
lazyroy
Gracias txuma!! he pillao la idea, aunque si un día de estos vuelvo por aqui dando el coñazo con el css no me solteis los pitbulls eh??...
gracias de nuevo!
;)
txuma Plus
A ver:
position:absolute posiciona un contenedor (o una capa, como prefieres llamarla) tomando como punto de referencia la esquina superior izquierda del contenedor en el que está metido.
Ejemplo.
<code>
<body>
<div id="ejemplo" style="position:absolute; top: 100px; left: 150px">
Aquí el contenido
</div>
</body>
</code>
En este caso, la capa 'ejemplo' esta dentro del contenedor body, y por tanto se posicionará en las coordenadas 100, 150 (100 desde arriba y 150 desde la izquierda. Recuerda que la coordenada 0,0 es la esquina superior izquierda)
position:relative toma como punto de referencia el punto donde estás insertando la capa.
Espero que así lo tengas más claro. Si no, tendríamos que pasar el modo 'gráfico' :)
lazyroy
mmmhhh... gracias por responder, pero no sé, no lo cojo bien, es que tengo un contenedor con position:relative; y en cambio margin-top:0px; y si me ha funcionao, no sé si es que es por la posición que es relative o lo qué... Estoy un poco confuso, si puedes comentarme algo al respecto lo agradecería...
UN SALUDO
;)
txuma Plus
Lazy, margin-top define el margen que tiene que dejar la caja por encima. top define un punto exacto de colocación, es decir, pornerlo en top: 0 significa que vas a poner ese bloque en la parte superior del contenedor en el que esté situado.
¿Me he explicado bien (me da que no)?
lazyroy
ups!!
txuma he cambiado el margin-top: 0px; por top: 0px; y me ha subido el bloque cagando leches para arriba!! ¡no lo entiendo! ¿a que es debido que esté mal eso? ¿estoy usando erroneamente el código? ¿alguien me puede indicar por que con margin-top: 0px; no me funciona pero con top: 0px; si? ¿es por las posiciones absolutas?, agradecería que me comentaseis algo al respecto! GRACIAS!
;)
lazyroy
txuma
tal y como lo tienes, con posiciones absolutas, solo te haría falta, en el definición del right_box añadir un top:0;
he puesto un margin-top: 0px;
no sé si está mal así?
el float: right; no me funciona...
en fin...
:(
ayudita plis!
txuma Plus
tal y como lo tienes, con posiciones absolutas, solo te haría falta, en el definición del right_box añadir un top:0;
hartum
asi a las bravas y sin leerme el codigo prueba con un float:right;
"viva la programacion por intuicion"
lazyroy
Bueno aquí va el enlace a la página en cuestión, fijaos lo que hace el bloque de la derecha, se va para abajo de todo... no se...
bueno, a ver si sabeis por que le pasa esto...
Gracias
http://www.lazybutts.com/KL/
lazyroy
ok, gracias por darme una 'answer", voy a colgar la página para que veais el efecto que hace, yo tambien no sé lo que pasa con el código, pero bueno, igual como esto de posicionar con CSS no me sale mu bien algo habré hecho mal... En fín, ahora subo la 'peich'.... ;)
txuma Plus
Lazy, no entiendo muy bien lo que dices. ¿Algún sitio donde ver la página?
Del código que tienes no veo nada raro: a la derecha tienes un bloque con una altura total de 580px, y dentro otros tres uno debajo de otro. El primero de todos tiene una altura de 450px, y debajo de ese se colocan los otros dos.
De todos modos ya digo que no entiendo el problema que planteas (puede ser que lleve muchas horas ya aquí :P)