CSSの勉強をしているのですが、「子要素」が「親要素」より大きい場合の、フッターの設定の仕方がわかりません。具体的には、ファイルをアップロードしました。http://www.ktplan.net/nyaofunhouse/untitled2.htmlこのレイアウトの場合、一見うまく行っているように見えるのですが、中央の「リンク」部分にマウスを当てると、フッターがあがってきてしまいます。この場合、どのように処理したらよいのでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2003/08/03 11:33:12
  • 終了:--

回答(4件)

id:inokuni No.1

いのくに回答回数1343ベストアンサー獲得回数212003/08/03 11:54:14

ポイント20pt

> .bottombar{ text-align: center; clear: both; border-top: 20px solid #f6c; position: relative; width: 100% }

> .contents { background-color: #fff; float: left; margin-right: 2%; margin-bottom: 2%; position: relative; width: 580px }

> .main { top: 80px; left: 0px }

> .news { background-color: #ff9; float: right; margin-top: 0pt; margin-bottom: 3%; padding: 1em; position: relative; width: 300px; overflow: hidden }

> .sidebar { color: #000; font-size: 85%; background-color: #0cf; float: left; padding-top: 10em; padding-bottom: 10em; position: relative; width: 120px }

position の使い方が誤っているような気がします。

top や left などと組み合わせて使用するのでは?

id:sasada No.2

sasada回答回数1482ベストアンサー獲得回数1332003/08/03 12:28:13

ポイント10pt

 アップロードされたファイルのUrlは上記であってますでしょうか?

 (拡張子を.htmから.htmlに変えました)

 今手元にあるパソコンが旧式のため、ちょっと古いバージョンのブラウザで閲覧してみました。

 IE5.5では、「リンク:訪問済み」、「リンク:未訪問」で再現します。

 「H2で書く言葉リンク」のリンクにカーソルを合わせると元に戻りますね。

 Mozilla 1.3では、再現しませんでした。

 Opera7.0では、再現しませんでした。

 どうやら、リンク(というかアンカー)の上にカーソルを置いたとき、領域の再計算をして相対配置(position: relative)な要素を再配置しているようです。

 この現象は、ある意味IEのバグか、仕様の解釈の差かもしれません。

 ゆっくりCSSの仕様を読んでみないと判断できませんが。。

 とりあえずの対処としましては、、、

 スタイルシートの記述で、a:hover { color: #f60; font-weight: bold; background-color: #f00 }を削除すれば収まります。

id:nyaofunhouse

inokuniさま、sasadaさま、早速の回答、ありがとうございます。

「とほほ」は勿論よ〜く読んでいます・・・。

他にもCSS関連のサイトで有名なところはほとんど

回ったと思います。

質問項目に挙げたページで(あ、ちなみにhtmlはきちんと書いてありますヨ)意図しているのは、

<div.topbar>

<div.main>

<div.bottombar>

という構造で、

<div.main>の内部は、左右に

<div.sidebar>と<div.contents>に分割され、

<div.contents>の右側にさらに<div.news>を配置したいと考えています。

こうした場合、子要素を左右に振る際に最初は

.sidebar{position:absolute; left:0px}

.contents{position:absolute; right:0px}

(IEではrightは6.0からですが)と考えたのですが、

IEでは、position:absolute;と定義した瞬間に、親要素<div.main>に対してではなく、bodyに対しての絶対位置指定になってしまう上、その下の<div.bottombar>も<div.main>を無視して上に上がってきてしまいます。

仕方ないのでfloatで処理できないかと試行錯誤してみた結果が今回質問させていただいた

http://www.ktplan.net/nyaofunhouse/untitled2.html

なのです。

これはIEの仕様で、どうにもならないものなのでしょうか?

2003/08/03 13:47:49
id:GEAR No.3

GEAR回答回数33ベストアンサー獲得回数02003/08/03 13:53:45

ポイント10pt

http://www.ne.jp/asahi/minazuki/bakera/html/css/render#position

レンダリング - ばけらの CSSリファレンス

う〜ん、inokuniさんの指摘であってるんですが、それから変更が見られない(未だにtopやleftの設定がされていない)んで、もし今もアドバイスを待たれているのであれば、まずはinokuniさんの示されたURLで学んで書き換えてください。

#本件とはまったく関係ないんですが、リンクの上にマウス乗せると、

#アンカータグの中身が背景色と文字色が同化して見えませんよ。

id:nyaofunhouse

GEARさま、ありがとうございます。

positionは、当初absoluteで位置指定していた時の名残で、紛らわしいので、すべて削除したファイルを、別のファイル名でアップしました。

GEARさま、ありがとうございます。

http://www.ktplan.net/nyaofunhouse/untitled3.html

この場合でも、状況は変わりません。

よろしくお願いいたします。

2003/08/03 14:06:25
id:mady No.4

mady回答回数86ベストアンサー獲得回数02003/08/03 14:45:31

ポイント40pt

http://www.htmq.com/style/position.shtml

position−スタイルシートリファレンス

原因を1つ指摘すると、コンテンツがきちんと構造化されていないことが原因です。

「strongで書く言葉」がある範囲はnewsという指定がありますが、

「トップ画像や、主なページへのナビゲーション」の部分はcontensの大きなくくりがあるだけで、newsと同レベルの範囲指定がありません。

ここをnewsと同様に指定すれば、

すなわちdivでくくり名前をつけてposision指定をすれば、直ります。(実証済み)

(ただ…この現象はおそらくIEのバグだと思います。)

しかし…posision指定そのものに、表現上無理があるようにも感じます。できれば全体をtableで…と思うんですけど。

それは余計なお世話ですね。失礼。

id:nyaofunhouse

madyさま、ありがとうございます。

おかげさまで、なんとか解決しました!

http://ktplan.net/nyaofunhouse/untitled5.html

CSSの使い方を教えてくれるサイトや、参考書のどれをみても、「位置指定=positon」とまず書いてあって、最初はそれでやってみたのですが、今回の構造の場合、position指定ではフッターの設定はおそらく無理、floatを使うしかない、と気づくところまではたどりついたのですが。詰めが甘かったです。

助かりました。

>しかし…posision指定そのものに、表現上無理があるようにも感じます。できれば全体をtableで…と思うんですけど。

本当に、テーブルタグのネストなら、あっという間にできるのに・・・

理由は、

http://d.hatena.ne.jp/nyaofunhouse/20030723#p1

もしお時間があれば、ご覧ください。

それにしても・・・CSSはイバラの道です。

2003/08/03 15:11:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません