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の文字が縦書きになる
-
floatすると一部、段になってし...
-
背景画像をセットしたh1にmargi...
-
Firefoxで表示できるgifファイ...
-
スタイルシートで画面を縦に2...
-
WEBサイト作成:初心者です...
-
固定幅で3カラムの記述方法を教...
-
footerのmarginが適用されません
-
loat: right;はリンク文字の横...
-
ロールオーバーで画像がずれな...
-
CSSでborderの長さを指定、また...
-
CSSがなぜかfont-sizeだけ効か...
-
ボックスを中央配置したいです。
-
css初心者 フレックスボックス...
-
htmlでのfloatを解除すると 親...
-
画像内リンクについて
-
入力フォームとセレクトボック...
-
Media Queries 4 で 非推奨とな...
-
form input テキストを上下中央...
-
【HTML】【CSS】【Swiper】 元...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報