PrintVersion Druckansicht printerfriendly

prefix · Beitrag von **prefix** » Fr 18. Jun 2004, 06:46

durch das media-attribut bei der css-einbindung kannst du 2 verschiedene stylesheets einbinden.

so kann man z.b. im print-stylesheet per display:none; container ausblenden, die man nicht gedruckt haben will, andere schriftgrößen und -familien verwenden usw. usw.

dazu gibt es tausende infoquellen

acquire · Beitrag von **acquire** » So 27. Jun 2004, 18:09

Ich finde die FAQ richtig gut, doch funktioniert das bei mir nicht.
Irgendwas mache ich da falsch.
class="print"
packe ich doch nur dazu, was ich beim drucken nicht sehen will.
Doch wo?
unter <table class="print">
oder
<tr class="print">
oder
<td class="print">
??
Habe alle Variationen von den genannten durch und bisher kein Erfolg.

Snoopy · Beitrag von **Snoopy** » Mo 28. Jun 2004, 13:13

Schau dir das folgende Beispiel an und probier das aus !
Du wirst sehen es ist egal wo du die class="print" einfügst, auf das wie kommt es an !

Ich wollte jetzt nicht noch eine dritte datei dazulegen, aber wenn du die class="print" in den
table Tag einbaust, wird nichts mehr ausgedruckt

Wie du sehen kannst, sind in den Beispielen die Textgrössen extra unterschiedlich.

Datei format.css

Code: Alles auswählen

/* Basic layout */
.text {
	color: #000000;
	font-family: helvetica, arial, geneva, sans-serif;
	font-size: 11px;
}
.textbold {
	color: #000000;
	font-family: helvetica, arial, geneva, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

Datei format_p.css

Code: Alles auswählen

/* Printer layout */
.text {
	color: #000000;
	font-family: helvetica, arial, geneva, sans-serif;
	font-size: 28px;
}
.textbold {
	color: #000000;
	font-family: helvetica, arial, geneva, sans-serif;
	font-size: 28px;
	font-weight: strong;
}
.print {
	display: none;
	height: 100%;
	width: 0px;
}

Beispeil 1:

Code: Alles auswählen

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
        <title>Website Titel</title>
	<link rel="stylesheet" type="text/css" href="css/format.css" media="screen"> 
	<link rel="stylesheet" type="text/css" href="css/format_p.css" media="print"> 

</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
  <tr>
        
    <td class="text">CMS_CONTAINER[1]</td>
        
    <td class="text">CMS_CONTAINER[2]</td>
    </tr>
   
    <tr class="text">
        
    <td class="print">CMS_CONTAINER[3]</td>
        
    <td class="print">CMS_CONTAINER[4]</td>
    </tr>
</table>
</body>
</html>

Beispiel 2:

Code: Alles auswählen

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
        <title>Website Titel</title>
	<link rel="stylesheet" type="text/css" href="css/format.css" media="screen"> 
	<link rel="stylesheet" type="text/css" href="css/format_p.css" media="print"> 

</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
  <tr>
        
    <td class="text">CMS_CONTAINER[1]</td>
        
    <td class="text">CMS_CONTAINER[2]</td>
    </tr>
   
    
  <tr class="print"> 
    <td class="textbold">CMS_CONTAINER[3]</td>
        
    <td class="textbold">CMS_CONTAINER[4]</td>
    </tr>
</table>
</body>
</html>

Du kannst diese Beispiele als ZIP-File unter der folgenden URL herunterladen:

http://www.thilo-sommer.de/PHPMyFAQ/ind ... 12&lang=de

in diesem Sinne.....viel spaß beim Experimentieren !

vige1000 · Beitrag von **vige1000** » Di 29. Jun 2004, 08:00

Klappt super.

Aber meine mit Javascript realisierte Navigationsleiste wird auch ausgedruckt. Wie kann ich dieses unterbinden?

Danke im Voraus!