CSSについて教えてください。

CSSレイアウトで横並びのナビゲーションを作りました。リストをfloat:leftで横並びにしましたが、ページを印刷するときだけ、floatさせたメニューの一番右が折り返して一番左に印刷されてしまいます。
横並びのナビゲーションを作っときらいつもこうなってしまうのですが、同じような経験をした方、解消方法、問題点をご存知の方、教えていただけないでしょうか?

回答の条件
  • 1人5回まで
  • 登録:2008/03/21 12:37:13
  • 終了:2008/03/21 15:14:42

回答(2件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332008/03/21 12:54:34

ポイント35pt

CSSソースを見ていないので何とも言えませんが、OSやブラウザの種類によっても表示が崩れたりしませんか?

印刷用CSSの作成方法」にありますが、印刷用のCSSを別途用意し、@media type で切り替えてはいかがでしょうか。

作成されたコンテンツは、floatでメニューがプルダウンされるものと推察されますが、印刷時にはメニューが動く必要はないと思いますので、固定的なスタイルを割り当てておけばよいと思います。

id:moriamko44728

なるほどそうなんですね。ありがとうございます。

試してみます。

2008/03/21 15:14:21
id:wen000 No.2

wen000回答回数134ベストアンサー獲得回数82008/03/21 13:35:01

ポイント35pt

印刷用CSSを作ってみてはいかがでしょうか。

<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

のような形式でヘッダに書いて、あとは通常のCSSと同じように書けばOKです。


http://d.hatena.ne.jp/aratako0/20061208/p1

http://www.stylish-style.com/csstec/hi-level/print-css.html

書き方についてはこのあたりを参考にするとよいかと思います。

id:moriamko44728

ありがとうございます。試してみます。

2008/03/21 15:14:22
  • id:wen000
    メニューとかならあえて消しちゃってもいいかもしれませんね。
    僕は印刷用はヘッダとかは
    display:none;
    で消して、本文のみ表示にしてます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません