• 締切済み

CSSを最近始めました。実は、2P目の印刷表記がおかしいのです。

CSSを最近始めました。実は、2P目の印刷表記がおかしいのです。 HPの画面上は、全て、見栄えを揃えましたが、いざプリントすると、2枚目の表記がおかしいです。1枚目は変な所から下が空欄になり、2枚目の上部分が空いて、2枚目にCSSで表をくんでますが、途中からきれたまま下部(2枚目の下部)で終わり、そのまま最後の3枚目にはフッター部分のみが表示されて、終わります。2枚目の表記が途中から切れて終わってしまう感じです。サファリ以外は、すべてこの表示になってしまいます。 プリント用のCSS表記がおかしいのでしょうか? 下記に、プリント用CSSでつくってあるものを記しました。 何か足りないもの、もしくは間違っていることがありましたら、教えていただきたいのですが・・・ また、対処法などはありますでしょうか? プリントCSS--------------------------------- @charset "UTF-8"; /* CSS Document */ /*print*/ @media print { body { background:#fff; color:#000; font-size:12pt; zoom:100%;/*ie*/ background-image:none; background-color:none; } .body { background:#fff; color:#000; zoom:100%;/*ie*/ background-image:none; background-color:none; } no-image { display:none; } color-txt { color:#000 !important; } table, tr, td { border-collapse:collapse; border-spacing:0; border:1px solid #666; } .wrapper, .sidenavi, .main-all, .main-light3 .footer { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .wrapper { margin: 0; padding: 0; border: 0; background: transparent; } .sidenavi { display: none; } } ---------------------------------ここまで html 冒頭--------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body,td,th { font-family: MS Pゴシック, Osaka, ヒラギノ角ゴ Pro W3; } body { background: #c5d7e5 url(..○●●○k.gif) repeat-x; margin-top: 0px; } --> </style> <style type="text/css" media="print"> <!-- body{ background:white; } --> </style> <link href="top_files/base.css" rel="stylesheet" type="text/css" media="all"> <link href="top_files/print.css" rel="stylesheet" type="text/css" media="print"> <link href="top_files/fg1_top.css" rel="stylesheet" type="text/css" media="all"> <title> ○●●○</title> ---------------------

みんなの回答

  • rurino
  • ベストアンサー率55% (38/68)
回答No.2

印刷した際何ページにもわたるような長いページでは、 左右にFloatをかけてあるものですと 改ページのタイミングで強制的に 「clear: both;」がかかった状態になります。 そのために思いもよらぬ表示になったりします。 要所要所(見出し部分など)で page-break-before を入れるとよいと思うのですが…

kote1969
質問者

お礼

そうだったのですか。長いページになるときは、強制的にclear:both;がかかっちゃうのですか。 ありがとうございます。 書籍ではこういった場合の解決法がのってなく、検索しても欲しい答えにたどりつけず、 本当に困っていました。 最初おかしかったfg1ページは、今はちょうど表見出しのとこで、自動的に改行されていましたので、 あえてpage-break-before はいれなくてもいいのかもっと、躊躇してしまいました。 今、作成中の他ページに、さっそくpage-break-before を入れて様子をみたいと思います。 自分、まだ試行錯誤中のビギナーなので、作成が遅く、返事が遅れてしまうかもしれませんが、 お答えいただいて、今後の作成においても光りがさしたようです。 本当に嬉しいです。ありがとうございました。 頑張ります(^^)

  • salonpath
  • ベストアンサー率48% (194/399)
回答No.1

まだ解決してなかったんですね base.cssかfg1_top.cssでoverflowつかってませんか?

kote1969
質問者

お礼

まだ完成ではありませんが、 overflowをはずしての現段階では、プリントの表示が上手くいっています。 本当に助かりました。 すごく嬉しいです。ありがとうございました(^^) 

kote1969
質問者

補足

たびたびすみません。 以前のPrint.cssの件では、隠したいもの、文字など上手くいったのですが(ありがとうございます)、 また、ココで詰まってしまいました。 base.cssには。body枠、サイドナビ、ヘッダー部分、フッター部分をいれています。 fg1_top.cssの方に、メイン部分のみです。表の冒頭の見出しにあたる所にoverflowをいれてます。 実は、最初このfg1ページが、こうなってしまい、 わからなかったので、色々、とったり外したりして、何回かやっていたら、 ページが上手く表示されたのですが、 このページを基に複製してfg2、fg3と2ページ目、3ページ目を作ったところで、 また同じ現象におちいりました。 原因は何なのか、わからないままページ表記が直ったりしたので、 なぜ、こういうことが起きるのだろう?と、ずっと、謎だったのです(今もですが) 上手くいったfg1にも、実はまだ見出し部分にoverflowがはいっています。 ちょっとこれをとってみてどうなるのかとか、 今、fg2、fg3も作成していますので、 overflowに焦点をあわせて、色々試してみたいと思います。 本当にありがとうございました。すごく助かりました。

関連するQ&A

専門家に質問してみよう