ヘッダーを固定する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
やってみました。
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
コメント
コメントの投稿
トラックバック
http://frogsnote.blog.fc2.com/tb.php/47-856a0f3a