CSS und Drucken

Status
Nicht offen für weitere Antworten.

crashx

Erfahrenes Mitglied
Hallo

Ich habe kleinere probleme was das Drucken einer HTML Seite angeht.
Irgendwie habe ich nicht ganz verstanden wie das gehen soll.

Hier mein ansatz:

CSS:
Code:
html, body{
  margin: 0 auto;
  padding: 0px;
  border-left: 0px;
  text-align: left;
  background-color: #FFFFFF;
  font-family: tahoma;
  min-height: 101%;
  overflow: auto;
}
img{
  border: 0px;
}
div.content{
  margin: 0 auto;
  padding: 10px;
  border: 0px;
  width: 600px;
  text-align: left;
  float: left;
}
div.logo{
  margin: 5px 0 20px 0;
  border: 0px;
  width: 600px;
  text-align: right;
  float: left;
}
div.bottom{
  margin: 10px 0 10px 0;
  padding: 4px 0 10px 0;
  border-top: 1px solid #999999;
  width: 300px;
  float: left;
}


p{
  margin: 0 auto;
}
div.design0{
  margin: 0 0 10px 0;
  padding: 0px;
  border: 0px;
  width: 580px;
  font-size: 14px;
  float: left;
}
div.design1{
  margin: 0 0 10px 10px;
  padding: 0px;
  border: 0px;
  width: 580px;
  float: left;
}
div.design2{
  margin: 0 10px 10px 10px;
  padding: 0px;
  border: 0px;
  width: 390px;
  float: left;
}
  div.design2_img{
    margin: 0 0 10px 0;
    padding: 0px;
    border: 0px;
    width: 180px;
    text-align: right;
    float: left;
  }
div.design3{
  margin: 0 0 10px 0;
  padding: 0px;
  border: 0px;
  width: 380px;
  float: left;
}
  div.design3_img{
    margin: 0 10px 10px 10px;
    padding: 0px;
    border: 0px;
    width: 190px;
    text-align: left;
    float: left;
  }
div.design4{
  margin: 0 0 10px 10px;
  padding: 0px;
  border: 0px;
  width: 580px;
  float: left;
}
  div.design4_img{
    margin: 0 0 10px 10px;
    padding: 0px;
    border: 0px;
    width: 290px;
    text-align: left;
    float: left;
  }
div.design5{
  margin: 0 0 10px 10px;
  padding: 0px;
  border: 0px;
  width: 580px;
  float: left;
}
  div.design5_img{
    margin: 0 0 10px 10px;
    padding: 0px;
    border: 0px;
    width: 580px;
    text-align: center;
    float: left;
  }
div.design6_img{
  margin: 0 0 10px 10px;
  padding: 0px;
  border: 0px;
  width: 580px;
  text-align: center;
  float: left;
}
div.design7{
  margin: 0 0 0 10px;
  padding: 0px;
  border: 0px;
  width: 580px;
  float: left;	
}
  div.design7_img{
    margin: 0 0 10px 0;
    padding: 0px;
    border: 0px;
    width: 193px;
    float: left;
  }

Und dazu die PHP:
PHP:
<?php
include('com/connect.php');
echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
echo '<html>';
  echo '<head>';
    echo '<link href="css/print.css" rel="stylesheet" type="text/css" media="all" />';
  echo '</head>';
  echo '<body>';
    echo '<div class="content">';
      echo '<div class="logo"><img src="images/logo.jpg" border="0"></div>';
        if(isset($_GET['print'])){
		  $string = $_SERVER['REQUEST_URI'];
          $string1 = explode('/', $string);
          $string2 = explode('?', $string1[2]);
          $string3 = explode('=', $string2[1]);
          $string = $string3[1];
        }
        $sql = "SELECT * FROM `content`
		        WHERE `allocate` = '".mysql_real_escape_string($string)."'
		        ORDER BY `pos` ASC
			   ";
		$result = mysql_query($sql);
		while($row = mysql_fetch_array($result)){
		  if($row['class'] == 'design0'){
			echo '<div class="'.$row['class'].'" style="'.$row['style'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
		  }
		  if($row['class'] == 'design1'){
			echo '<div class="'.$row['class'].'" style="'.$row['style'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
		  }
		  if($row['class'] == 'design2'){
			echo '<div class="'.$row['class'].'" style="'.$row['style'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
			echo '<div class="'.$row['class'].'_img">';
			  echo '<img src="thumb/thumb_'.$row['img0'].'">';
			echo '</div>';
		  }
		  if($row['class'] == 'design3'){
			echo '<div class="'.$row['class'].'_img">';
			  echo '<img src="thumb/thumb_'.$row['img0'].'">';
			echo '</div>';
			echo '<div class="'.$row['class'].'" style="'.$row['style'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
		  }
		  if($row['class'] == 'design4'){
			echo '<div class="'.$row['class'].'" style="'.$row['style'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
			echo '<div class="'.$row['class'].'_img" style="margin: 0 0 10px 10px;">';
			  echo '<img src="thumb/thumb_'.$row['img0'].'">';
			echo '</div>';
			echo '<div class="'.$row['class'].'_img" style="text-align: right; width: 280px;">';
			  echo '<img src="thumb/thumb_'.$row['img1'].'">';
			echo '</div>';
		  }
		  if($row['class'] == 'design5'){
			echo '<div class="'.$row['class'].'" style="'.$row['style'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
			echo '<div class="'.$row['class'].'_img">';
			  echo '<img src="thumb/thumb_'.$row['img0'].'">';
			echo '</div>';
		  }
		  if($row['class'] == 'design6'){
			echo '<div class="'.$row['class'].'_img">';
			  echo '<img src="thumb/thumb_'.$row['img0'].'">';
			echo '</div>';
		  }
		  if($row['class'] == 'design7'){
			echo '<div class="'.$row['class'].'">';
			  echo '<div class="'.$row['class'].'_img" style="text-align: left;">';
			    echo '<img src="thumb/thumb_'.$row['img0'].'">';
			  echo '</div>';
			  echo '<div class="'.$row['class'].'_img" style="text-align: center;">';
			    echo '<img src="thumb/thumb_'.$row['img1'].'">';
			  echo '</div>';
			  echo '<div class="'.$row['class'].'_img" style="text-align: right;">';
			    echo '<img src="thumb/thumb_'.$row['img2'].'">';
			  echo '</div>';
			echo '</div>';
		  }
		}
	    echo '<div class="bottom">';
		  echo '<a href="'.$_SERVER['HTTP_REFERER'].'">';
            echo '<img src="images/ico_back.jpg" alt="Zurück">';
          echo '</a>';
          echo '&nbsp;';
          echo '<a href="javascript:window.print()">';
            echo '<img src="images/ico_print.jpg" alt="Seite Drucken">';
          echo '</a>';;
        echo '</div>';
        echo '<div class="bottom" style="text-align: right;">';
          echo '<img src="images/www_img.jpg">';
        echo '</div>';
	echo '</div>';
  echo '</body>';
echo '</html>';
?>

Mein Problem nun ist, das wenn man Drucken will es nur eine Seite Druckt.
Auch wenn man die Option "Druckvorschau" verwendet, es nur eine Seite anzeigt und der Rest vom Inhalt einfach nicht.

Ich verstehe das im momment nicht ganz.

Anbei noch die Browser ansicht der normalen seite und der Seite welche sich nach dem betätigen des Drucken links öffnet.
 

Anhänge

  • print_html.jpg
    print_html.jpg
    120,8 KB · Aufrufe: 17
  • print_print.jpg
    print_print.jpg
    112,2 KB · Aufrufe: 17
Hi,

kannst du bitte mal den geparsten PHP-Code, also den vom Browser ausgegebenen HTML-Code zeigen, denn mit dem Aufruf der PHP-Variante lässt sich hier nichts anfangen:

Code:
Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: Access denied for user 'ODBC'@'localhost' (using password: NO) in D:\xampp\htdocs\\testfiles\codephp\test_crashx.php on line 19

Warning: mysql_real_escape_string() [function.mysql-real-escape-string]: A link to the server could not be established in D:\xampp\htdocs\\testfiles\codephp\test_crashx.php on line 19

Warning: mysql_query() [function.mysql-query]: Access denied for user 'ODBC'@'localhost' (using password: NO) in D:\xampp\htdocs\\testfiles\codephp\test_crashx.php on line 22

Warning: mysql_query() [function.mysql-query]: A link to the server could not be established in D:\xampp\htdocs\\testfiles\codephp\test_crashx.php on line 22

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in D:\xampp\htdocs\\testfiles\codephp\test_crashx.php on line 23
mfg Maik
 
Geparster Code der Seite.

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <link href="css/layout.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
      function fenster(winname,wintitel,breite,hoehe) {
     var links=screen.width/2-breite/2;
     var oben=screen.height/2-hoehe/2;
     NewWin = window.open(winname, wintitel, "width="+breite+",height="+hoehe+",top="+oben+",left="+links+",toolbar=0,location=0");
      }
</script>
    <title></title>
  </head>
  <body>
    <a name="top" id="top"></a>

    <div class="holder">
      <div class="top"></div>
      <div class="navigation">
        <div class="nav_box">
          <a href="startseite.php">Startseite</a>
        </div>
        <div class="nav_box">
          <a href="events.php">Events</a>

        </div>
        <div class="nav_box_sub">
          <a href="hochzeit.php?sub=Events">Hochzeit</a>
        </div>
        <div class="nav_box">
          <a href="_galerie.php">Galerie</a>
        </div>
      </div>

      <div class="content">
        <div class="design0" style="font-size: 14px;">
          <b>Hochzeit</b>
        </div>
        <div class="design1" style="font-size: 12px;">
          <p style="text-align: justify;">
            Aenean leo ligula, porttitor eu, consequat vitae,
            eleifend ac, enim. Aliquam lorem ante, dapibus in,
            viverra quis, feugiat a, tellus. Phasellus viverra
            nulla ut metus varius laoreet. Quisque rutrum. Aenean
            imperdiet. Etiam ultricies nisi vel augue. Curabitur
            ullamcorper ultricies nisi. Nam eget dui.
          </p><!---->
        </div>

        <div class="design7">
          <div class="design7_img" style="text-align: left;">
            <a href="#" onclick=
            "javascript: fenster('pcview.php?img=26070813484601brautpaar.jpg&amp;i=img0','Picture view 1.0',600,500)">
            <img src="thumb/thumb_26070813484601brautpaar.jpg"></a>
          </div>
          <div class="design7_img" style="text-align: center;">
            <a href="#" onclick=
            "javascript: fenster('pcview.php?img=26070813485003brautpaar.jpg&amp;i=img1','Picture view 1.0',600,500)">
            <img src="thumb/thumb_26070813485003brautpaar.jpg"></a>
          </div>

          <div class="design7_img" style="text-align: right;">
            <a href="#" onclick=
            "javascript: fenster('pcview.php?img=26070813485404brautpaar.jpg&amp;i=img2','Picture view 1.0',600,500)">
            <img src="thumb/thumb_26070813485404brautpaar.jpg"></a>
          </div>
        </div>
        <div class="design1" style="font-size: 12px;">
          <b>Untertitel</b>
        </div>

        <div class="design1" style="font-size: 12px;">
          <p style="text-align: justify;">
            Aenean leo ligula, porttitor eu, consequat vitae,
            eleifend ac, enim. Aliquam lorem ante, dapibus in,
            viverra quis, feugiat a, tellus. Phasellus viverra
            nulla ut metus varius laoreet. Quisque rutrum. Aenean
            imperdiet. Etiam ultricies nisi vel augue. Curabitur
            ullamcorper ultricies nisi. Nam eget dui.
          </p><!---->
        </div>
        <div class="design6_img">
          <a href="#" onclick=
          "javascript: fenster('pcview.php?img=26070813500605brautpaar.jpg&amp;i=img0','Picture view 1.0',600,500)">
          <img src="thumb/thumb_26070813500605brautpaar.jpg"></a>
        </div>

        <div class="design4" style="font-size: 12px;">
          <p style="text-align: justify;">
            Li Europan lingues es membres del sam familie. Lor
            separat existentie es un myth. Por scientie, musica,
            sport etc, litot Europa usa li sam vocabular. Li
            lingues differe solmen in li grammatica, li
            pronunciation e li plu commun vocabules. Omnicos
            directe al desirabilite de un nov lingua franca: On
            refusa continuar payar custosi traductores. At solmen
            va esser necessi far uniform grammatica, pronunciation
            e plu sommun paroles. Ma quande lingues coalesce, li
            grammatica del resultant lingue es plu simplic e
            regulari quam ti del coalescent lingues. Li nov lingua
            franca va esser plu simplic e regulari quam li existent
            Europan lingues. It va esser tam simplic quam
            Occidental in fact, it va esser Occidental. A un
            Angleso it va semblar un simplificat Angles, quam un
            skeptic Cambridge amico dit me que Occidental es.
          </p><!---->
        </div>
        <div class="design4_img" style="margin: 0 0 10px 10px;">
          <a href="#" onclick=
          "javascript: fenster('pcview.php?img=27070812500603brautpaar.jpg&amp;i=img0','Picture view 1.0',600,500)">
          <img src="thumb/thumb_27070812500603brautpaar.jpg"></a>
        </div>

        <div class="design4_img" style="text-align: right;">
          <a href="#" onclick=
          "javascript: fenster('pcview.php?img=27070812501102brautpaar.jpg&amp;i=img1','Picture view 1.0',600,500)">
          <img src="thumb/thumb_27070812501102brautpaar.jpg"></a>
        </div>
        <div class="clear">
          &nbsp;
        </div>
        <div class="bottom">
          &nbsp;<a href="/empty/hochzeit.php?sub=Events"><img src=
          "images/ico_top.jpg" alt=
          "Zum Seitenanfang"></a>&nbsp;<a href=
          "_print.php?print=hochzeit.php"><img src=
          "images/ico_print.jpg" alt=
          "Seite Drucken"></a>&nbsp;<a href=
          "_pdf.php?pdf=hochzeit.php&amp;sub=Events"><img src=
          "images/ico_pdf.jpg" alt="Seite Drucken"></a>

        </div>
        <div class="bottom" style="text-align: right;">
          <img src="images/www_img.jpg">
        </div>
      </div>
      <div class="news">
        <div class="news_box" style=
        "font-size: 14px; margin: 4px 0 0 0;">
          <b>News</b>

        </div>
        <div class="news_ext">
          25.07.2008
        </div>
        <div class="news_ext" style="text-align: right;">
          <a href="read_news.php?news=1"><img src=
          "images/ico_view.jpg" alt="News Lesen"></a>
        </div>
        <div class="news_box">
          www.sempachersee-event.ch Unsere Webpresänz wird
          aufgeschaltet. Viel spass beim durc<a href=
          "read_news.php?news=1">&nbsp;<br>

          <span style="font-size: 10px;">[ <u>mehr...</u>
          ]</span></a>
        </div>
      </div>
    </div>
  </body>
</html>

Geparster Code der Druckseite
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <link href="css/print.css" rel="stylesheet" type="text/css"
    media="all">
    <title></title>
  </head>
  <body>
    <div class="content">
      <div class="logo">

        <img src="images/logo.jpg" border="0">
      </div>
      <div class="design0" style="font-size: 14px;">
        <b>Hochzeit</b>
      </div>
      <div class="design1" style="font-size: 12px;">
        <p style="text-align: justify;">
          Aenean leo ligula, porttitor eu, consequat vitae,
          eleifend ac, enim. Aliquam lorem ante, dapibus in,
          viverra quis, feugiat a, tellus. Phasellus viverra nulla
          ut metus varius laoreet. Quisque rutrum. Aenean
          imperdiet. Etiam ultricies nisi vel augue. Curabitur
          ullamcorper ultricies nisi. Nam eget dui.
        </p><!---->

      </div>
      <div class="design7">
        <div class="design7_img" style="text-align: left;">
          <img src="thumb/thumb_26070813484601brautpaar.jpg">
        </div>
        <div class="design7_img" style="text-align: center;">
          <img src="thumb/thumb_26070813485003brautpaar.jpg">
        </div>
        <div class="design7_img" style="text-align: right;">

          <img src="thumb/thumb_26070813485404brautpaar.jpg">
        </div>
      </div>
      <div class="design1" style="font-size: 12px;">
        <b>Untertitel</b>
      </div>
      <div class="design1" style="font-size: 12px;">
        <p style="text-align: justify;">

          Aenean leo ligula, porttitor eu, consequat vitae,
          eleifend ac, enim. Aliquam lorem ante, dapibus in,
          viverra quis, feugiat a, tellus. Phasellus viverra nulla
          ut metus varius laoreet. Quisque rutrum. Aenean
          imperdiet. Etiam ultricies nisi vel augue. Curabitur
          ullamcorper ultricies nisi. Nam eget dui.
        </p><!---->
      </div>
      <div class="design6_img">
        <img src="thumb/thumb_26070813500605brautpaar.jpg">
      </div>
      <div class="design4" style="font-size: 12px;">
        <p style="text-align: justify;">
          Li Europan lingues es membres del sam familie. Lor
          separat existentie es un myth. Por scientie, musica,
          sport etc, litot Europa usa li sam vocabular. Li lingues
          differe solmen in li grammatica, li pronunciation e li
          plu commun vocabules. Omnicos directe al desirabilite de
          un nov lingua franca: On refusa continuar payar custosi
          traductores. At solmen va esser necessi far uniform
          grammatica, pronunciation e plu sommun paroles. Ma quande
          lingues coalesce, li grammatica del resultant lingue es
          plu simplic e regulari quam ti del coalescent lingues. Li
          nov lingua franca va esser plu simplic e regulari quam li
          existent Europan lingues. It va esser tam simplic quam
          Occidental in fact, it va esser Occidental. A un Angleso
          it va semblar un simplificat Angles, quam un skeptic
          Cambridge amico dit me que Occidental es.
        </p><!---->

      </div>
      <div class="design4_img" style="margin: 0 0 10px 10px;">
        <img src="thumb/thumb_27070812500603brautpaar.jpg">
      </div>
      <div class="design4_img" style=
      "text-align: right; width: 280px;">
        <img src="thumb/thumb_27070812501102brautpaar.jpg">
      </div>
      <div class="bottom">
        <a href=
        "http://localhost/empty/hochzeit.php?sub=Events"><img src=
        "images/ico_back.jpg" alt="Zurück"></a>&nbsp;<a href=
        "javascript:window.print()"><img src="images/ico_print.jpg"
        alt="Seite Drucken"></a>

      </div>
      <div class="bottom" style="text-align: right;">
        <img src="images/www_img.jpg">
      </div>
    </div>
  </body>
</html>
 
Hi,

wenn ich im Druck-Stylesheet die overflow:auto-Deklaration auskommentiere, und zu Testzwecken den (zu kurz geratenen) Text im HTML-Dokument vervielfältige, werden mir in der Druckvorschau des Browsers zwei Seiten angezeigt.

Code:
html, body{
  margin: 0 auto;
  padding: 0px;
  border-left: 0px;
  text-align: left;
  background-color: #FFFFFF;
  font-family: tahoma;
  min-height: 101%;
  /*overflow: auto;*/ /* auskommentiert */
}
mfg Maik
 
Ich habe mich nun wieder dem Problem gewidmet.

Im FF 2 und Opera geht die Darstellung und der Ausdruck wie es gewünscht ist.
im Netscape hängt sich die Druckvorschau auf und dasselbe beim IE6

Vielleicht kommt irgendjemand dem Problem auf den grund.

Webseite
Im Footer der Seite das Druckersymbol benutzen um in die Druckvorschau zu gelangen.

oder direkt
Druckvorschau

CSS Datei

Um das Problem jedem zugänglich zu machen habe ich die Seite ins Netz gestellt.

Danke schon im voraus für euere Hilfe.
 
Hi,
Im FF 2 und Opera geht die Darstellung und der Ausdruck wie es gewünscht ist.
im Netscape hängt sich die Druckvorschau auf und dasselbe beim IE6
interessant, bei mir verhält es sich nämlich genau entgegengesetzt: IE lädt im Null-Komma-Nichts die Druckvorschau und FF2 hängt sich auf.

Mit deinem zuletzt gezeigten Quellcode gab es bei mir diese Probleme in keinem Browser.

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück