
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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
クロームとサファリでスクロー...
-
【CSS】ヘッダーの高さが不明の...
-
table周辺の隙間をなくしたい。
-
border-style:solidで文字がずれる
-
CSSでfloatした要素の高さを100...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSSで背景色を下まで表示させたい
-
ボックスを中央配置したいです。
-
IEとFirefoxの見え方のずれにお...
-
入力フォームとセレクトボック...
-
テーブル内の画像をマウスオー...
-
イメージマップのhoverについて
-
モーダルダイアログでのボタン...
-
safariでの横並びリスト(List...
-
中点「・」の改行について
-
CSSで画面サイズを縮小するとレ...
-
IEでmargin:autoが効かない
-
<div>と<div>の間の10px程の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
【CSS】ヘッダーの高さが不明の...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
CSSがなぜかfont-sizeだけ効か...
-
<div>と<div>の間の10px程の...
-
htmlでheightが自動で延長
-
画像リンクの下に文字を付けた...
-
ネガティブマージン
-
table周辺の隙間をなくしたい。
-
入力フォームとセレクトボック...
-
定義リストに下線をつけたいと...
-
ライトボックスでスクロールバー
-
footer を横幅いっぱいに広げる...
-
CSSについて。このサイトの背景...
-
テーブルのセル間に余白が空い...
-
XHTML+CSS で、ブラウザごとに...
おすすめ情報