ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|FROGs note

ホームページ制作に役立つ無料素材やWEBデザインに関する自分のためのメモ帳です。

  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|Frogs note
  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|素材
  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|本の紹介

 | HOME | 

スポンサーサイト

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

ヘッダーを固定するCSS

ヘッダーを固定したくて探したところCSSできるとのこと

やってみました。

http://frogsdesign.web.fc2.com


★html
<div id="header">
<h1>固定したいヘッダー要素</h1>
<!--/ #header--></div>


★CSS

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

/* header要素
----------------------------------------------------------- */
div#header {
width: 100%;
background: url(../img/top/bg_top.png) repeat-x;
position: fixed;
top:0;
left:0;
}
* html div#header {
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
}


※その下の要素にはpadding-topで調節すればよいです。


参考URL:http://www.css-lecture.com/log/css/047.html

スポンサーサイト

 | HOME |