CSSを利用してレイアウトしたページを作成しています。
もう殆ど作りこんだ今になって気付いたのですが、記事本文のテキストが長くなり、印刷プレビュー時に改ページされる程度にまで伸びると、一挙にレイアウトが崩れてしまうようなのです。
こちらにつきまして回避策はありますでしょうか?
★外部CSS部分
body {
padding: 0px;
margin: 0px;
}
#container {
width: 762px;
position: relative;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
top: 0px;
}
#header {
width: 549px;
position: absolute;
left: 212px;
top: 3px;
}
#left {
width: 211px;
position: absolute;
left: 1px;
top: 0px;
}
#content_right {
width: 510px;
margin-left: 231px;
padding-top: 149px;
font-size: 0.8em;
line-height: 140%;
}
#footlink {
text-align: center;
margin: 30px 0px 40px 0px;
}
★HTML部分
<div id="container">
<div id="content_right">
<h1>h1テキスト</h1>
<h2>h2テキスト</h2>
<p>記事:この辺に印刷プレビューで改ページされるほど改行を入れた場合です</p>
<div id="footlink"><a href="#">フッダリンク</a></div>
</div>
<div id="header">ヘッダメニューとかタイトル画像とか</div>
<div id="left">左メニュー部分</div>
<div>コピーライト</div>
</div>
どうにもならないようであれば、印刷時に記事部分だけ抜き出すようなカタチにするべきなのかと考えていますが、難しそうで少し尻込みしています。
良い手立てがあるようでしたら、是非教えてください。
よろしくお願いします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
ソースはちゃんと確認していませんので頓珍漢な回答かもしれません。
印刷用のスタイルシートがあるはずです。それを活用なさってみてはいかがでしょう。甚だ簡単ではございますがアドバイス・・・。
参考URL:http://www.tagindex.com/stylesheet/page/page_bre …
ありがとうございます。
参考ページを拝見しまして試してみました。確かに改ページそのものは指定した部分でされましたが、レイアウト崩れに関しては効果が無かったようです……。
OperaとFirefoxでもプレビューをしてみたのですが、この印刷時レイアウト崩れはIEのみの問題のようでして、ちょっと諦めモードに入りつつあります(涙
引き続きまして回避策に心当たりがありましたら、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
W3Cのソースコードの検証サービ...
-
CSSで画像を同じ位置に重なり合...
-
画像内リンクについて
-
CSSがなぜかfont-sizeだけ効か...
-
CSSで背景色を下まで表示させたい
-
定義リストに下線をつけたいと...
-
z-indexで上になっている要素だ...
-
CSS:animation開始位置の設定
-
IEだとdivが横に並びません
-
画像と一緒にスライドするリン...
-
divの入れ子が上手くいきません。
-
htmlでのfloatを解除すると 親...
-
セル内のリンク文字を中央に配...
-
widthやheightの数値に単位(px...
-
Safariで、Textareaのボーダー...
-
CSSで左に画像、右にテキストを...
-
ul/liタグでのリスト表示におけ...
-
レスポンシブコードの意味なの...
-
CSS(0の単位)について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
W3Cのソースコードの検証サービ...
-
form input テキストを上下中央...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
表示倍率を変えるとレイアウト...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
【HTML】【CSS】【Swiper】 元...
おすすめ情報