JMiur [E]

Hay muchas formas de fijar carteles en una página web; pueden ser simples o sofisticados pero, todos ellos se basan en el uso de la misma propiedad CSS: position: fixed que hace justamente eso, fijar una etiqueta de tal modo que queda siempre en la misma posición.

Esa posición se establece indicando el valor de cuatro posibles propiedades: left top right y bottom donde top:0; left:0; es el ángulo superior izquierdo de la ventana del navegador y bottom:0; right:0; es el ángulo inferior derecho.

Dado que esa posición depende del tamaño de la ventana, es posible que en monitores con resoluciones de pantalla muy grandes, el cartel se muestre "muy lejos"; eso suele resolverse con JavaScript pero, si uno no quiere complicarse, basta establecer la posición utilizando porcentajes como left: 50%.

Su contenido puede ser cualquier cosa ya que sólo se trata de una etiqueta exactamente igual a las demás; puede tener textos, enlaces, imágenes, tablas, videos, lo que se nos ocurra pero, siempre es bueno que se le agregue alguna clase de enlace que permita "cerrarla".

Los detalles del ejemplo:
<style>
  #fijo {
    background-color: #678;
    border: 1px solid #234;
    bottom: 20px;
    color: #FFF;
    font-size: 16px;
    outline: 1px solid #CCC;
    padding: 10px;
    position: fixed;
    left: 50%;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    width: 300px;
    z-index: 1;
  }
  #fijo a { /* depende de la imagen a usar */
    display: block;
    float: right;
    height: 35px;
    width: 35px;
  }
</style>

<div id="fijo">
  <a href="javascript:void(0);" onclick="document.getElementById('fijo').style.display='none';">
    <img src="URL_IMAGEN" />
  </a>
  <p> ....... el contenido ....... </p>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate, nulla eget feugiat massa nunc.

14 comentarios:

Stranno  

Muy sencillo, muy útil y configurable, gracias

Responder
Edu  

buenas,
muy bueno iba a ponerlo pero no sabria poner la X para cerrarlo , podrias añadirlo aqui?

gracias

Responder
La Tobonera  

Hola Vagabundia

Es posible fijar estos carteles para que solo se vean en una entrada especifica ?

Responder
La Tobonera  

Hola Jmiur:

Ya probe y publicando el codigo en el post solo se ve en esa entrada.

Lo que deseo hacer es publicar una imagen fija, por ejemplo con el titulo de "cancelado, retirado, etc, encima del texto e imagenes originales de la entrada y que no quede flotante.

En ese caso como debo modificar el codigo que tu publicas ?

Gracias y saludos..

Responder
JMiur  

Edu:
La X es ese enlace con una imagen que se muestra en la entrada.

La Tobonera:
También es posible hacerlo usando los condicionales de Blogger; por ejemplo:

<b:if cond='data:blog.url == &quot;URL_DE_LA_ENTRADA&quot;'>
... y aquí colocas el DIV ...
</b:if<

Para que no quede fijo, basta eliminar la propiedad positio:fixed; y en ese caso, left right top y bottomo dejan de tener utilidad.

Responder
Edu  

podrias poner el codigo ? la imagen sabria ponerla pero no ahi que poner alguna cosa para que desaparezca al pulsarlo??

Responder
m3nd3z  

Y cómo puedo hacer para que, en vez de cerrarse, el contenido se oculte y se muestre al presionar el botón?

Responder
Aretino  

Se puede colocar de tal manera que lo dispare un link?

Responder
JMiur  

Edu:
Ese es el código que hay que poner, no requiere nada más:
onclick="document.getElementById('fijo').style.display='none';"
oculta el div cuyo ID es "fijo" cuando se hace click sobre el enlace.

m3nd3z:
En ese caso, el cartel permanecería a la vista siempre y sería muy molesto e intrusivo.

Aretino:
Primero, el DIV "fijo" debería tener la propeidad display:none y luego cualquier enlace que tenga el onclick inverso al indicado en el post, lo mostraría:

onclick="document.getElementById('fijo').style.display='block';"

Responder
Pozo+10™  

JMiur lo estoy poniendo en mi blog pero no funciona, cuando le das clic para cerrar en la imagen no pasa nada, por que puede ser? algún script lo molestara?Así lo modifique al código:

Antes de </head>:
<style>
#fijo {
background-color: #FF0000;
border: 1px solid #003366;
bottom: 380px;
color: #FFF;
font-size: 17px;
outline: 1px solid #CCC;
padding: 10px;
position: fixed;
left: 29%;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 496px;
z-index: 1;
}
#fijo a { /* depende de la imagen a usar */
display: block;
float: right;
height: 26px;
width: 26px;
}
</style>

Y antes de </body>:
<div id='fijo'>
<a href='javascript:void(0);' onclick='document.getElementById(&apos;fijo&apos;).style.display=&apos;none&apos;;'>
<img src='http://www.tam-se.com.ar/img/btnCerrar.png' title='Cerrar'/>
</a>
<u><b><p>MUY IMPORTANTE</p></b></u>
<p>Los puntajes de los partidos del día Sábado 30-04-2011 saldrán el día Lunes 02-05-2011 a la madrugada, al ser feriado el Domingo 01-05-2011, no habrá diarios.</p>
</div>

Es en http://www.planeta-grandt.com.ar/

Espero tu respuesta.

Responder
Thor  

A mi me sucedía lo mismo que a pozo +10, pues el cuadro se mostraba pero no se podía cerrar, así que hice un pequeño cambio separando la función que realiza el cierre y funcionó :D(de pura casualidad creo xD)

div id='fijo'
a href='javascript:cerrar();'
img src='URL IMAGEN'
a
/div

script type='text/javascript'
function cerrar() {
bannerflotante= document.getElementById('fijo');
bannerflotante.style.display='none';
}
/script

PD:por alguna razon no puedo poner <>

Responder
Lui'S Y  

Perfecto!! Menudo rato estuve buscando esto!! =D
A la final puse en el buscador: Position: Fixed
Y a la primera =P

Veré si luego "practico" lo de cerrar, porque ahora mismo solo he puesto una flecha para enviar al inicio y tal.. Pero quizás luego cree algún cartel y necesitaré poder cerrarlo!

Un saludo, +1

Responder
Cachorro  

Por que al abrir esta ventana no me pide activar contenido bloqueado,´pero al hacerla yo em exige activar contenido bloqueado ayuda por favor

JMiur  

No sé qué navegador usas pero es posible que esté configurado de esa forma.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR