勉強したことのメモ

webプログラマが勉強したことのメモ。

上部に固定されたヘッダーメニューの作成

   

■やりたい事

ページスクロールしても上部に固定されたヘッダメニューの作る

 
■方法

メニューの要素に、下記CSSを指定。

#header {
position: fixed !important;
position: absolute;
top: 0; 
left: 0;
width: 100%;
background-color: #000;
color: #fff;
height: 100px;
}

 

■サンプル

http://sample.taitan916.info/header/

 

■その他
ヘッダの下にある要素に関しては100px分余白とっとかないと表示が被ってしまうので注意する。

 - CSS

  関連記事

IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...

レスポンシブ対応で右カラムのコンテンツを上に表示させたい

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...

ページング用CSS

div.pageNav { //これなくてもいいかも。 clear: both; ...

可変要素内の文字を丸める

可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidt ...

CSSで1つの要素に複数classを設定して画像を入れ替える

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

CSSでプロパティの初期化

CSSでmedia screen and等を指定し、特定の場合のみプロパティの無 ...

デザイン等のカラーの組み合わせを簡単に決める方法

サイト作成時にメインカラーとそれにマッチする組み合わせを考える必要があった。デザ ...

特定のブラウザのみCSS指定

FireFoxだけどうにもデザインが崩れる、 ただ他のブラウザでは希望通りのデザ ...

CSSでスタイルの優先

1つのファイルに対して複数スタイルが指定されている、 ということがたまにある。 ...

CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。 リンク時に一律させた方がよいと ...