てんぽ: [bbs]の擬似フレーム修正版

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

[bbs]の擬似フレーム修正版

2005年05月19日(木)

共有テンプレート[bbs]のoverflow擬似フレームには(ブラウザの)不具合が多いので、背景画像でフレームっぽい見た目にするためのCSSを用意しました。 フレームのような機能はなくなりますが、一部のブラウザにおける以下の不具合が解消されます。

  • HomeEndPgUpPgDnでページ内移動できない
  • マウスホイールによるスクロールが効かない
  • ページ内リンクが効かない
  • オートスクロールが効かない
  • ページ内リンクで飛んだあとに「戻る」を押しても以前の位置に戻らない
  • [admin]が閲覧領域より少し外側にずれる

変更したい人はCSSの以下の部分を探して書き換えてください。

overflow擬似フレーム(デフォルト)
/* レイアウト(擬似フレーム) */
body{
	line-height:1.3;
	padding:0;
	margin:0;
	_overflow:auto; /* 指定しないとIEで余計な縦スクロール。
	                   指定するとOperaとNetscapeで表示されない。
	                   よってIEのみに有効なアンダースコアハックorz */
}

#main{
	background:url(http://blog-imgs-27.fc2.com/m/b/m/mb/back.gif);
	background-color:#d2b48c;
	width:87%;
	height:100%;
	position:absolute;
	left:13%;
	top:0;
	overflow:auto;
}

#menu{
	background:#ffffff;
	width:13%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	overflow:scroll;
}

/* IEでh1ボックスのセンタリング */
(以下略)
background似非フレーム(変更後)
/* レイアウト(似非フレーム) */
body{
	background-image:url(http://blog-imgs-27.fc2.com/m/b/m/mb/back2000.png); /* 背景画像でフレームっぽく */
	background-repeat: repeat-y;
	line-height:1.3;
	padding:0;
	margin:0;
}

#main{
	margin-left:104px;
}

#menu{
	width:82px;
	position:absolute;
	left:0; 
	top:0;
}

h1#blog-title{
	position:relative !important;
	top:-120px !important;/* 画像の高さにマイナス */
	margin-bottom:-120px !important;/* 画像の高さにマイナス */
	z-index:1 !important;
}

ul#admin{
	position:relative !important;
	z-index:2 !important;
}

/* IEでh1ボックスのセンタリング */
(以下略)

「IEでh1ボックスのセンタリング」以降を変更する必要はありません。 それ以降に出現するh1#blog-titleおよびul#adminの変更箇所は「レイアウト(似非フレーム)」部分の最重要規則(!important)で上書きされます。

本来なら後ろのほうの!important群を使わずとも#mainにposition:relativeを指定するだけで済むはずでしたが、何故かIEでおかしなことになるのでこうしました。 この解決法を見つけるまでにずいぶん時間がかかってしまった。

#12
カテゴリ:共有テンプレート

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/12-0260706d

<<新ブロック変数追加! | 見出しレベル考>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。