Imagen sobre Imagen

Movingaway · #1 (**permalink**) 06/07/2010, 12:07

Yo uso dreamweaver y en el mismo se puede maquetar css, me gustaria saber como puedo colocar una imagen y arriba de ella otra mas y arriba de ambas poder escribir.

Gracias

Wasper · #2 (**permalink**) 06/07/2010, 14:29

1 Div dentro de otro Div... el primer div con su imagen como background y el otro Div idem...

No entiendo muy bien tu proposito pero esa seria la solucion...

el_gustavo · #3 (**permalink**) 06/07/2010, 16:22

Deberias buscar sobre z-index css.
Yo hice algo parecido:

Código:

    <img src="imagenes/imagen.jpg" alt="foto"/>
    <div style="position:relative;z-index:100;top:-30px;  ">

TEXTO </div>

z-index sobre profundidad, por defecto 0, mientras mas alto sea el numero mas "alta" estara el elemento (sea div, imagen, etc).

Saludos!

Movingaway · #4 (**permalink**) 06/07/2010, 23:38

Es decir que en dreamweaver puedo colocar el backgroud y colocar otra imagen dentro como "elemento flotante" puede ser asi?

Wasper · #5 (**permalink**) 07/07/2010, 01:46

¿Es esto lo que quieres hacer? ¿Poner el Div verde sobre el Div gris...?

Movingaway · #6 (**permalink**) 07/07/2010, 05:01

Que lindo que me quedo jajaj, esto es lo que necesito capas se entiende mas asi.

joseomaker · #7 (**permalink**) 07/07/2010, 07:43

eso mismo lo podias hacer con divs,dandole colores y poniendoles bordes redondeados a cada uno O.O

Movingaway · #8 (**permalink**) 07/07/2010, 08:24

Cita:

Iniciado por joseomaker

eso mismo lo podias hacer con divs,dandole colores y poniendoles bordes redondeados a cada uno O.O

Claro, pero no quiero colores, mi pregunta es un poco mas espesifica.
Como puedo lograr colocar IMAGEN arriba otra IMAGEN y arriba TEXTO con Dreamweaver.

Gustavo72 · #9 (**permalink**) 07/07/2010, 10:36

Si trabajás con la vista de diseño no sé.

Si trabajás con el código sería algo así:

Código HTML:

Ver original<div id="a"><div id="b"><div id="txt">Aquí el texto</div></div></div>

Código CSS:

Ver original#a {
     background: url('imagen1.jpg') no-repeat;
     padding: 20px;
     width: 240px;
}
#b {
     background: url('imagen2.jpg') no-repeat;
     padding: 20px;
     width: 200px;
}
#txt {
     padding: 0px;
     width: 200px;
     height: 300px;
}

erzise · #10 (**permalink**) 20/09/2010, 15:54

Cita:

Iniciado por Gustavo72

Si trabajás con la vista de diseño no sé.

Si trabajás con el código sería algo así:

Código HTML:

Ver original<div id="a"><div id="b"><div id="txt">Aquí el texto</div></div></div>

Código CSS:

Ver original#a {
     background: url('imagen1.jpg') no-repeat;
     padding: 20px;
     width: 240px;
}
#b {
     background: url('imagen2.jpg') no-repeat;
     padding: 20px;
     width: 200px;
}
#txt {
     padding: 0px;
     width: 200px;
     height: 300px;
}

Hola gustavo discupa q traiga de nuevo este post pero necesito hacer exactametne lo mismo, pero segui los pasos con el dreamweaver cs4 y no puede... en realidad quiero poner una imagen de fonde e ir cambiado la de arriba, para lo cual quisiera poner una sobre otra, pero lo intente hacer y nada... no se bien como crear el css me toma bien los div pero el css no lo puede hacer me podes dar una mano? gracias!!

Gustavo72 · #11 (**permalink**) 21/09/2010, 05:54

Cita:

Iniciado por erzise

Hola gustavo discupa q traiga de nuevo este post pero necesito hacer exactametne lo mismo, pero segui los pasos con el dreamweaver cs4 y no puede... en realidad quiero poner una imagen de fonde e ir cambiado la de arriba, para lo cual quisiera poner una sobre otra, pero lo intente hacer y nada... no se bien como crear el css me toma bien los div pero el css no lo puede hacer me podes dar una mano? gracias!!

El código css lo tenés que poner en archivo aparte y tenés que linkearlo en el head del html poniendo lo siguiente:

Código HTML:

Ver original<head>
...
<link href="estilo.css" rel="stylesheet" type="text/css" />
...
</head>

Donde "estilo.css" es el nombre del archivo.

O podés poner el código en el mismo archivo html (o php) dentro del head:

Código HTML:

Ver original<head>
...
<style type="text/css">
a {
     background: url('imagen1.jpg') no-repeat;
     padding: 20px;
     width: 240px;
}
#b {
     background: url('imagen2.jpg') no-repeat;
     padding: 20px;
     width: 200px;
}
#txt {
     padding: 0px;
     width: 200px;
     height: 300px;
}
</style>
</head>
<body>
....
</body>

También podés combinar ambas alternativas poniendo en el archivo css lo que no cambia y en el archivo php lo que si cambia.