串木野であったエギング大会にゲストで来られていたみっぴさんに会いたかったけど会えなかった@CyberMameCANです。
愛憎の天気だったのですが、大会はどうだったのでしょうか、気になります。
さてさて、
フッタは、スクロールした時コンテンツの下に繋がっていて、
上にスクロールすると一緒に上がってくるのが普通ですよね。
違う演出をしていたサイトがあったのを思い出したので、ちょっとチャレンジ。
MacのSafariでテストしています。
コンテンツ>が終わったかな・・・の後に更にスクロールしていくと、
下に隠しておいたフッタが現れる(様に見える?)サンプルをCSSで。
html
1 2 3 4 5 6 7 8 9 10 11 |
<div id="rapper"> <div id="whitebase"> <p>ダミー領域</p> </div> </div> <div id="footer"> <div id="fBox"> フッターテキスト、フッターテキスト </div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
body { margin: 0; padding: 0; } #rapper { width: 100%; background-color: #fff; margin: 0; padding: 0; } #whitebase { margin: 0 auto; padding: 0; background-color: #f0f0f0; margin-bottom: 170px; width: 940px; height: 1000px; border: 1px solid #999; } #footer { z-index: -1; width: 100%; position: fixed; bottom: 0; } #footer #fBox { margin: 0 auto; padding: 0; height: 150px; background-color: #c33; font-size: 48px; color: #fff; text-align: center; width: 940px; } |
こういうブログもありました。
- WordPressにソーシャルブックマークのアイコンを表示する
- 初めてのレスポンシブ・ウェブデザイン
- Webデザイナー検定 エキスパート 受験結果
- WordPressの翻訳プラグインGTranslateをインストールしてみた
- OctopressというRailsで作られているブログCMSをインストール
人気のあるブログ:
- 新しいgemのアップデート方法(rubygems-update)
- Coda2でscssを使うときのお供にcompassをどうぞ。
- bashでUTF-8に設定して日本語表示したり使ったり。Emacsでも。
- NginxをSSL付きで動かすために設定したこと
- Macでフォルダを結合したいとき
[…] フッターはこれ→http://blog.tstylestudio.com/2012/05/20/下までスクロールしたら隠れていたフッタが現れ/ […]
[…] フッターはこれ→http://blog.tstylestudio.com/2012/05/20/下までスクロールしたら隠れていたフッタが現れ/ […]