- ベストアンサー
CSSで、ヘッダー、フッター、左カラムメニュー、の3要素をpositi
CSSで、ヘッダー、フッター、左カラムメニュー、の3要素をposition:fixed;（もしくは同じような動作でも可。）を実装しているサイトをご紹介いただけないでしょうか。 対応ブラウザはIE6です。 自分でも作ってみているのですが、IE6だと、 ウィンドウをリサイズした時にposition:fixed;した要素がずれたままだったり、 ウィンドウからはみ出したりしてしまいます。 多少のガタつきは許容できるのですが。。 css、、expression（ie独自機能の。）、javascriptと試しましたが万策尽きました。。 何卒、よろしくお願いします。
- reggaepunc
- お礼率50% (57/113)
- HTML
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
IE6ってposition:fixed;に対応してないんじゃなかったでしたっけ？ 「IE6 position:fixed;」で検索かけるとたくさんでてきますよ。 だからって解決策は知らないんですけど。
関連するQ&A
- cssでのヘッダー＋2カラム+フッターのレイアウトについて
こんにちは。趣味のサイトをタグ打ち＋cssで作ってるのですが どうしても上手く行かない箇所があり、ご教授頂ければ、と思い、 投稿します。 私の使用しているOSはmacOS9.2、ブラウザはバグの多いIE5.0（苦笑） です。 レイアウトとしては最近よく見かける、ヘッダー＋2カラム＋フッター のような構図にしたいのですが、この様に崩れてしまいます。 http://meikyu.pop.cx/faq/test.gif ↑この、下の方の背景がヘッダの分だけ（？）白くなってるのを なんとかしたいのですが… （横のボーダーも途中で切れてしまってますし…） 記述した、htmlファイルと、cssファイルも上げてみました↓ htmlファイル http://meikyu.pop.cx/faq/ cssファイル http://meikyu.pop.cx/faq/main.css あちこちのcssリファレンスのサイト様等を参考に、2時間近く奮闘 しましたが、解決方法が分かりません。 解決方法でなくても、うちの環境では正常に見えるよ、 という報告だけでも頂けると嬉しいです。 どうかご助言よろしくお願い致します。
- ベストアンサー
- ネットトラブル
- カラム高さ揃え+固定フッター
いつもお世話になります。 ●確認ブラウザIE6、IE7、FF、 Mac Safari FF 左側幅可変のリキッドレイアウトの中で、 div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で #footerはページ下部に固定されている、添付図の状態にしたい。 ●できてること： IE7、FFにおけるカラム高さの統一、固定フッタ ●ここができない： 1.IE6にてboxBとCの高さが揃わない（Cが足らない） 2.#wrapと#footerにすきまが空く（boxBとCの背景色がfooterの上まで来てほしいのです）（全部のブラウザにて） ★CSS /*リキッドレイアウト部分*/ * { margin:0; padding:0; } body { text-align:center; } #container { width:96%; margin-left:auto; margin-right:auto; text-align:left; } #boxA { background:#ffc; } #boxB { background:#fcc; width:100%; float:left; margin-right:-200px; } #boxB p { margin-right:200px; } #boxC { background:#ccf; width:200px; float:left; } #boxD { background:#cfc; width:100%; float:left; } /*100%固定フッタのためのCSS*/ *{ margin:0; padding:0; } html,body{ height:100%; background-color: #000000; color: #000000; } html{ overflow-y:scroll; } #container { width: 100%; position: relative; height: auto !important; height: 100%; min-height: 100%; } div#footer{ position:fixed; bottom:0; left:0; text-align:center; width:100%; } /* * * IE6 * * * */ * html, * html body{ overflow-y:hidden; } * html div#maincontents{ height:100%; overflow-y:scroll; } * html div#footer{ position:absolute; } /* カラム高さが違うものを揃える */ #wrap { overflow:hidden; } #boxB,#boxC { padding-bottom: 32768px; margin-bottom: -32768px; }
- ベストアンサー
- HTML
- ヘッダー・フッター固定HTMLに関して
ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～ 【CSS】 ～～～～～～～～ html,body {margin:0; padding:0; overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0; height: 100%; width: 100%;} body > #flashcontents {height:100％; position: absolute;} #contents { position: fixed; overflow:hidden; bottom:0; 他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。
- 締切済み
- CSS
- css外部ファイル（ヘッダ、フッタ）の書き方
素人です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> でhtmlを（テキストエディタを使って）書いています。 ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、 htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。 例えば、 －－－－－－－－－－ <style> * { margin: 0; padding: 0; } #header { position: ●●●● left: 0; top: 0; background-color:●●●● color: ●●●● width: 100%; height: 30px; z-index: 3; －－－－－－－－－－ のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。 ヘッダ内にて <link rel="stylesheet" href="ファイル名.css" type="text/css" /> を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか？ 探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。 書き方の参考サイトや、ソースの書き方を教えて下さい。 よろしくお願い致します。
- ベストアンサー
- HTML
- ヘッダー部フッター部の固定とスライドメニュー
はじめまして。 表題のように、スマホ風に、ヘッダー部、フッター部を固定とし、スライドメニューが出るようにしたいと考えています。 <div id="content" style="position:absolute;"> 本分 </div> <div id="header" style="position:fixed;"> <p>ヘッダー部 固定</p> </div> <div id="footer" style="position:fixed;"> <p>フッター部 固定</p> </div> 画像は、上記ソースを基に、フッター部とヘッタ―部を固定した状態ですが、 下記URLにあるような、スライドメニューを加えようとしているのですが、 いずれも正常に動いてくれません。 http://shibuso.github.io/side_menu_test/jquerymobile.html このスライドメニューも、複数のプラグインがあるようですが、ここ丸二日、色々なものを試していますが、いずれも失敗の連続です。 お忙しいとは思いますが、アドバイスのほど頂戴出来れば幸いです。 宜しくお願い致します。
- 締切済み
- CSS
- CSSによる3カラムレイアウト
CSSによる3カラムレイアウト 以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー | |ナビゲーション｜コンテンツ｜ウィジェット| |フッター | 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。 今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。 ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。 また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- ベストアンサー
- HTML
- ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。
- 締切済み
- CSS
- html?/css?/Javascript? でのフッター特殊な固定方
html?/css?/Javascript? でのフッター特殊な固定方法について。 こんばんは。 現在ホームページを作成中です。 そこでフッターをブラウザの下部に固定しようと思い google等で検索し見つける事が出来ました。 ソースは色々ありますが例として下記のURLで説明したく思います。 http://www.css-lecture.com/template/2009/0212/ 私の希望・やりたい事としては上記のサイトに追加内容で (1).ヘッダーをブラウザ上部に固定。 (2).ブラウザの上下を縮めた時、フッターとヘッダが重ならないよう、最小高さを指定。 (3).(2)を実装時、フッタとヘッダがある程度寄るとスクロールバーが出てくると思いますが スクロールした時にスクロールするのは内容のみ。 (フッタがブラウザ下部に隠れたとしてもスクロール時に移動してはいけない) です。 ここ最近試行錯誤しcssを書いていますが (3)を実装時に不具合が多く困っています。 ヘッダをブラウザ上部に、フッタをブラウザ下部に固定して スクロールした時、内容と同時にフッタまで上にスクロールされたり フッタを完全に固定してしまうと、ヘッダとフッタの最小間隔が指定できなかったり。 【簡易説明】 ヘッダは上部固定、フッタは下部に固定して ヘッダとフッタはブラウザの上下を縮めても重ならない様、最小値を指定し スクロールでスクロールするのは内容・記事のみ。 こんな事が可能なのかどうなのかも私の乏しい知識では判りませんので どなたか詳しい方いらっしゃいましたらご教授お願い致します。 内容・記事としてのスクロールバーと ヘッダ、フッタの最小値以上縮めた時のスクロールバーが入り組んでいる形になるので 不可能なんでしょうか・・・・。 また、もし参考サイト等がありましたら URLの誘導のみでも結構です。 何卒、宜しくお願い致します。（涙 また、乱文で大変失礼致しました。
- ベストアンサー
- HTML
- css position:fixed でヘッダとフッタを固定したい
画像のようなページを作りたいと思っています。 使用するのはテキストエディタで、htmlとcssのみです。 cssで、 #header{ background-color: #cc99ff; position:fixed; top : 0; left : 0; width:100%; height:55px; z-index:3; } #inner {background-color: #cc9900; margin: 0em 3em 3em 3em; padding: 1em; width:90%; height:90%; z-index:1; border-top:solid 2px #004427; border-bottom:solid 2px #004427;} のように書いても、IE、firefoxともに固定が無視されます。 これ以外にも、少々書き方を変えたり色々してみたのですが、固定はされても位置が崩れる（ほとんどが、ヘッダが下がって来ます。）等、上手く行きません。 原因も分からず、解決策が見つかりません。 良い方法等、お教え下さい。 よろしくお願い致します。
- ベストアンサー
- HTML
- Perlでcssを使わないで3カラムにしたい
現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか？ 横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。 お手数をおかけ致しますが、アドバイスよろしくお願い致します。
- ベストアンサー
- Perl
お礼
ありがとうございます。