CSSでヘッダーを固定にしたサンプル

CSSでヘッダーを固定にしたサンプル

ヘッダーを固定にしたサイトってCSS HappyLifeさんとかが有名だと思いますが、そんな感じにヘッダーを固定にサンプルを作ってみました。

IE6も対応なので、解説していきたいと思います。

demo page

…ここからが続き

CSSでヘッダーを固定にしたサンプルの解説

今回固定する部分はココになります。

CSSでヘッダーを固定にしたサンプル

XHTML

<div id="header">
<h1><a href="/" title="CSSに関する事を中心にWebサイト制作に関する情報を掲載しているCSS Lecture"><img src="/common/images/logo_top.png" alt="CSS Lecture" width="178" /></a></h1>
<!--/ #header--></div>

htmlは普通の記述で大丈夫です。

CSS

* html body {   
    background: url(null) fixed;   
}

IE6にposition:fixedが効くようにbody要素上記ソースを記述しておきます。

/* header要素
----------------------------------------------------------- */
div#header	{
	width: 100%;
	padding: 20px;
	background: #000 url(../images/bg/header.gif) repeat-x;
	border-bottom: 1px solid #CCC;
	color: #FFF;
	position: fixed;
	top:0;
	left:0;
}
* html div#header    {   
    position: absolute;   
    top: expression(eval(document.documentElement.scrollTop+0));
}
div#header h1	{
	width: 800px;
	margin: 0 auto;
}

* html div#headerに記述してある部分がIE6対応部分ですね。
これに付いてはCSS : positionの「absolute」「relative」「fixed」のリファレンスで説明していますので、そちらをご覧下さい。

残りの部分に関しては、普通にCSSでレイアウトをしているだけです。

Comments

MIYA

MIYA

山下MOSOさん。

その現象自分も後日気が付きいろいろ試してみたんですが、解決策が見つからず諦めてしまいました…
力になれずにすみません。。。

2010年04月26日 00:07

山下MOSO

山下MOSO

はじめまして。
いつも参考にさせていただいる初心者です。

今回、このヘッダーを固定するCSSを使ってみているのですが、メインにYoutubeの動画とかGoogleの広告バナーが入った状態でスクロールすると、動画やバナーがヘッダーよりも上にかぶさってスクロールされてしまいます。

何か解決する方法はありますか?

2010年04月14日 13:12

MIYA

MIYA

bzbellさんこんばんわです^^

XML宣言を省いた(標準モード)時のみ有効になりますね。

XHTML 1.0 Transitional以外の事はまだ勉強段階です…
すみません;

2009年02月12日 00:03

bzbell

bzbell

こんばんわ^^

このテクはXML宣言を省いた(標準モード)時のみ有効・・・という理解で正しいですか ( ̄∇ ̄)!?

2009年02月11日 23:35

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article