Modificare i Css in modo che in stampa sia presentato solo il contenuto della colonna

**ehy** · 23-06-2009, 17:31

Ciao ragazzi!
Il problema è presto detto...ho provato a modificare i css inserendo prima del tag body il codice css qui di sotto riportato:

__________________________________________________ ___________________________

<link rel="stylesheet" type="text/css" href="miostile.css" media="screen">
<link rel="stylesheet" type="text/css" href="stampa.css" media="print">

<style type="text/css">
@import url(miostile.css) screen;
@import url(stampa.css) print;
</style>

<style type="text/css">
@media screen {
...
/* inserire qua gli stili per lo schermo */
...

__________________________________________________ ___________________________

Il risultato ovviamente è che il mio blog adesso appare con lo sfondo bianco e senza colonne anche sullo schermo!

QLk1 sa darmi una mano?
Grazie

**Mich_** · 23-06-2009, 17:39

Perche` richiami gli stili tre volte?
Una ciascuno e` piu` che sufficiente.

Diciamo che nel codice postato ci sono tre alternative:
la prima la ritengo la piu` valida,
la seconda non e` corretta (sintassi) se usi XHTML,
la terza non e` supportata da tutti i browser.

I tag <link> vanno di norma inseriti nella <head> della pagina, e per una interpretazione corretta e` opportuno che nella pagina ci sia il DOCTYPE (come prima istruzione).

**ehy** · 23-06-2009, 18:16

Per prima alternativa tu che intendi???

non sono molto pratico di queste cose

....potresti correggermi tu il codice??
Grazie..............

**fcaldera** · 23-06-2009, 18:20

Originariamente inviato da ehy
Per prima alternativa tu che intendi???

**ehy** · 23-06-2009, 18:29

Quindi

<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">

<link rel="stylesheet" type="text/css" href="miostile.css" media="screen">
<link rel="stylesheet" type="text/css" href="stampa.css" media="print">

*/
body {
margin: 0px 0px 0px 0px;
background:#fff url("http://www1.blogblog.com/dots/bg_dots.gif");
background-position: 50% 31px;
text-align:center;
font:x-small Verdana, Arial, Sans-serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}

Cosi giusto?????

e come faccio ad escludere i macroblocchi???

**fcaldera** · 23-06-2009, 18:37

li nascondi con display: none

**ehy** · 23-06-2009, 18:50

quindi esempio cosi???????

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:$startSide;
font:$bodyfont;
noprint { display: none }
}

**fcaldera** · 23-06-2009, 18:56

nella pagina ci sono degli elementi che non vuoi stampare
a questi elementi aggiungi una classe "noprint"

poi c'è la colonna che invece vuoi stampare.
A questa NON associ niente, la lasci così com'è

la regola per non stampare i primi elementi è quindi semplicemente

.noprint { display: none }

(da aggiungere SOLO nel css per la stampa)

**loop** · 23-06-2009, 21:44

Originariamente inviato da ehy
quindi esempio cosi???????

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:$startSide;
font:$bodyfont;
noprint { display: none }
}

Scusatemi ma ho un vuoto di memoria non ricordo più l'effetto delle regole segnate in rosso e l'uso del dollaro $.

Potete illuminarmi?

**Mich_** · 24-06-2009, 08:57

Hai un vuoto molto profondo ....
E stai confondendo linguaggi diversi.

Il $ nei CSS non esiste. E non esistono neppure le graffe innestate (salvo casi particolari che al momento non interessano).

Quindi cancella tutto e ricomincia.

Parti da una pagina con un solo CSS, che funziona a video:

codice:

<!DOCTYPE ...>
<html ...>
<head>
  <title ...>
  <link rel="stylesheet" type="text/css" href="miostile.css" media="screen">
</head>
<body>
  ...
</body>
</html>

Naturalmente ci sara` allegato il file CSS di nome
miostile.css
che contiene le istruzioni per la formattazione a video.

Poi aggiungi il link per il CSS di stampa:

codice:

<!DOCTYPE ...>
<html ...>
<head>
  <title ...>
  <link rel="stylesheet" type="text/css" href="miostile.css" media="screen">
  <link rel="stylesheet" type="text/css" href="stampa.css" media="print">
</head>
<body>
  ...
</body>
</html>

E nella pagina HTML non aggiungi altro, solo aggiungi la classe noprint agli elmeenti che non saranno stampati.

Il CSS di stampa sara` contenuto nel file
stampa.css
e sara` molto simile all'altro.
In particolare gli elementi che dovranno esser stampati possono essere formattati allo stesso modo dello screen (in prima approssimazione), mentre ci dovra` essere la direttiva:
.noprint { display: none; }
(nota il punto prima del noprint). E questo ti elimina tutti i blocchi da nascondere in stampa.

A questopunto puoi procedere a rivedere gli altri blocchi (probabilmente occorre sistemare le larghezze, dato che alcuni blocchi mancanti lasceranno dei buchi.).

Discussione: Modificare i Css in modo che in stampa sia presentato solo il contenuto della colonna

Strumenti discussione

Ricerca discussione

Visualizza

Modificare i Css in modo che in stampa sia presentato solo il contenuto della colonna

Permessi di invio