Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Cómo evitar que una página se imprima


Veamos un pequeño truco con hojas de estilos para evitar que se pueda imprimir una página web con el botón de imprimir de nuestro navegador.


07/5/03 - Para ello, hay que echar mano de las hojas de estilo. Tanto si el documento tiene una hoja ya asociada como sino, lo que vamos a hacer es asociarle un nueva hoja de estilos. Dicha hoja contendrá un único estilo, con el código necesario para ocultar un elemento:

.nover{
visibility:hidden
}


A la hora de asociar la hoja de estilos, se le añade un modificador a la etiqueta HTML que enlaza con el fichero .css que permite especificar para qué tipo de medio se aplicará esta hoja. En nuestro caso, se aplica en el ámbito de la impresión, por lo que se utiliza el atributo media="print".

<link href="nombre_hoja" rel="stylesheet" type="text/css" media="print">

Una vez hecho esto, basta que toda nuestra página este dentro de un elemento div, que pertenezca a la clase nover.

<body>
<div class="nover">

-- Contenido --


</div>
</body>


Al hacer esto se provoca que en pantalla se visualice la página, pero que si por el contrario se decide imprimir, se le aplicará la hoja de estilos de impresión, en la que el elemento esta puesto como no visible, por lo que no se imprimirá.

Codigo Completo:

Veamos el código íntegro de la página web y la hoja de estilos asociada.

Página HTML


<html>
<head>
<link href="estilos.css" rel="stylesheet" type="text/css" media="print">
</head>
<body>
<div class="nover">

… contenido de la pagina

</div>
</body>
</html>


Hoja estilos: estilos.css

.nover{
visibility:hidden
}


Nota: Esta catacterística de las hojas de estilos funciona con éxito en navegadores IExplorer 6, Netscape 7 y Opera 7. No la hemos probado en otras versiones.

Se puede ver el ejemplo relatado en el artículo en una página a parte.

Referencia: Tenemos un artículo donde se explica cómo hacer un css que altere los estilos para impresión, en imprimir css.

 Seguir navegando a partir aquí:
+ 2 manuales relacionados
+ 3 categorias relacionadas
+ 2 comentarios (Añadir)
+ 3 comentarios no revisados

 Autoría, licencia y acciones sobre este artículo

Informe de Carlos Luis Cuenca*
URL: http://www.helloworldsolutions.com/

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Ayudas técnicas

Dentro de Taller de CSS

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Programación
+ Entrar en Diseño web
+ Entrar en CSS


 Comentarios de los visitantes
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
Se muestran 2 comentarios revisados

 Comentario de akatharta
12/11/04 
Pues el truco esta bien, pero deberian tener en cuenta evitar ver el codigo fuente o guardar el documento en mi disco duro. Si no hicieran esto, se puede descargar y quitar tu <link> y finalmente imprimirla.
suerte!!

 Comentario de
12/2/06 
Y no seria más fácil

body {
visibility: hidden
}

o

body {
display: none
}

???
Dentro de print.css claro.

Añadir un comentario al artículo Añadir un comentario del artículo
 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se han encontrado 3 comentarios sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Ayudas técnicas
+Taller de CSS
Categorías
+Programación
+Diseño web
+CSS

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia