- ベストアンサー
【謎】途中でCSSがきかなくなりました（泣）
謎でもなんでもなく、まったくの技術不足なのですが、教えてください。 よろしくお願いします。 初めて、テーブルを使わずcssでデザインすることになりまして勉強中です。 CSSで指定していったものが途中できかなくなりました。 タグの記述もこれでいいのか不安です。 ページはヘッダ-メイン（左メニュー+右メインページ）-フッタ という構成です。 以下のように記述して、それぞれのエリアごとに<p>や<ul><li>などを指定しています。 ------------------------------- <body> <div id="contentBody"> <div id="headArea"> </div><!-- /#headArea --> <div id="mainContentArea"> <div id="contentMenu"> </div><!-- /#contentMenu --> <div id="pageContent"> <div class="entryBody"> </div><!-- /.entryBody --> </div><!-- /#pageContent --> <div id="footArea"> </div><!-- /#footArea --> </div><!-- /#mainContentArea --> <!-- /#contentBody --> </body> ----------------------------------- CSSで指定していって、ヘッダ-メイン（左メニュー）まではうまくいったのですが、右メインページ-フッタからCSSがきかなくなりました。 pageContent からです。 構成がおかしいからでしょうか！？？？ それともCSSの記述がおかしいからでしょうか！？？？ #pageContent { margin: 0px; width: 600px; float: right; } としか書いてないのですが。。。 うまく説明できずにすみません。 年末でお忙しいと思いますがよろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
IDとclassが混用されている様ですが。参考サイト↓ http://www.tohoho-web.com/css/basic.htm#Class 意図されているページがわからないのでサンプルタグを書いてみましたので、ご参考に <html> <head> <title>Style Sheet</title> <style TYPE="text/css"> <!-- #contentBody {text-align: center; font-size: 20pt; margin: 0px;} #headArea {font-size: 14pt; margin: 10px;width: 600px;float: left;} #mainContentArea {text-align: center;font-size: 14pt; margin: 0px;width: 600px;float: left;} #contentMenu {color: green; font-size: 14pt; margin: 0px;float: left;} #pageContent {margin: 0px;width: 600px;float: right;} .entryBody {font-style: italic; text-align: center;font-size: 10pt; margin: 10px;} #footArea {color: red; margin: 0px;width: 600px;float: right;} --> </style> </head> <body> <div id="contentBody"> contentBody </div><!-- /#contentBody --> <div id="headArea"> headArea </div><!-- /#headArea --> <div id="mainContentArea"> mainContentArea </div><!-- /#mainContentArea --> <div id="contentMenu"> contentMenu </div><!-- /#contentMenu --> <div id="pageContent"> pageContent </div><!-- /#pageContent --> <div class="entryBody"> entryBody </div><!-- /.entryBody --> <div id="footArea"> footArea </div><!-- /#footArea --> </body> </html>
その他の回答 (3)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
test.htmを見に行ってみましたが main.cssの中の #contentMenu li { … } の最後の部分で余計な"｛"があります。 多分コレのせいだと思います。
お礼
BLUEPIXYさん、ありがとうございます。 余分な"｛"をとったらcssがききました。 よかったです。 助かりました。 ありがとうございます！！
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<div id="contentBody"> に対する </div> が無いように思えますが
補足
すみません。 本来のものには入っています。 質問に記述するときに書き忘れました。
- yamak
- ベストアンサー率66% (6/9)
http://www.alistapart.com/ ↑ たぶんこんな感じの標準的なデザインを想定してるのですよね。 右と左が逆かなとは思いますが、上記のサイトも フルCSSレイアウトのサイトです。 具体的にはどういう状態ですか？ 背景色が適用されないということでしょうか？ 「float: right」を外すと、色指定だけは正確に表示されると いう状態でしょうか。
- 参考URL：
- http://www.alistapart.com/
補足
yamak様 よろしくお願いします。 そうです。 標準的なデザインです。 現在は pageContent 以下がまったくCSSがきかない状態です。 pageContentにあたる右側のものがまったくそのまんまであがっています。 左メニュー部分まではＯＫなのに…。 こんな説明でわかりますか？？？
補足
gura。様 ありがとうございあｍす。 おわかりのように左メニューまではなんとかCSSの指定どおりになっていますが、右のメインの部分がなんともおかしいです。 メイン画像は右寄せに指定しているはずなのにー（多分） フォントの色指定もフッタも全然です。 なにがどこが悪くて、どうやったらいいんでしょう。。。 本当にすみません。