> .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 などと組み合わせて使用するのでは?
http://www.ktplan.net/nyaofunhouse/untitled2.html
404 Error - FC2.com
アップロードされたファイルの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 }を削除すれば収まります。
http://www.ne.jp/asahi/minazuki/bakera/html/css/render#position
レンダリング - ばけらの CSSリファレンス
う〜ん、inokuniさんの指摘であってるんですが、それから変更が見られない(未だにtopやleftの設定がされていない)んで、もし今もアドバイスを待たれているのであれば、まずはinokuniさんの示されたURLで学んで書き換えてください。
#本件とはまったく関係ないんですが、リンクの上にマウス乗せると、
#アンカータグの中身が背景色と文字色が同化して見えませんよ。
GEARさま、ありがとうございます。
positionは、当初absoluteで位置指定していた時の名残で、紛らわしいので、すべて削除したファイルを、別のファイル名でアップしました。
GEARさま、ありがとうございます。
http://www.ktplan.net/nyaofunhouse/untitled3.html
この場合でも、状況は変わりません。
よろしくお願いいたします。
http://www.htmq.com/style/position.shtml
position−スタイルシートリファレンス
原因を1つ指摘すると、コンテンツがきちんと構造化されていないことが原因です。
「strongで書く言葉」がある範囲はnewsという指定がありますが、
「トップ画像や、主なページへのナビゲーション」の部分はcontensの大きなくくりがあるだけで、newsと同レベルの範囲指定がありません。
ここをnewsと同様に指定すれば、
すなわちdivでくくり名前をつけてposision指定をすれば、直ります。(実証済み)
(ただ…この現象はおそらくIEのバグだと思います。)
しかし…posision指定そのものに、表現上無理があるようにも感じます。できれば全体をtableで…と思うんですけど。
それは余計なお世話ですね。失礼。
madyさま、ありがとうございます。
おかげさまで、なんとか解決しました!
http://ktplan.net/nyaofunhouse/untitled5.html
CSSの使い方を教えてくれるサイトや、参考書のどれをみても、「位置指定=positon」とまず書いてあって、最初はそれでやってみたのですが、今回の構造の場合、position指定ではフッターの設定はおそらく無理、floatを使うしかない、と気づくところまではたどりついたのですが。詰めが甘かったです。
助かりました。
>しかし…posision指定そのものに、表現上無理があるようにも感じます。できれば全体をtableで…と思うんですけど。
本当に、テーブルタグのネストなら、あっという間にできるのに・・・
理由は、
http://d.hatena.ne.jp/nyaofunhouse/20030723#p1
もしお時間があれば、ご覧ください。
それにしても・・・CSSはイバラの道です。
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の仕様で、どうにもならないものなのでしょうか?