- 締切済み
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: ＭＳ Ｐゴシック, 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> ---------------------
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- rurino
- ベストアンサー率55% (38/68)
印刷した際何ページにもわたるような長いページでは、 左右にFloatをかけてあるものですと 改ページのタイミングで強制的に 「clear: both;」がかかった状態になります。 そのために思いもよらぬ表示になったりします。 要所要所（見出し部分など）で page-break-before を入れるとよいと思うのですが…
- salonpath
- ベストアンサー率48% (194/399)
まだ解決してなかったんですね base.cssかfg1_top.cssでoverflowつかってませんか?
お礼
まだ完成ではありませんが、 overflowをはずしての現段階では、プリントの表示が上手くいっています。 本当に助かりました。 すごく嬉しいです。ありがとうございました(^^)
補足
たびたびすみません。 以前のPrint.cssの件では、隠したいもの、文字など上手くいったのですが（ありがとうございます）、 また、ココで詰まってしまいました。 base.cssには。body枠、サイドナビ、ヘッダー部分、フッター部分をいれています。 fg1_top.cssの方に、メイン部分のみです。表の冒頭の見出しにあたる所にoverflowをいれてます。 実は、最初このfg1ページが、こうなってしまい、 わからなかったので、色々、とったり外したりして、何回かやっていたら、 ページが上手く表示されたのですが、 このページを基に複製してfg2、fg3と2ページ目、3ページ目を作ったところで、 また同じ現象におちいりました。 原因は何なのか、わからないままページ表記が直ったりしたので、 なぜ、こういうことが起きるのだろう？と、ずっと、謎だったのです（今もですが） 上手くいったfg1にも、実はまだ見出し部分にoverflowがはいっています。 ちょっとこれをとってみてどうなるのかとか、 今、fg2、fg3も作成していますので、 overflowに焦点をあわせて、色々試してみたいと思います。 本当にありがとうございました。すごく助かりました。
お礼
そうだったのですか。長いページになるときは、強制的にclear:both;がかかっちゃうのですか。 ありがとうございます。 書籍ではこういった場合の解決法がのってなく、検索しても欲しい答えにたどりつけず、 本当に困っていました。 最初おかしかったfg1ページは、今はちょうど表見出しのとこで、自動的に改行されていましたので、 あえてpage-break-before はいれなくてもいいのかもっと、躊躇してしまいました。 今、作成中の他ページに、さっそくpage-break-before を入れて様子をみたいと思います。 自分、まだ試行錯誤中のビギナーなので、作成が遅く、返事が遅れてしまうかもしれませんが、 お答えいただいて、今後の作成においても光りがさしたようです。 本当に嬉しいです。ありがとうございました。 頑張ります(^^)