Media Print/Screen
1 
Felix Riesterer
0 0 Felix Riesterer
0
0
Media Print/Screen
Hallo,
habe ein 3-Spalten-Layout und dort unter content eine Tabelle.
Diese soll per @media=print besser für den Ausdruck dargestellt werden. menu,head,foot habe ich schon ausgeblendet. Ich bekomme nur die beiden Linien unter content nicht weg. Diese werden in der Druckvorschau immernoch angezeigt. Was mache ich da falsch?
Hier mein Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>Die CampingKiste</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="print">
@page { size: landscape;}
#menu {display:none;}
#head {display:none;}
#foot {display:none;}
#content{
color:black;
padding:110px 30px 30px 30px;
margin:0 160px 0 20px;
background:#e3eedd;
</style>
<style type="text/css" media"screen">
body{
color:black;
background:#f4f9f2;
padding:0;
margin:0;
font:13px verdana, sans-serif;
text-align:justify;}
#head{
width:100%;
position:absolute;top:0;left:0;
padding:40px 0 2px 0;
margin:0;
color:white;
background:transparent;
border-bottom:1px solid black;}
#head h1{
padding:5px;
margin:0;
color:white;
background:#B7B1F5;
font:bold 18px verdana, sans-serif;
border-top:1px solid black;
border-bottom:1px solid black;}
#menu{
float:right;
width:110px;
background:#B7B1F5;
padding:0 5px 50px 5px;
margin:90px 10px 0 0;
border:1px solid black;}
#menu ul{
padding:0;
margin:0 0 20px 0;
list-style:none;
text-align:right;}
#menu li{
padding:0 0 2px 0;}
#menu a{
color:white;
background:#6254E4;
display:block;
width:100px;
padding:2px;
border:1px solid black;
font:bold 12px verdana, sans-serif;
text-decoration:none;
text-align:center;}
#menu a:hover{color:#008000;background:#e3eedd;}
#menu p{
font:bold 12px verdana, sans-serif;
text-align:center;
padding:5px;
margin:0;}
#content{
color:black;
padding:110px 30px 30px 30px;
margin:0 160px 0 20px;
background:#e3eedd;
border-left:1px solid black;
border-right:1px solid black;}
#content h2{
margin:0 0 10px 0;
padding:2px 0 2px 5px;
font:bold 18px verdana, sans-serif;
#content h3{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 14px verdana, sans-serif;
border-left:8px solid #9bc88c;
border-bottom:1px solid #9bc88c;}
#content h4{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 12px verdana, sans-serif;
border-left:6px solid #9bc88c;
border-bottom:1px solid #9bc88c;}
#foot{
clear:right;
color:white;
background:#9bc88c;
padding:5px 30px 5px 0;
margin:0;
font:bold 12px verdana, sans-serif;
text-align:right;
border-top:2px solid black}
#foot p{margin:0;padding:0;}
}
</style>
</head>
<body>
<div id="head">
<h1>Die CampingKiste</h1>
</div>
<div id="menu">
<p>Menu:</p>
<ul>
<li><a href="index.php?seite=versandliste.php">Versandliste</a></li>
<li><a href="index.php?seite=versanddatum.php">Versanddatum</a></li>
</ul>
</div>
<div id="content">
<?
if (isset($_GET['seite']))
{
include($_GET['seite']);
}else{include("versandliste.php");}
?>
</div>
</body>
</html>
-
Lieber Christian,
ich weiß jetzt nicht, warum das so ist, aber wenn Du den ersten Style-Bereich im Quelltext nach dem zweiten notierst, ihm auch noch ein "border: none;" spendierst, dann sind die Rahmen weg.
Im Übrigen definierst Du manche Eigenschaften mehrmals. Das solltest Du noch entrümpeln!
Und nochwas: Deine PHP-Geschichte ist ganz großer Mist!
<? if (isset($_GET['seite'])) { include($_GET['seite']); }else{include("versandliste.php");} ?>Dieses Code-Beispiel ist hochgradig gefährlich! Wenn jemand einen GET-Request fälscht, z.B. mit "http://deineseite.tld/script.php?http://www.bösedomain.tld/böses_script.php", dann includierst Du das. Damit kann man dann Deine Seite missbrauchen! Daher solltest Du mittels GET-Parameter eine Art ID oder sowas übermitteln, anhand derer dann eine der ID fest zugeordnete Script-Datei includet wird.
Beispiel:
<?php // verwende IMMER die Langform "<?php" anstatt der Kurzform "<?"! Es ist sicherer! $seite = ""; if(isset($_GET['seite'])) $seite = $_GET['seite']; switch($seite) { default: include "versandliste.php"; break; case "erster_wert": include "versanddatum.php"; break; case "zweiter_wert": include "kontaktformular.php"; break; // Andere Werte können ebenso eingebunden werden! // Ist etwas völlig unerwartetes im GET-Request, so // wird der default-Vorgang (siehe oben "default:") // innerhalb der switch()-Verzweigung angewendet. } ?>Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Vielen Dank Felix.
Es wird jetzt standardmäßig die versandliste.php aufgerufen. Wenn ich jedoch versanddatum.php anklicke, passiert nichts. Er bleibt einfach auf versandliste.php.
Zweites Problem: Die Tabelle skaliert sich nicht auf die ganze Seite, obwohl jetzt genug Platz da ist.hier mein neuer Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>Die CampingKiste</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media"screen">
body{
color:black;
background:#f4f9f2;
padding:0;
margin:0;
font:13px verdana, sans-serif;
text-align:justify;}#head{
width:100%;
position:absolute;top:0;left:0;
padding:40px 0 2px 0;
margin:0;
color:white;
background:transparent;
border-bottom:1px solid black;}
#head h1{
padding:5px;
margin:0;
color:white;
background:#B7B1F5;
font:bold 18px verdana, sans-serif;
border-top:1px solid black;
border-bottom:1px solid black;}#menu{
float:right;
width:110px;
background:#B7B1F5;
padding:0 5px 50px 5px;
margin:90px 10px 0 0;
border:1px solid black;}
#menu ul{
padding:0;
margin:0 0 20px 0;
list-style:none;
text-align:right;}
#menu li{
padding:0 0 2px 0;}
#menu a{
color:white;
background:#6254E4;
display:block;
width:100px;
padding:2px;
border:1px solid black;
font:bold 12px verdana, sans-serif;
text-decoration:none;
text-align:center;}
#menu a:hover{color:#008000;background:#e3eedd;}
#menu p{
font:bold 12px verdana, sans-serif;
text-align:center;
padding:5px;
margin:0;}#content{
color:black;
padding:110px 30px 30px 30px;
margin:0 160px 0 20px;
background:#e3eedd;
border-left:1px solid black;
border-right:1px solid black;}
#content h2{
margin:0 0 10px 0;
padding:2px 0 2px 5px;
font:bold 18px verdana, sans-serif;
#content h3{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 14px verdana, sans-serif;
border-left:8px solid #9bc88c;
border-bottom:1px solid #9bc88c;}
#content h4{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 12px verdana, sans-serif;
border-left:6px solid #9bc88c;
border-bottom:1px solid #9bc88c;}#foot{
clear:right;
color:white;
background:#9bc88c;
padding:5px 30px 5px 0;
margin:0;
font:bold 12px verdana, sans-serif;
text-align:right;
border-top:2px solid black}
#foot p{margin:0;padding:0;}}
</style><style type="text/css" media="print">
@page { size: landscape;}
#menu {display:none;}
#head {display:none;}
#foot {display:none;}
#content{
color:black;
padding:110px 30px 30px 30px;
margin:0 160px 0 20px;
background:#e3eedd;
border: none;}
</style>
</head>
<body>
<div id="head">
<h1>Die CampingKiste</h1>
</div><div id="menu">
<p>Menu:</p><ul>
<li><a href="index.php?seite=versandliste.php">Versandliste</a></li>
<li><a href="index.php?seite=versanddatum.php">Versanddatum</a></li>
</ul></div>
<div id="content">
<?php
$seite = "";
if(isset($_GET['seite'])) $seite = $_GET['seite'];switch($seite)
{
default:
include "versandliste.php";
break;case "erster_wert":
include "versanddatum.php";
break;}
?>
</div>
</body>
</html>-
Lieber Christian,
Es wird jetzt standardmäßig die versandliste.php aufgerufen.
das war ja so beabsichtigt. Auch von Dir in Deiner ersten Variante.
Wenn ich jedoch versanddatum.php anklicke, passiert nichts. Er bleibt einfach auf versandliste.php.
Sei bitte so gut und informiere Dich über die Funktionsweise einer switch-Anweisung!
Zweites Problem: Die Tabelle skaliert sich nicht auf die ganze Seite, obwohl jetzt genug Platz da ist.
Da kann ich jetzt nur raten, da im Quelltext keine Tabelle enthalten ist, ich somit auch keine ansehen kann...
Deine Tabelle hat keine CSS-width? Probiere mal eine Prozentangabe bei width aus. Vielleicht hilft das schon.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo,
danke nochmal. habe es mit switch hinbekommen. Auch der Width:100% hat im Mozilla funktioniert. Nur der IE will nicht. Habe den Code mal mit Tabelle aus dem IE extrahiert und gepostet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>Die CampingKiste</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media"screen">
body{
color:black;
background:#f4f9f2;
padding:0;
margin:0;
font:13px verdana, sans-serif;
text-align:justify;}#head{
width:100%;
position:absolute;top:0;left:0;
padding:40px 0 2px 0;
margin:0;
color:white;
background:transparent;
border-bottom:1px solid black;}
#head h1{
padding:5px;
margin:0;
color:white;
background:#B7B1F5;
font:bold 18px verdana, sans-serif;
border-top:1px solid black;
border-bottom:1px solid black;}#menu{
float:right;
width:110px;
background:#B7B1F5;
padding:0 5px 50px 5px;
margin:90px 10px 0 0;
border:1px solid black;}
#menu ul{
padding:0;
margin:0 0 20px 0;
list-style:none;
text-align:right;}
#menu li{
padding:0 0 2px 0;}
#menu a{
color:white;
background:#6254E4;
display:block;
width:100px;
padding:2px;
border:1px solid black;
font:bold 12px verdana, sans-serif;
text-decoration:none;
text-align:center;}
#menu a:hover{color:#008000;background:#e3eedd;}
#menu p{
font:bold 12px verdana, sans-serif;
text-align:center;
padding:5px;
margin:0;}#content{
color:black;
padding:110px 30px 30px 30px;
margin:0 160px 0 20px;
background:#e3eedd;
border-left:1px solid black;
border-right:1px solid black;}
#content h2{
margin:0 0 10px 0;
padding:2px 0 2px 5px;
font:bold 18px verdana, sans-serif;
#content h3{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 14px verdana, sans-serif;
border-left:8px solid #9bc88c;
border-bottom:1px solid #9bc88c;}
#content h4{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 12px verdana, sans-serif;
border-left:6px solid #9bc88c;
border-bottom:1px solid #9bc88c;}#foot{
clear:right;
color:white;
background:#9bc88c;
padding:5px 30px 5px 0;
margin:0;
font:bold 12px verdana, sans-serif;
text-align:right;
border-top:2px solid black}
#foot p{margin:0;padding:0;}}
</style><style type="text/css" media="print">
@page { size: landscape;}
#menu {display:none;}
#head {display:none;}
#foot {display:none;}
#content{
color:black;
padding:110px 30px 30px 30px;
margin:0 160px 0 20px;
background:#e3eedd;
border: none;
width:100%;}
</style>
</head>
<body>
<div id="head">
<h1>Die CampingKiste</h1>
</div><div id="menu">
<p>Menu:</p><ul>
<li><a href="index.php?seite=versandliste.php">Versandliste</a></li>
<li><a href="index.php?seite=versanddatum.php">Versanddatum</a></li>
</ul></div>
<div id="content">
<h2>Versandliste</h2>
<table border='1'>
<td><b>Renr.</b></td><td><b>Vorname</b></td><td><b>Nachname</b></td><td><b>Strasse</b></td>
<td><b>PLZ</b></td><td><b>Ort</b></td><td><b>Artikelnr.</b></td><td><b>Menge</b></td><td><b>Artikelbezeichnung</b></td>
<tr>
<td>240002</td><td>Franz-Josef</td><td>Rasche</td><td>Schmerlecker Dorf 25</td><td>59597</td><td>Erwitte</td><td>N22.0111.00</td><td>1.000</td><td>230 Volt Keramik Heizung</td></tr>
<tr>
<td>240003</td><td>Alfred</td><td>Kandziora</td><td>Südallee 2</td><td>49716</td><td>Meppen</td><td>F136102</td><td>1.000</td><td>Alu-Stützbock-Set</td></tr>
<tr>
<td>240004</td><td>Sönke</td><td>Kahrs</td><td>huttfletherweg 4</td><td>21720</td><td>steinkirchen</td><td>N22.4387.00</td><td>1.000</td><td>12 V Keramik-Heizlüfter</td></tr>
<tr>
<td>240005</td><td>Kathrin</td><td>Dietzsch</td><td>Kranichweg 12</td><td>18356</td><td>Barth</td><td>N22.4387.00</td><td>1.000</td><td>12 V Keramik-Heizlüfter</td></tr>
<tr>
<td>240006</td><td>Matthias Trunk</td><td>PROFICOM GmbH / Hr. Trunk</td><td>Zeppelinstraße 43a</td><td>97074</td><td>Würzburg</td><td>N22.0111.00</td><td>1.000</td><td>230 Volt Keramik Heizung</td></tr>
</table></div>
</body>
</html>-
Lieber Christian,
Auch der Width:100% hat im Mozilla funktioniert. Nur der IE will nicht.
welcher IE? IE6 oder IE5?
Ich kann zwischen der Anzeige von Mozilla und IE6 keinen Unterschied feststellen...
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
welcher IE? IE6 oder IE5?
Ich kann zwischen der Anzeige von Mozilla und IE6 keinen Unterschied feststellen...
IE6. Es geht wie gesagt um die Druckvorschau.Beim IE6 wird rechts die Artikelbezeichnung etwas abgeschnitten.
by Christian
-
-
-
-
Moin!
Es wird jetzt standardmäßig die versandliste.php aufgerufen. Wenn ich jedoch versanddatum.php anklicke, passiert nichts. Er bleibt einfach auf versandliste.php.
Hier liegt dein Problem:
<ul>
<li><a href="index.php?seite=versandliste.php">Versandliste</a></li>
<li><a href="index.php?seite=versanddatum.php">Versanddatum</a></li>
</ul>Du fragst in der Switch-Anweisung nach "erster_wert", übergibst aber im $_GET versanddatum.php. Das kann er nicht finden und macht deshalb den default-Fall.
MfG,
Juan
-
-