- ベストアンサー
横リスト
『<?xml version="1.0" encoding="utf-8"?>』を追加すると、横リストが縦になってしまいます。 お手数ですが、よろしくお願いいたします。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
私自身ちょっと理由の分からない所があったので、経過を見ていたのですが、URLを消されてしまったようなので、お邪魔します。 OKWaveの禁止事項に「■会員自身の運営するサイト・ブログ等を開示する投稿」 http://help.okwave.jp/okwave/beginner/prohibition.html と言うのが有りまして、別にそういうつもりではない物でも削除されます。 私は消す消さないがあると、アレは良くてコレはダメの線引きが難しくなりますし、OKWaveのキッチリ運営しているところは評価してますので、削除自体はあまり気にされないでくださいね。 ご質問については （１）フッターのテキストリンク、関連施設のリンクが縦になる (1)-1 早々に回答していただいているNO.2、No.4さんの解説の通り、widthを削除すれば横に並びます。 ただ別の修正を（cssファイルの中の#box～#box a:hoverまで全て削除）してしまったんですね。 「#box a:link」と「#box a:hover」のwidthだけを削除しましょう。 #box a:link { color: #66ccff; margin: 0px; padding: 0px; ←（width: 100%; だけを削除） text-decoration:none; } #box a:hover { color: #66ccff; margin: 0px; padding: 0px; ←（width: 100%; だけを削除） border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FF0000; } (1)-2 #footer a:linkと#footer a:hoverはwidthだけ削除したんですね。 これによって 「トップページ｜～～｜パワーチェアーフットボールとは？」 「国際ルール｜～～｜問い合わせ」が横に並んだと思います。 ただ「国際ルール｜～～｜問い合わせ」のマウスオーバーした時の赤アンダーラインが出ていないと思います。 htmlファイルを見ると国際ルールからの部分が「 <ul id="footerul2">」となっている為のようです。 気になるなら、footerul2はmargin-top: 20px;とその他のマージンを0にしているだけなので、思い切ってhtmlファイルの中の「 id="footerul2"」を削除し「<ul>」としていただければ赤アンダーラインが出るようになります。 見た目は変わりません。 （２）「練習日程」「試合日程」がサイドバーの下にもぐりこむ件 私の環境（Win2k:IE6.0）ではブラウザの幅を狭くすると 、「練習日程」「試合日程」がサイドバーの下にもぐりこむのですが他の方ではならなかったでしょうか。一応こちらも書いておきます。 ここが私自身理解できていないのですが、大枠の990pxが成り立っていないようです。 body990pxの中に#containarのwidth100%がありますが、これを修正すれば直るようです。 #containar { margin: 0px; padding: 0px; width:990px; ←（width:100%;を990pxにする） } ＜ここは余談ですが body990pxの中のコンテナwidth100%がなぜ990pxにならないのか、どなたかに教えていただきたいくらいです。 コンテナの中身はのsidebar160pxとmargin30px・#main800pxで計990pxのはずなのですが。またIE6互換モードでフロートにマージン設定するとマージンが倍になるのですが、サイドバーのマージンは30pxのままで、練習日程（#pra）の左マージン10pxは倍の20pxになっているなどよく分からない表示がいろいろです。＞ ここからはご質問とは関係ありませんが、無料カウンターは他のものではいけないのでしょうか。 カウンターに隠しリンクとして仕込まれているものに、altで「人妻・出会い・出会い系・セフレ・」などとキーワードが入っていたものですから。 これはSEOの為にクライアントサイト（出会いサイトなど）へのリンクとキーワードを仕込んでいるもので、今回は画像に貼ってますが、場合によっては小さな文字の一文字に貼っている場合もあります。 カウンターを設置したサイト運営者も知らないまま、クライアントサイトへのリンクとキーワードを貼られてしまいます。 もちろん簡易アクセス解析などの便利な機能もついているので、承知の上で設置しているのなら構わないと思いますが、質問者さんのサイトのテーマとは、あまりにかけ離れたキーワードでのリンクだったので少し気になりました。よけいな指摘であったならご容赦ください。 アクセス解析ならGoogle Analyticsが無料で機能も十分だと思いますよ。
その他の回答 (6)
- abril
- ベストアンサー率69% (388/560)
> 消しましたけど横になりません。 …そうですか。 （参照しているbay.cssはオリジナルのままの様ですが、現在はまだ質問者様のローカルで修正した結果が直らない、という事ですよね） 私のローカルの環境に HTMLファイルと参照されているbay.cssのみをダウンロードして、IE6.0 on Windows XPで確認する限りは、先程から回答しております様に#box a:linkと#box a:hoverから"width: 100%;"を削除しただけで横並びになります。ですのでこれ以上は答えようがないですね。第三者には所詮「質問者様から提供された限られた情報の範囲で同一と”思われる”環境」の元でしか検証はできないので。 一度、index2.htmlの<body>の中を<ul class="boxul">～</ul>の部分のコードのみにした上で、IE6.0での表示結果を検証してみたらいかがですか？もしそれで横並びになる様であれば、親要素のどこかがまずい（私の環境ではそうではないという答えが出てしまいますけど、上記で申し上げた通り何かの条件が完全に同一にはなっていないのかも知れませんから。）ということになりますから、直近の親要素から順番に外側に向かって少しづつコードを復活させて検証を繰り返して行けば犯人（不具合の原因）に辿り着く事ができるかも知れません。地道ですが、確実な方法です。
- abril
- ベストアンサー率69% (388/560)
> 修正しましたら、フッターは直ったんですが「関連施設」の横リストが縦のままです。なぜでしょうか？ …（困惑）それは、質問者様が、CSSの「関連施設」のリストに適用する部分のプロパティを修正するのを忘れているからだ思いますが… ---------------------------------------------------------------------- #box a:link { （省略） width: 100%; } #box a:hover { （省略） width: 100%; } ---------------------------------------------------------------------- この部分もフッター部分のリストのリンクと全く同じ、適切でない記述をしているからです。 ここを削除すれば不具合は解消されます（検証済み）。
お礼
消しましたけど横になりません。
- abril
- ベストアンサー率69% (388/560)
ANo.2の回答者様がご指摘の通り、リストの中の<a>に対して"width: 100%;"を指定している為ですね。<a>タグはインライン要素ですので、widthプロパティは適用されません。なので、Firefox等では無効になっていますが、このモードでのIEではここが100%となっていることでコンテナブロックの幅一杯と（間違って）解釈してしまっていると思われます。ここを直せば、現在のXML宣言をした状態でも横並びになりましたよ。 <a>のdisplayプロパティをblockにしている場合はwidthの指定を入れるのが妥当なスタイルもありますが、このリストのレイアウトでは、<a>にwidthは不要でしょう。 私見ですが、XML宣言は入れる様にしています。大概のレイアウトの不具合はそのモードでも調整できるので、別に不自由した事はありません。 ※蛇足ですが、一括指定できるプロパティはできるだけ一括で指定した方が断然すっきりと見易くなりますよ。
お礼
修正しましたら、フッターは直ったんですが「関連施設」の横リストが縦のままです。 なぜでしょうか？ お手数ですが、よろしくお願いいたします。
- hoso1974
- ベストアンサー率78% (11/14)
すみません。２で回答したものです。 再度確認したら、バージョンおよび、宣言文の記述位置に関しては、私の確認ミスでした。 すみません。。。
- hoso1974
- ベストアンサー率78% (11/14)
該当のページ、HTML4.01ですよね？ XML宣言をする必要ないんじゃ。。。 ちなみに、記述場所も違います。 さらに、崩れの原因は、それじゃないです。 CSS内の「#footer a:link」および「#footer a:visited」に入っているwidth:100%あたりがくさいです。 このプロパティ消してみてください。
お礼
XHTMLですよ
- tunedriver
- ベストアンサー率23% (3/13)
答えになっているかわかりませんが、参考までに。。。 <?xml version="1.0" encoding="utf-8"?> を先頭に記述するとIEは「後方互換モード」って言うのになってしまって、せっかくちゃんと記述したCSSの解釈に誤差が生じてしまいます。 XML宣言を記述した場合とそうでない場合の違いはこれが原因だと思われます。 XML宣言は絶対に記述しなければならない状況なのでしょうか？ ちなみに「後方互換モード」に関しては http://2xup.org/log/2007/07/27-2111 のサイトが詳しかったです。 参考までにどうぞ
お礼
XML宣言は、書いた方が良いですよね？
お礼
色々ありがとうございます。 フッターのアンダーラインが出ていないのは気づきませんでした。 カウンターはどこが良いですか？
補足
修正致しましたが、フッターのアンダーラインが表示しません。 ご確認お願いします。