top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_129

ヘッドを固定:擬似フレームを組み込む ・・・ 【CSS】

 2008-07-22
 ブログのカスタマイズ
 前からしたかったこと・・・

   ◆ひとつ目は、ディレクトリ構造のサイトマップ頁 > 実装

 そして今回の

   ◆ヘッドエリアの固定
    擬似フレームでヘットエリア部分を固定すること だった

     > できたどー! (いや、たいしたことないですが)

 方法論はわかっていた。
 CSS の position:fixed; を利用してヘッドを固定し
 その下にコンテンツを置く( padding-top 指定 )


 だが思ったより格闘した。

 昨日、HTML-lint のチェックに対応すべくいろいろやっていて
 DOC宣言を HTML 4.01 Transitional にした影響か

   ・FireFox(2.0.0.16) でも
   ・Safari(3.1.2) でも すぐに実現できたのに

   ・IE(7.0.5730.11) では どうしてもうまく動かなかった。

 しかたないので DOC宣言を元の XHTML 1.0 Strict に
 戻したらうまく動いた。
   HTML-lint のチェック対応 は、この状態でがんばるか・・・

 全然たいした事ではないのですが
 お役に立つこともあるか、と 多少解説しておきます。

[実施:]
1:ソースで
  上部ヘッダ部 と 動かすボディ部を
  <div id='headarea'> <div id='bodycon'> などのように
  明確に区別しておきます

2:CSSで
 例えば次のようにして
 headarea 部分に position:fixed; を加え固定
position:fixed;
z-index:9;
background: #FFFFFF;
width: 980px;
ここで
z-index に注目 これは重なり具合の順序を設定するもので

 ・(動かす)コンテンツ部が下に滑り込むように大きい値を設定

3:bodycon 部分に position:fixed; を加え固定
padding-top: 120px;
}
などと
重なる部分の下から始まるように調整

 まぁ、これだけなんですが・・・

[注意点:]
・IE6 では効きません
前出の3ブラウザで動作確認してOKでしたが

IE6対応を本来はしなくては・・・
 (後日行います)

[課題:]
これ、いやな方もいると思うので、
見る方が選べるように近日調整します。

 サンプルは 創るmetaboy!



FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/129-fee7e1e5
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

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