CSS Μάθημα 9ο Printer friendly pages

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από manolism » 09 Ιαν 2007 11:55

Μάθημα 9ο Printer friendly pages

Στο μάθημα αυτό θα δούμε πως θα δημιουργήσουμε φιλικές προς εκτύπωση σελίδες, δηλαδή να εκτυπώνει μόνο τα div που θέλουμε και όχι ολόκληρη την σελίδα.

Στο css αρχείο θα γράψουμε το παρακάτω:

Κώδικας: Επιλογή όλων

@media print{
  body{ background-color:#FFFFFF; background-image:none; color:#000000 }
  #header{ display:none;}
  #navigation{ display:none;}
  #footer{ display:none;}
  #main_content{ width:100%;}
  img {display:none;}
}
body Ορίζουμε την σελίδα μας λευκή με μαύρα γράμματα χωρίς background
display:none Ορίζουμε τι δεν θέλουμε να εκτυπώνουμε
width:100% Ορίζουμε αυτό που θέλουμε να εκτυπώνουμε να πιάνει το 100% της σελίδας μας.

Για να δείτε τα αποτελέσματα κάντε Print preview στον browser σας.

Στον ΙΕ και στον FF λειτουργεί άψογα, στον Opera παίζει προβληματάκι

Live demo

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από xmavidis » 09 Ιαν 2007 12:26

Και με ένα font-family: Verdana, sans-serif; θα γίνει πολύ καλύτερο.
I want to know God’s thoughts; the rest are details.
Albert Einstein


Άβαταρ μέλους
ALKIVIADES
Honorary Member
Δημοσιεύσεις: 1322
Εγγραφή: 07 Απρ 2005 03:39

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από ALKIVIADES » 10 Ιαν 2007 23:30

Ωραίος lunar ;)
Εικόνα

Άβαταρ μέλους
lon3wolf
Δημοσιεύσεις: 76
Εγγραφή: 11 Νοέμ 2005 15:05
Τοποθεσία: 127.0.0.1
Επικοινωνία:

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από lon3wolf » 10 Ιαν 2007 23:50

άψογο :kaloe:

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1952
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από vassilism » 04 Φεβ 2008 22:36

Πολύ καλό βοήθημα!
Έχω μια απορία.
Άν έχω στο site μου 4 εικόνες, μπορώ να δηλώσω να τυπώνονται οι 2?

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27668
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από cordis » 12 Φεβ 2008 00:29

μπορείς, αλλά όχι με τον παραπάνω τρόπο.
θα πρέπει να κάνεις ένα display:none; DIV και να βάζεις μέσα σε αυτό όσες ΔΕΝ θέλεις να τυπωθούν.
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από skeftomilos » 12 Φεβ 2008 20:56

Κώδικας: Επιλογή όλων

<style type="text/css" media="print">
  .no-print &#123;
    display&#58;none;
  &#125;
</style>

<img src="1.png" alt="">
<img src="2.png" alt="">
<img class="no-print" src="3.png" alt="">
<img class="no-print" src="4.png" alt="">
Έτσι θα εκτυπωθούν μόνο τα πρώτα δύο images.


Άβαταρ μέλους
wired
Δημοσιεύσεις: 12
Εγγραφή: 21 Ιουν 2007 14:12
Επικοινωνία:

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από wired » 12 Μαρ 2008 11:12

xmavidis έγραψε:Και με ένα font-family: Verdana, sans-serif; θα γίνει πολύ καλύτερο.
για την ακρίβεια με ενα font-family: Times New Roman, Times, serif; θα γίνει καλύτερο γιατί παρ όλο που στις οθόνες είναι καλύτερα τα sans-serif fonts στο έντυπο διαβάζονται καλύτερα τα serif...

Άβαταρ μέλους
eleni_k
Δημοσιεύσεις: 94
Εγγραφή: 07 Φεβ 2006 01:45
Τοποθεσία: Λυκαβηττός
Επικοινωνία:

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από eleni_k » 19 Μαρ 2009 11:51

Το χρειάστηκα σήμερα στη δουλειά και δούλεψε υπέροχα!:D

Ευχαριστώ lunarmedia :) :)

Άβαταρ μέλους
Desolator
Δημοσιεύσεις: 9
Εγγραφή: 24 Απρ 2010 03:30
Τοποθεσία: Thessaloniki

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από Desolator » 12 Μάιος 2010 03:52

eee...paides...tha ithela na rotiso kt..!!exo ftia3ei mia apli istoselida sto dreamweaver 8...k tin anoiga me mozilla...ola kala ola oraia...!!!otan tin anoi3a me IE...i thesi ton antikeimenon itan kapos oti nanai....mipos 3erei kaneis na m pei ti paizei???
Εικόνα

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από Andreas_O » 21 Μάιος 2010 14:14

Βασικα..αν η σελίδα που φτιάχνεις δε σχετίζεται με Printer Friendly σελίδες, θα μπορούσες να δημιουργήσεις ένα νέο θέμα, δίνοντας κώδικα και στοιχεία για το design της σελίδας (είναι css; είναι με tables;).

Φιλικά(:
;]

Άβαταρ μέλους
Desolator
Δημοσιεύσεις: 9
Εγγραφή: 24 Απρ 2010 03:30
Τοποθεσία: Thessaloniki

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από Desolator » 25 Μάιος 2010 08:32

Η σελίδα μου δεν έχει να κανει με printer friendly.Απλα κάπου έπρεπε να ρωτήσω...
τι εννοείς ένα νέο θέμα??όλα απ'την αρχή??η σελίδα έχει και css και tables.
Εικόνα

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

CSS Μάθημα 9ο Printer friendly pages

Δημοσίευση από Andreas_O » 25 Μάιος 2010 13:28

Desolator έγραψε:Η σελίδα μου δεν έχει να κανει με printer friendly.Απλα κάπου έπρεπε να ρωτήσω...
τι εννοείς ένα νέο θέμα??όλα απ'την αρχή??η σελίδα έχει και css και tables.
Καλησπέρα,


θέμα εννούσα topic. Anyway, για να βοηθήσουμε, θα πρέπει να δώσεις τον κώδικα της σελίδας σου ή ακόμα και live link, καλύτερα.

Το πρόβλημα μπορεί να οφείλεται σε 1000 λόγους. Ο ΙΕ (ειδικά σε εκδόσεις 6-7) έχει κακή υποστήριξη css. Οπότε μπορεί κάποια εντολή, κάποιο position, οτιδήποτε να μην το αναγνωρίζει σωστά.
;]

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 3 επισκέπτες