poner un banner en la esquina superior derecha por sobre otra ! ayuda

iLeaz · #1 (**permalink**) 27/09/2009, 07:55

hola y muchas gracias por sus futuras respuestas a mi duda

quería saber como hago para poner un banner de 468x60 en la esquina superior derecha de la página pero en este sitio ya hay un objeto y si lo floto a la derecha... logicamente se pone abajo de este ya que ahi termina la página.

alguien tiene idea de como superponer el banner al objeto que está ahí?
y que se quede ahi osea no un static que se vea en otda la página sino que quede ahi... en la esquina superior.

propbe varias cosas pero siempre me queda abajo...

GRACIAS

deirdre · #2 (**permalink**) 27/09/2009, 09:44

Hola iLeaz

Sin ver tu código todo son conjeturas, pero yo creo que lo que necesitas es sacar el banner del flujo del documento:

Mira este ejemplo (y dinos si es lo que necesitas):

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Banner</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
#banner {
	width: 468px;
	height: 60px;
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid #444; /* solo para test */
}
#contenedor {
	position: relative;
	width: 100%;
	height: 100%;
}
p {  /* sólo para el simulacro */
	line-height: 100px;
	text-align: center;
}
</style>
</head>

<body>
	<div id="contenedor">
	
			<div id="banner">Banner</div>

		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>
		<p>Mi contenido</p>

	</div>
	
</body>

</html>

Bye

iLeaz · #3 (**permalink**) 27/09/2009, 10:22

mm...

no che... pasa lo mismo.

estoy editando un blog de blogger y lo que pasa es que necesito poner un div que esté separado de todo el sitio pero que se quede arriba.

osea xq viste que blogger maqueta de tal forma que queda toda la cabezera unida y no me deja poner nada "dentro" del header. Por tal motivo necesito algo que se superponga pero la verdad que ni idea...

cristian_cena · #4 (**permalink**) 27/09/2009, 13:08

Hola iLeaz:

CITO: "queda toda la cabezera unida y no me deja poner nada "dentro" del header. Por tal motivo necesito algo que se superponga pero la verdad que ni idea..."

Eso es justo lo que te dijo que hagas deirdre. Debes sacar a ese banner del flujo normal del documento con la propiedad position:absolute; y luego le das la posición deseada con top y left.

Te quedaría algo así:

#id_div_del_banner {
position:absolute;
top:/*el valor que tu quieras*/;
left:/*el valor que tu quieras*/;
}

Puedes ampliar tus conocimientos aquí: http://www.librosweb.es/css/capitulo..._absoluto.html

Saludos!

kseso? · #5 (**permalink**) 27/09/2009, 13:21

Me pudo la curiosidad

Puedes añadir código html a través de la opción añadir gadget. Le colocas los estilos en línea.

Una imagen más que

, eso.

Ahora sólo resta que utilices las propiedades que tú necesites.

Un saludo

cristian_cena · #6 (**permalink**) 27/09/2009, 17:13

Hola:
CITO: "opción añadir gadget" que es eso? kseso?

Saludos maestro

kseso? · #7 (**permalink**) 28/09/2009, 04:58

Cita:

Iniciado por cristian_cena

Hola:
CITO: "opción añadir gadget" que es eso? kseso?

Saludos ~~maestro~~

Pues no se muy bien qué será, Cristian.
Desconozco por completo ese CSM. Lo que hice símplemente fue crearme uno ex profeso para la consulta.
Y esta fue la manera como pude poner un "banner" en el head.

Y si hay una, quiere decir que por lo menos hay una

Un saludo

iLeaz · #8 (**permalink**) 28/09/2009, 10:22

estuve probando y no sale xd

estoy casi seguro de que es un tema del css preestablecido de blogger...
osea del template que estoy modificando...
y por lo que hice hace unos momentos en otra web creo haber encontrado la solución xd

a ver que sale...

gracias por las ayudas :)

cristian_cena · #9 (**permalink**) 28/09/2009, 13:40

iLeaz:

Cita:

Iniciado por iLeaz

estoy casi seguro de que es un tema del css preestablecido de blogger...
osea del template que estoy modificando...

Prueba incluyendo la palabra clave !important en los estilos que vendrian a reemplazar a aquellos que vienen "por defecto"

Usando !important lograras que el elemento en cuestion tome el estilo más allá de que ese estilo este definido en la cascada, es decir con !important logras ignorar la cascada para salirte con la tuya.

Por ejemplo:

#id_div_del_banner {
position:absolute !important ;
top:/*el valor que tu quieras*/ !important ;
left:/*el valor que tu quieras*/ !important ;
}

Kseso?:
Ahhhh, no sabía que iLeaz estaba trabajando con un cms y pensé que era alguno de esos "bocadillos css" que sabes dejarnos

.

Saludos!