Foros del Web » Creando para Internet » CSS »

Capa superior

Estas en el tema de Capa superior en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/11/2006, 15:54
Avatar de Fociños  
Fecha de Ingreso: marzo-2004
Ubicación: A Coruña
Mensajes: 587
Antigüedad: 13 años, 8 meses
Puntos: 0
Capa superior

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.
  #2 (permalink)  
Antiguo 14/11/2006, 16:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Con una clase

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.
  #3 (permalink)  
Antiguo 14/11/2006, 17:09
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por Mikmoro Ver Mensaje
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:


Cita:
.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.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #4 (permalink)  
Antiguo 14/11/2006, 18:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Pues vaya

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.
  #5 (permalink)  
Antiguo 15/11/2006, 08:58
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Tienes razon, no se que fue lo que probe


Pero anyway: Prueba estos codigos y dime que crees:
Cita:

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

Cita:
position: absolute;
width: 140px;
height: 62px;
top: 400px;
left: 400px;
float: right;
z-index: -1;
Y dime que crees ?
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #6 (permalink)  
Antiguo 15/11/2006, 15:43
Avatar de Fociños  
Fecha de Ingreso: marzo-2004
Ubicación: A Coruña
Mensajes: 587
Antigüedad: 13 años, 8 meses
Puntos: 0
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
  #7 (permalink)  
Antiguo 16/11/2006, 02:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Me parece que no es necesario

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.
  #8 (permalink)  
Antiguo 16/11/2006, 02:23
Avatar de Fociños  
Fecha de Ingreso: marzo-2004
Ubicación: A Coruña
Mensajes: 587
Antigüedad: 13 años, 8 meses
Puntos: 0
Muchas gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:46.