HTML - La impresión de mi página no cabe en una hoja

   
Vista:

La impresión de mi página no cabe en una hoja

Publicado por Alvin alvin069@gmail.com (22 intervenciones) el 17/08/2013 14:46:30
Hola amigos, nuevo inconveniente.

Necesito imprimir una pagina web, para lo cual agregue un enlace que es el siguiente:

<a href='javascript:window.print(); void 0;'>Imprimir</a>

El cual funciona, el unico inconveniente es que no logro hacer que la pagina quede dentro de la hoja de impresion, o sea, me queda cortada hacia los costado.

Como puedo hacer para que la pagina se ajuste automaticamente?

Cuando me sale la ventana de preferencias de impresion si le doy a la hoja "Horizontal" se ve todo, pero en vertical se corta hacia los costados.
La cuestion es que uno que entiende un poco lo hace sin problemas, pero la idea es brindarle a los usuarios de la web la menor complicacion posible para hacerlo, o sea, solo darle clic e imprimir, nada de configuraciones.

Quizas halla alguna propiedad de java para imprimir con la pagina ajustada a la hoja o algo asi.

Espero ayuda, gracias de antemano.

abrazo

Alvin
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
información
Otras secciones de LWP con contenido de HTML
- Código fuente de HTML
- Cursos de HTML
- Temas de HTML
- Chat de HTML
información
Códigos de HTML
- Botón En 3D!
- Top Links
- Previsualizar
Imágen de perfil de xve

La impresión de mi página no cabe en una hoja

Publicado por xve (1178 intervenciones) el 18/08/2013 09:02:41
Hola Alvin, no se que anchura tiene tu pagina web, pero si por ejemplo, es de 1024 o mas, no te va a caber en una hoja A4.

Para ello, lo que puedes hacer, es modificar el tamaño de tu página únicamente para cuando vayas a imprimir.

Esto se realiza con CSS. A la hora de imprimir, el navegador busca un estilo para la impresora... si lo encuentra lo aplica. Este estilo es el que tiene media="print"

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

Si tienes puesto este estilo en tu página, a la hora de imprimir actualizara tu web con los estilos contenidos en ella.

En esa hoja de estilo, tienes que realizar todas las modificaciones en los estilos para que tu página quepa en una hora de impresora.

Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La impresión de mi página no cabe en una hoja

Publicado por Alvin alvin069@gmail.com (22 intervenciones) el 19/08/2013 14:00:08
Hola XVE, gracias por contestar tan rapidamente.

Como puedo aplicar esto que me pasas? porque la verdad no tengo idea de como hacerlo, si me podes dar un ejemplo te agradezco muchisimo.

saludos

Alvaro
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

La impresión de mi página no cabe en una hoja

Publicado por xve (1178 intervenciones) el 19/08/2013 21:47:01
Hola Alvin, sin ver tu código es muy dificil, pero supongamos que en tu body, tienes puesto una anchura de 1024 algo así:

1
body {width:1024px;}

Entonces, en el estilo marcado para imprimir, tienes que cambiar ese valor... algo así:
1
body{width:700px;}

Y así con todo tu código para que la web se visualice correctamente a 700 pixeles.

Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La impresión de mi página no cabe en una hoja

Publicado por Alvin alvin069@gmail.com (22 intervenciones) el 19/08/2013 23:01:55
Pero desde un mismo .html puedo llamar a dos .css distintos?
Porque yo en cada pagina tengo un estilo definido, ahora como hago para que cambie cuando voy a imprimir?

Estoy un poco confundido...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

La impresión de mi página no cabe en una hoja

Publicado por xve (1178 intervenciones) el 20/08/2013 09:01:11
Alvin, las hojas de estilo, deberían de ser las mismas para todas las páginas...

En cualquier página html, pueden haber tantos css y/o js como desees.

Si haces ver codigo fuente en esta página, veras que añade algunos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La impresión de mi página no cabe en una hoja

Publicado por Alvin alvin069@gmail.com (22 intervenciones) el 20/08/2013 13:48:48
Aja, lo acabo de ver.
Vos sabes que lo intente con los dos estilos a la vez, pero me tomo el estilo de impresion para la pagina. Luego no lo podia cambiar, no me mostraba imagenes ni nada tal cual lo hacia el print.css

Logre hacer una impresion creando dos paginas iguales, por ejemplo Nota.html y NotaPrint.html, las dos son identicas pero lo que hace es que cuando en Nota.html le das al boton imprimir, este abre a NotaPrint.html con el estilo print.css que esta todo redimensionado y me funciono.

Eso esta bien? o puedo hacerlo con 2 estilos diferentes con una sola pagina?

Disculpa que joda, pero no logro resolverlo de esa manera.

gracias de antemano.

Alvin
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

La impresión de mi página no cabe en una hoja

Publicado por xve (1178 intervenciones) el 20/08/2013 21:12:36
Al incluir el estilo de la impresión pusiste: media="print"?

Este estilo se utilizar-ha únicamente para la impresión...

Dos archivos creo que es un error, ya que si haces alguna modificación en los datos, tendrás que acuerdate de hacerlo en los dos a la vez.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La impresión de mi página no cabe en una hoja

Publicado por Alvin alvin069@gmail.com (22 intervenciones) el 20/08/2013 22:50:42
Claro, entiendo, no recuerdo si puse media=print, voy a volver a intentar y te aviso que sale.

gracias nuevamente

abrazo

Alvin
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

La impresión de mi página no cabe en una hoja

Publicado por Jose maria jmrarbulo@digitaleando.com (31 intervenciones) el 21/08/2013 01:13:17
Disculpazme si, siguiendo diversos debates, es mi primera intervención.

Del tema en discusión, creo que es más fácil de lo planteado.

En el archivo principal css (o si quereis, en archivo aparte) se puede armar el css para impresión de la siguiente manera:
1
2
3
@media print {
  /* Estilos específicos para impresora */
}


Hasta donde yo sé, publicidad, menús, etc. se pueden obviar (no los incluimos en la sección del css y listo), de forma que se imprima el contenido que queramos, limpio y puro.

En lo visto y utilizado, ni hemos de preocuparnos por el ancho (y con el alto: height: auto;, listo).

Un ejemplo simple puede ser:
1
2
3
4
5
6
7
8
@media print {
  html, body {
    height: auto;
  }
  #cuerpo {
    height: 650px;
  }
}


El sistema es similar a si queremos mostrar diferentes estilos de acuerdo al ancho de la pantalla que nos visualiza:
1
2
3
@media all and (min-width: 650px) and (max-width: 960px){
  /* Estilos específicos para pantalla entre 650 y 960 px */
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

La impresión de mi página no cabe en una hoja

Publicado por xve (1178 intervenciones) el 21/08/2013 08:43:54
Gracias Jose Maria, la verdad es que ya no recordaba que también existe esta posibilidad... muy agradecido por comentarlo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La impresión de mi página no cabe en una hoja

Publicado por Alvin alvin069@gmail.com (22 intervenciones) el 21/08/2013 12:13:43
Impecable Jose Maria, pruebo y te digo que sale.

Ahora la pregunta es, por lo que entiendo iria el "@media print" dentro del archivo css que utiliza la pagina o en un css aparte, y luego del html como lo llamo?

Me refiero desde el boton imprimir, lo que tengo es esto:

1
2
3
4
5
6
7
8
<div class="botonera">
  <ul>
  <li><a href="http://elceleste.com.uy/index.html">Portada</a></li>
  <li><a target="_blank" href="http://www.facebook.com/sharer.php?u=http://www.elceleste.com.uy/deportes/HockeySCesped/130818/hockeySC130818.html">Compartir en Facebook</a></li>
  <li><a target="_blank" href="http://twitter.com/home?status=leyendo%20http://www.elceleste.com.uy/deportes/HockeySCesped/130818/hockeySC130818.html">Compartir en Twitter</a></li>
  <li><a href="javascript:window.print();%20void%200;">Imprimir</a></li>
  </ul><br>
</div>


El ultimo boton del div que esta en negrita es el boton imprimir.
Yo lo que quiero saber es que pongo en el css y que debo poner aca en el html para poder imprimir.

Espero me ayuden porque lo que he intentado no resulta hasta ahora.

de antemano gracias.

abrazo

Alvin
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

La impresión de mi página no cabe en una hoja

Publicado por Jose maria jmrarbulo@digitaleando.com (31 intervenciones) el 21/08/2013 12:28:29
Básicamente es lo que tienes.

La impresión la hacemos desde javascript:
1
<a href='javascript:window.print(); void 0;'>Imprimir</a>


También, como alternativa, puedes crear un botón:
En HTML:
1
2
3
<form>
<input type='button' onclick='window.print();' value='Imprimir' />
</form>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

La impresión de mi página no cabe en una hoja

Publicado por Jose maria jmrarbulo@digitaleando.com (31 intervenciones) el 21/08/2013 14:31:31
Disculpa Alvin

Se me pasó por alto una línea de tu participación, que creo es importante para tí:
"Yo lo que quiero saber es que pongo en el css y que debo poner aca en el html para poder imprimir".

Si no te quedó claro lo del CSS (lo del HTML con función javascript ya está explicado) sea al principio o al final del CSS añades lo que expuse antreriormente.

Lo normal es imprimir el cuerpo de la página con su contenido.
Supongamos que en dicho cuerpo hay cosas (enlaces, publicidad, etc que no interesa imprimir y partimos de un CSS habitual:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@CHARSET"UTF-8";
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  font-family:verdana,arial;
  overflow:hidden;
  background-color:#D2D2D2;
  color:#2D2D2D;
  font-size:0.9em;
}
#cabecera{
  height:150PX;
  padding:10px;
  background-color:#000000;
  display:block;
  color:#D2D2D2;
}
#cuerpo{
  height:820px;
  overflow:auto;
  background:#E1E1E1;
  color:#1E1E1E;
}
.botonera{
  width:220px;
  height:100%;
  float:left;
  margin: 0 auto;
  position: relative;
}
/* todo lo extenso que sea tu css de página */
@media print {
   #cuerpo { 
    color:#2D2D2D;
    font-size:0.9em;
    height: auto;
  }
  /* Si dentro de #cuerpo está tu .botonera  */
  .botonera {
    display:none;
  }
}


Ahora, verás la class botonera en tu página pero no se imprimirá.
#cabecera se imprimirá o no según esté dentro o fuera de #cuerpo, pudiendo darle un nuevo estilo u ocultándolo. Podrás cambiar tamaño y color de letra, fondo, etc.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La impresión de mi página no cabe en una hoja

Publicado por Alvin alvin069@gmail.com (22 intervenciones) el 21/08/2013 19:10:18
No sale che....

arme esto en el CSS principal, al final de todo sin tocar nada de lo anterior:

1
2
3
4
5
6
7
8
9
10
11
12
13
@media print {
	#principal{
	background-color:#666;
	width:800px;
	height: auto; /*Junto a overflow: hidden; aplicará a nuestro elemento div el mismo alto que el más alto de sus elementos hijos */ 
	}
 
	#cuerpo{
	background-color:#666;
	width:800px;
	height: auto; /*Junto a overflow: hidden; aplicará a nuestro elemento div el mismo alto que el más alto de sus elementos hijos */ 
	}
}


Luego lo llamo desde el html con esto:
<a href='javascript:window.print(); void 0;'>Imprimir</a>

Y no, me sale la pagina tal cual la veo en internet.
El sitio es:
www.elceleste.com.uy

En una de esas ven el codigo ahi, aunque ahi no tiene los cambios, pero pueden ver el html.

Si me dan una mano son unos capos.

gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

La impresión de mi página no cabe en una hoja

Publicado por Jose maria jmrarbulo@digitaleando.com (31 intervenciones) el 22/08/2013 00:23:08
Hola Alvin:

He estado revisando y recomponiendo tu página. Y me has de disculpar pero hay muchas cosas que comentar sobre el CSS (estilos/principal.css). No existen id y todo son clases, que me complican hacer un trabajo limpio.

Solo con el fin de mostrarte que lo que arriba exponía funciona, prueba en ese archivo css añadir (tal cual) lo siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@media print {
  html, body, .principal {
    height: auto;
  }
  .cuerpo{
	height: auto;
  }
  .cabezal{
	width:0;
	display:none;
  }
  .fecha{
	width:0;
	display:none;
  }
  .organizaciones{
	width:0;
	display:none;
  }
  .amigos{
	width:0;
	display:none;
  }
  .redaccion{
	width:0;
	display:none;
  }
  .botonera{
	width:0;
	display:none;
  }
  .titularRapido{
	width:0;
	display:none;
  }
  .notaComun{
	width:42%;
	float: right;
	margin:0 auto;
  }
}


La solución es muy de arreglar las cosas para imprimir solamente los contenidos en la class .notaComun que creo es lo importante.

Hay elementos que interfieren y no termino de definirlos. De ahí que, muy convencionalmente, he podido reajustar los contenidos en la class .notaComun y teniendo que anular otras clases.

Tratar más a fondo el tema corresponde al área de CSS. Si abres un nuevo tema en el área, me lo comunicas al email para seguirlo y ayudarte más a fondo (lo veo como para rehacer y reordenar toda la página aunque visualmente la veas bien).

P.D.: Si con lo expuesto no te funciona, te muestro mis resultados (las pruebas he podido hacerlas cambiando las rutas relativas de tu página a absolutas).

Saludos: Txema
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La impresión de mi página no cabe en una hoja

Publicado por Alvin alvin069@gmail.com (22 intervenciones) el 22/08/2013 18:55:07
AHORA SIIIIIII!!!!!!!!!! GRACIAS GRACIAS GRACIAS!!!!!

FUNCIONO!!!!!!!!

Voy a hacer las pruebas correspondientes para dejarlo a punto, pero ahora si funciono.

Gracias amigos, gracias por dedicarme una semana de correos para solucionar mi problema.

Un abrazo grande y obviamente estoy a las ordenes para lo que pueda ayudar.

P.D.: con respecto a los id, nunca me enseñaron eso en el curso, es mas, no se lo que es. Solo me enseñaron a trabajar con clases y obviamente me di cuenta de que el curso fue malisimo, todo lo que se ve en la web es mas bien por ser autodidacta que por el curso. Y tambien por la mano que me han dado todos aca en la web del programador cada vez que consulte algo.

Nuevamente gracias y a las ordenes.

Abrazo grande.

Alvin
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

La impresión de mi página no cabe en una hoja

Publicado por Alvin alvin069@gmail.com (22 intervenciones) el 24/08/2013 13:49:14
Ja!!, he vuelto.

Descubri provando en diferentes exploradores que no en todos funciona igual, por ejemplo en chrome anda perfecto como quiero que salga, pero en mozilla no me sale el cabezal y el pie de la pagina y en el internet explorer sale todo cortado y sin cabezal y pie.

Alguna sugerencia?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

La impresión de mi página no cabe en una hoja

Publicado por Jose maria (31 intervenciones) el 24/08/2013 16:45:06
Mi muy estimado Alvin:

Creo que tengo que repetirme:

1
2
3
4
5
6
Hay elementos que interfieren y no termino de definirlos.
 De ahí que, muy convencionalmente, he podido reajustar
los contenidos en la class .notaComun y teniendo que anular otras clases.
 
Tratar más a fondo el tema corresponde al área de CSS ...
(lo veo como para rehacer y reordenar toda la página aunque visualmente la veas bien).


Desde aquí hemos de entender que los navegadores a veces reinterpretan lo que no se ha hecho o se ha hecho mal. Pueden interpretar espacios donde no hay contenido (ejemplo en tu web: <div class="pie"></div>) o simplemente los ignoren

No te extrañe por ello ver más o menos espacios arriba, abajo, derecha-izquierda, ... según el navegador.

Yo te sugiero, como te dije, analizar tu programación, partiendo de validaciones W3C (te van a dar muchas pistas a soluciones HTML donde hay errores importantes) y tu CSS; (estructura tu página con id y class, contenedores y contenidos) y defínelos en estilos, sea cual fuere la versión utilizada .

Difícilmente podemos construir una casa de tres pisos si el cimiento es de adobe (paja mezclada con arcilla o tierra).

Me repito: La solución que te ofrecía era muy de arreglar las cosas sin entrar en análisis del código general.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar