duda con divs

[tr3m3]

hola buenas tardes, tengo un problema.
ando liado desde hace tiempo con saber como lexes (perdon por la expresion) puedo meter una caja dentro de otra, o 4 dentro de 2, etc...
al principo lo hacia añadiendo divs desde dreamweaver, me los ponia donde le parecia, pero hace tiempo decidi enfangarme en el codigo, y aun asi, no consigo colocar cajas dentro de cajas.

www.canovastyle.com y abajo os encontrareis esto:

<div id="caja_contenedora_a">

<img src="imagenes/caja_contenedora_a.jpg" width="300" height="200"/>
<div id="caja_1">
<img src="imagenes/caja_1.jpg" width="250" height="100"/>
</div>

primero es que el <div id="caja_1"> me lo pone inmediatamente debajo del <div id="caja_contenedor_a"> , he probado poniendo margin-top :-100px, pero me lo pone por debajo, ademas de que seguro esta mal hecho.

se me escapa algo, alguien me hecha un cable?

[kseso?]

Hola Tr3m3:
Prueba así:

#caja_contenedora_a {
background:transparent url(imagenes/caja_contenedora_a.jpg) no-repeat ;
float:left;
margin-top:5px;
width:300px;
}
#caja_1 {
display:inline;
float:left;
height:100px;
margin:20px 0 0 0; /*el que necesites para que se vea la parte superior del div anterior*/

width:250px;
}

(Te dejo que busques tú la diferencia con tu css)
Y en el html de 'caja_contenedora_a' quítale el scr a la imagen, pues la estás colocando como background.
Un saludo

[tr3m3]

hola!
gracias por responder.
repasando lo que me has dicho que añada, pues llevas razon (me pierdo mucho las propiedades), pero si quito el scr de la "caja_contenedora_a", en el navegador funciona perfectamente, pero al validar el documento me salen 2 errores, como pongo la imagen sin que haga de background, y sin que me de estos dos errores?

"La etiqueta: "img" no tiene el atributo: "imagenes" en las versiones activas actualmente."
"La etiqueta: "img" no tiene el atributo: "caja_contenedora_a.jpg" en las versiones activas actualmente."
[XHTML 1.0 de transicion]

gracias por tu ayuda! ando haciendo pruebas para dominar css lo mas que pueda y estoy pregunton, por mas que le doy vueltas a los libros no me aclaro mucho con segun que cosas.

[tr3m3]

weno, sigo haciendo cajitas y de momento todo parece seguir bien.
hay otro problema, tus consejos funcionan en firefox, pero en ie lo monta mal, a que puede ser debido eso? esta subido a la web actualizado :)

[Mikmoro]

Has quitado el src de la imagen pero te has dejado esto ahí:

<img width="300" height="200"/>

que no es nada. Eso te da los fallos del validador.

De todas maneras al menos yo no entiendo qué es lo que estás queriendo hacer. Sería bueno que pusieras una imagen de lo que quieres conseguir.

[tr3m3]

no quiero conseguir nada de momento, solo ando practicando la parte css que atañe al poder meter divs dentro de divs y conseguir que se muestren como quiera, son solo probaturas. prefiero practicar las cosas antes de ponerme a diseñar nada.
hasta el momento todo va bien, si no fuese por esos errores (el html validator me los avisa) y que en IE no me pilla los estilos de las cajas, o eso creo yo. puede ser alguna propiedad que me falte o no se.
¿esos errores hay alguna forma de quitarlos?
lo subo todo a www.canovastyle.com
gracias x su ayuda!

[Mikmoro]

Iniciado por tr3m3

no quiero conseguir nada de momento, solo ando practicando la parte css que atañe al poder meter divs dentro de divs y conseguir que se muestren como quiera

¿A qué crees que me refiero con "conseguir"?
Haces pruebas buscando un objetivo, que se vea como tú has pensado, y si no sabemos cómo lo has pensado no creo que nadie te pueda ayudar a conseguirlo.

¿Meter una caja dentro de otra caja? Sí claro, eso ya lo has hecho. Pero... ¿cuál es el problema que te encuentras exactamente? ¿que es lo que no se ve como te gustaría? a eso me refiero.

No sé si has leido mi mensaje, pero sigues dejando la imagen vacía donde estaba, y como te he dicho, eso te da los errores del validador y además hace que se vea mal en IE.

Si quieres saber cómo se hace o cómo se "consigue" algo ya dirás.

[tr3m3]

bueno, tampoco hace falta ponerse asi.

solo practico cosas, que a dia de hoy es hacer una estructura con cajas, para aprender a hacerlo. la semana que viene preguntare por otra cosa completamente distinta, y cuando sepa dominar varias cosas, pensare que es lo que quiero hacer exactamente.
lei tu mensaje, y la imagen esta :

<img ="imagenes/caja_contenedora_a.jpg" width="300" height="200"/>

sin el src que decia el primer comentario de este hilo. esto tal como esta me da errores, y no solo el, si no todos los que estan como el conteniendo otras cajas.

<img ="imagenes/caja_contenedora_b.jpg" width="200" height="200"/>

las preguntas eran dos, una , como puedo hacer que en IE se vea correctamente, y como puedo quitar esos errores.


gracias <- de nuevo.

[Mikmoro]

Lo siento si algo te ha sonado mal, pero creo que no me puesto de ninguna manera. Me desconcierta que respondas "no quiero conseguir nada" cuando en la misma frase vuelves a usar "lo que quiero es conseguir..."

No entiendo lo de la imagen y el validador. Te digo que cuando kseso? te ha dicho que quitaras el src a la imagen, juraría que se refería a que quitaras la imagen porque ya la estas poniendo como fondo (en su ejemplo), pero en lugar de quitar la imagen has quitado sólo el src y la ruta, y has dejado esto en tu código:

<div id="caja_contenedora_a">
<img width="300" height="200"/>

Esa img no pinta nada, porque está vacía. Eso es lo primero que te dice el validador en las reproducciones que has puesto:

"La etiqueta: "img" no tiene el atributo:

Y eso hace que se vea distinto en IE que en FF, entre otras cosas porque en IE cuando la imagen no está rellena el espacio con sus dimensiones.

Sigo sin imaginar cómo quieres que se vea, por eso no puedo ayudarte con qué código necesitas para eso.

las preguntas eran dos, una , como puedo hacer que en IE se vea correctamente, y como puedo quitar esos errores.

¿Qué es para tí "correctamente"?

Perdona, no pretendía ser duro, pero sí que seas más concreto en tu respuesta.

[Mikmoro]

A ver: dices que estás queriendo meter una caja (<div id="caja_1">) dentro de otra caja (<div id="caja_contenedora_a">), que ya contiene una imagen insertada.

Para que queda encima de la imagen, tienes dos soluciones:

1.- la que dice kseso?, que es no insertar ahí la imagen, sino ponerla de fondo, porque si la insertas la imagen ocupa un espacio físico que no permite que nada se ponga encima:

2.- Poner la segunda caja en posición absoluta (y la primera en relativa para que la absoluta sea con repecto de esta), de manera que la segunda caja no ocupa espacio físico, y la colocas con las coordenadas left y top.

<div id="caja_contenedora_a">
<img src="imagenes/caja_contenedora_a.jpg" width="300" height="200"/>
<div id="caja_1">
<img src="imagenes/caja_1.jpg" width="250" height="100"/>
</div>

CSS:

#caja_contenedora_a {position: relative;}
#caja_1 {position: absolute; left: 10px; top: 10px;}

por ejemplo.

[tr3m3]

Bua tio, perfecto. Esta muy bien esto de CSS, pero hay tanto que hacer...
Muchas gracias :)