[↑PageTop]
«
»
ブログ検索 タグ検索
申し訳ありません。 該当する記事は削除、又は、公開中止の可能性があります。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comment

Post

管理者にだけ表示を許可する

2010/09/27 20時頃

Next Page Link

ページナビを導入して、移動しやすくなった気がする。

そうなると、更にさわりたくなる悪い癖が出る。(こうして、さんざん触って結局もとに戻す事が何度有った事か・・・

今回は、[前ページ] と、[次ページ]へのリンクを、ブログの表示範囲外に常に固定位置で表示してやろう!という変更。

ページの上部へ移動する [↑PageTop] を表示しているから簡単さ!と思っていたが、それが甘かった・・・。

実は以前の[↑PageTop]は、画面の左下の位置からの絶対位置指定で表示されていた。
要するに、画面の幅がブログの幅より狭くなった場合、ブログの中にめり込んで表示されていたのだ。
再下段だったため、あまり気にならなかったので、そのまま採用となった。

しかし、今回は、画面の中央。画面の幅が狭いとブログにめり込み見づらい。
幅が広すぎると、画面の端っこに行ってしまって使いづらく意味がない。

画面の左上からの絶対位置では困るのだ。
しかし、位置を固定して表示するための css 設定 position : fixedでは、親となるブロックのpositionが問題となってくる。

今回は、ブログ全体を覆っているブロック要素のからの相対位置指定をしたいから、ブログ全体を覆っているブロック要素が親となるのが一番都合がよい。
しかし、その要素は、センタリングをしたい関係で、positionは、staticとして、要素の幅(width)を指定して、左右のマージン(margin)をAutoとして、常に表示領域の中央になるように指定している。

この条件では、画面の左上が基準となり、親BOXの左上からの相対位置でオブジェクトを指定出来ない。

これをなんとか、騙したいというのが今回の目標。
第1案:position : fixed の 画面幅一杯の子BOXを作り、その中に、ブログの幅より幅広い孫BOXをセンタリング配置して、孫BOXの左右にリンクを置く BOXを配置。
 これは、名案だと思った。
 しかし、一番上に表示してしまうと、透明のBOXに隠された部分は、見えるけどクリックできない領域となってしまう。

それならば!と、上記のBOX全体を z-index : -1 で、後ろに沈めた。
 これは、名案だと思った。
 ブログの操作不能領域も無くなった!やった!
 しかし、肝心の左右に配置したリンクが操作できない。背景の後ろに沈んでしまって操作不能らしい。

それならば、全てのBOXを、z-index 2 に持ち上げて、上記のBOX全体を z-index : 1 に配置したらどうなのだろうか?
 これは・・・、面倒なのでパス。

この案は、ダメだ!


あれこれ試しているときに気が付いた。
topだけ指定して、leftを指定せず、margin-leftだけ指定したら、どこに配置されるの?
なんと、親要素の左側からの相対位置指定をしたように表示された。
とりあえず、普段使っている、Opera10.xx と、IE 7 で、正しく表示されているのを確認した。
自分用だからこれでいいや。

cssの規定上は、どんな解釈が正しいのかな?
詳しく知りたいところです。
関連記事

Comment

Post

管理者にだけ表示を許可する


HOME : TOP

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