Capa superior

[Fociños]

Buenas,

tengo una web ya hecha pero ahora me ha surgido la necesidad de crear añadir un banner en el margen derecho, me gustaría cómo puedo hacer para crear una capa por encima del diseño actual para colocar dicho banner sin tener que modificar el diseño actual.

Muchas gracias.

[Mikmoro]

Haciendo una clase que sea una capa de posición absoluta tipo:

.tubanner { position: absolute;
width: 140px;
height: 62px;
top: 52px;
left: 143px;
}

Luego pones un div con esa clase y flotará sobre lo que tengas debajo:
<div class="tubanner">Aquí va el texto que sea</div>.

También puedes poner esos parámetros directamente en cualquier etiqueta tipo:
<img style="width: 648px; height: 110px; position: absolute; top: 85px; left: 152px;" src="tu_foto.jpg" />

Mikel.

[fearlex]

Iniciado por Mikmoro

Haciendo una clase que sea una capa de posición absoluta tipo:

.tubanner { position: absolute;
width: 140px;
height: 62px;
top: 52px;
left: 143px;
}

Luego pones un div con esa clase y flotará sobre lo que tengas debajo:
<div class="tubanner">Aquí va el texto que sea</div>.

También puedes poner esos parámetros directamente en cualquier etiqueta tipo:
<img style="width: 648px; height: 110px; position: absolute; top: 85px; left: 152px;" src="tu_foto.jpg" />

Mikel.

Con todo respeto Mikel: NO lo creo, aun cuando su posicionamiento sea absoluto, sigue estando en el flujo del documento, por lo tanto movera ya sea a la izquiera o a la derecha los demas elementos del html, ademas como puedes adivinar que esos elementos no usaron floats para posicionarse y por ende sera mas requero todavia. Tu codigo esta bien pero para lo que planteas le hace falta la propiedad z-index. Con esta propiedad puedes poner por debajo, o por encima de los objeto sin obstruir el flujo actual.

o sea agrego a tu codigo la propiedad z-index:

.tubanner {
position: absolute;/*Opcional*/
width: 140px;
height: 62px;
top: 52px; /*Opcional*/
left: 143px; /*Opcional*/
float: right
z-index: 1;
}

El codigo que puse opcional depende de donde quiera ubicar el banner. Creo que debes poner tu codigo, asi podremos ayudarte mejor.

[Mikmoro]

Con el mismo respeto, porque esto me divierte supongo que tanto como a ti, y lo hago como tú por ayudar en lo que puedo. Igual estoy haciendo magia.
No he incluido z-index porque no he pensado que tuviera otras capas flotando en su web al hacer esa consulta, pero al margen de eso, la capa no desplaza nada de su posición; sencillamente flota.

<div style="position: absolute; top: 231px; left: 565px;">Capa que flota</div>

Si le dices float right y le quitas position absolute y lo márgenes top y left, entonces es cuando te va a desplazar todo lo demás, pero si no, no.

<div style="float: right; width: 200px; height: 200px;">Capa que NO flota</div>

Cópialos y pégalos en un html, a ver qué pasa. A mi me flota correctamente sobre cualquier cosa. Igual estoy equivocado y estoy teniendo una chiripa. Lo veo en IE y Firefox exclusivamente.
Mikel.

[fearlex]

Tienes razon, no se que fue lo que probe


Pero anyway: Prueba estos codigos y dime que crees:

position: absolute;
width: 140px;
height: 62px;
top: 400px;
left: 400px;
float: right;
z-index: 1;

y

position: absolute;
width: 140px;
height: 62px;
top: 400px;
left: 400px;
float: right;
z-index: -1;

Y dime que crees ?

[Fociños]

Estoy intentando combinar el código que me habéis proporcionado con el script para que un banner avance junto con el scroll vertical pero no soy capaz.

http://www.dynamicdrive.com/dynamici...topcontent.htm

[Mikmoro]

Es que creo que no es necesario. En las instrucciones del propio script te proporciona los estilos (class) que necesitas para que flote sobre lo demás (mira la primera caja de código y verás los estilos, que empiezan por #). Si sigues las instrucciones, ahí está todo lo que necesitas.
No obstante, no te recomiendo ese script, porque no sé si te has dado cuenta de que sirve sólo para Internet Explorer. Si buscas en esa misma página verás que hay otros compatibles con Firefox y Opera que hacen lo mismo.
Mikel.

[Fociños]

Muchas gracias