ベストアンサー

【謎】途中でCSSがきかなくなりました（泣）

2004/12/29 13:03

謎でもなんでもなく、まったくの技術不足なのですが、教えてください。よろしくお願いします。初めて、テーブルを使わずcssでデザインすることになりまして勉強中です。 CSSで指定していったものが途中できかなくなりました。タグの記述もこれでいいのか不安です。ページはヘッダ-メイン（左メニュー+右メインページ）-フッタ　という構成です。以下のように記述して、それぞれのエリアごとに<p>や<ul><li>などを指定しています。 ------------------------------- <body> <div id="contentBody"> <div id="headArea"> </div> <div id="mainContentArea"> <div id="contentMenu"> </div> <div id="pageContent"> <div class="entryBody"> </div> </div> <div id="footArea"> </div> </div>  </body> ----------------------------------- CSSで指定していって、ヘッダ-メイン（左メニュー）まではうまくいったのですが、右メインページ-フッタからCSSがきかなくなりました。 pageContent　からです。構成がおかしいからでしょうか！？？？それともCSSの記述がおかしいからでしょうか！？？？ #pageContent { margin: 0px; width: 600px; float: right; } としか書いてないのですが。。。うまく説明できずにすみません。年末でお忙しいと思いますがよろしくお願いします。

chisalin
お礼率31% (19/61)

XML
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

gura_
ベストアンサー率44% (749/1683)

2004/12/29 14:30 回答No.3

IDとclassが混用されている様ですが。参考サイト↓ http://www.tohoho-web.com/css/basic.htm#Class 　意図されているページがわからないのでサンプルタグを書いてみましたので、ご参考に <html> <head> <title>Style Sheet</title> <style TYPE="text/css">  </style> </head> <body> <div id="contentBody"> contentBody </div> <div id="headArea"> headArea </div> <div id="mainContentArea"> mainContentArea </div> <div id="contentMenu"> contentMenu </div> <div id="pageContent"> pageContent </div> <div class="entryBody"> entryBody </div> <div id="footArea"> footArea </div> </body> </html>

質問者

補足 2004/12/29 14:53

gura。様ありがとうございあｍす。おわかりのように左メニューまではなんとかCSSの指定どおりになっていますが、右のメインの部分がなんともおかしいです。メイン画像は右寄せに指定しているはずなのにー（多分）フォントの色指定もフッタも全然です。なにがどこが悪くて、どうやったらいいんでしょう。。。本当にすみません。

その他の回答 (3)

BLUEPIXY
ベストアンサー率50% (3003/5914)

2004/12/29 16:49 回答No.4

test.htmを見に行ってみましたが main.cssの中の #contentMenu li { … } の最後の部分で余計な"｛"があります。多分コレのせいだと思います。

質問者

お礼 2004/12/30 10:53

BLUEPIXYさん、ありがとうございます。余分な"｛"をとったらcssがききました。よかったです。助かりました。ありがとうございます！！

BLUEPIXY
ベストアンサー率50% (3003/5914)

2004/12/29 14:06 回答No.2

<div id="contentBody"> に対する </div> が無いように思えますが

質問者

補足 2004/12/29 14:39

すみません。本来のものには入っています。質問に記述するときに書き忘れました。

yamak
ベストアンサー率66% (6/9)

2004/12/29 14:03 回答No.1

http://www.alistapart.com/ ↑ たぶんこんな感じの標準的なデザインを想定してるのですよね。右と左が逆かなとは思いますが、上記のサイトもフルCSSレイアウトのサイトです。具体的にはどういう状態ですか？背景色が適用されないということでしょうか？「float: right」を外すと、色指定だけは正確に表示されるという状態でしょうか。

参考URL：: http://www.alistapart.com/

質問者

補足 2004/12/29 14:41

yamak様よろしくお願いします。そうです。標準的なデザインです。現在は　pageContent　以下がまったくCSSがきかない状態です。 pageContentにあたる右側のものがまったくそのまんまであがっています。左メニュー部分まではＯＫなのに…。こんな説明でわかりますか？？？

関連するQ&A

FIREFOXでのCSS表示
よろしくお願いします。 CSSのレイアウトで、よくある２カラムのオーソドックなもの左側にメニュー、右側にメインコンテンツ、上下にヘッダ・フッタ <div id="wall"> <div id="header"></div> <div id="menu"></div> <div id="main"></div> <div id="footer"></div> </div> のような構造の場合、メインコンテンツは各ページによってボリュームが違うので、wall部分もmainのボリュームにあわせて変化させたいです。 IEならば問題ないのですが、FIREFOXだとmenuやmainの部分が増えると、wallの上から重なるように表示されてしまうケースがありました。はみ出ています。このような場合、それぞれのheightの設定など、どのようにしたら良いのでしょうか？　mainの長さにあわせて最後にwallを1250pxのように具体的な長さ指定すると、見た目にはfirefoxでもうまく表示はされています（ただし、このやり方だと各ページのコンテンツの長さにあわせて、１つ１つ設定しないといけない） floatの設定なども含めて、どういった記述をすれば良いのか、どなたか教えてもらえませんでしょうか。
- ベストアンサー
- ホームページ作成ソフト
perlで3カラムにしたい (css)
perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。ｍ（＿　＿）ｍ当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定（755px）でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>
- ベストアンサー
- CSS
CSSで微妙にずれる
CSSで微妙にずれるこんにちは、最近HPを作成するようになった初心者です。あるフリーサイトのCSSを雛形としてHPを作成したのですが、（TOPとMENUとMAIN（コンテンツ）とFOOTERの４構成 MENUは左でMAINが右）ブラウザの枠の中にFOOTER部分が表示されると（上下に短いコンテンツ）微妙に左（多分３PXぐらい）に、ずれて表示されてしまいます。この様な、場合原因の部位を特定するには、どの様なアプローチを行えばよろしいのでしょうか？教えていただけるとありがたいです。ちなみに、FOOTERのHTMLは <div id="footer"> <address>Copyright © 2010 XXXXX All Rights Reserved.</address> </div> で、 CSSは div#footer { clear:both; margin:0 20px 0 20px; } です
- 締切済み
- HTML
IEの表示だけおかしい
CSSとPHPを用いて、擬似フレームのようなWebページを作成しています。ページの構成は、下記のようなヘッダ、左メニュー、右コンテンツ、フッタとなっています。 ---------------------- header ---------------------- menu　|　　Contents 　　　　| 　　　　| 　　　　| ---------------------- footer ---------------------- CSSでは、 div#header{} div#left{float:left; width:200px;} div#right{margin-left:200px;} div#footer{clear:left;} と指定しています。 Webページ内では　<div id="header">　などとしてCSSのレイアウト構成を反映させています。次に、PHPのincludeを用いてヘッダ、左メニュー、フッタは共通の外部ファイルを読み込むように指定しています。右側のコンテンツの所のみ、別々の内容を直接記述しています。以上のようにWebページを.phpとして作成し、動作確認を行いました。Opera、Firefoxでは上記のように綺麗に表示されます。 IE6では、右側のコンテンツ部が左メニューと並びません。下記のように、メニューの最下段の次のひ行から始まって表示されます。 ---------------------- header ---------------------- menu　| 　　　　| 　　　　| 　　　　-------------- 　　　　　Contents ---------------------- footer ---------------------- 以上のような症状で困っていますが、Googleで検索しても手詰まりの状態です。同じ症状を経験された方、解決策をご存知の方いらっしゃいましたらご教授ください。
- ベストアンサー
- HTML
ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> 　メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、メニューが右になってしまいます。これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？１週間くらい試行錯誤したのですが、できませんでした。お詳しい方教えてください。
- ベストアンサー
- HTML
CSSで謎の空白ができてしまいます。
最近CSSでサイトの構築をしているのですが↓のように途中で navi（パンくずリンク）とmenu＆main（メニューとメイン記事）の間に空白が出来てしまいます。 menuとmainにmargin: 0px;とpadding 0px;をしても駄目でした。どうすれば良いかご指導お願いします。 http://blog-imgs-16.fc2.com/t/e/s/testestes0101/test.png 以下ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css">  </style> </head> <body> <div class="layout"> <div class="header"> <a href="index.html"><img src="title.png" border="0"></a> </div> <div class="navi"> <a href="index.html"> トップページ </a> </div> <div class="menu"> </div> <div class="main"> </div> <div class="footer"> </div> </div> </body> </html> ※タイトル画像は消してあります。
- ベストアンサー
- レンタルサーバ・ASP
ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。それほど複雑な構成ではないシンプルなタグ構造だと思います。ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
css固定したフッターが本文と重なってしまいます
#all { height:100%; min-height:100%; } #header { left:150px; position:absolute; } .main { top:60px; left:150px; position:absolute; } #footer { left:150px; bottom:0px; position:absolute; } ------------------------------------------------------------- <div id="all"> <div id="header"> ヘッダ部 </div> <div class="main"> メインの記事 </div> <div id="footer"> フッター </div> </div> ============================================================== このように指定したのですが、ウィンドウを小さくしたり、長い文を書いたりすると、メインの記事がフッターと重なって読めなくなってしまいます。記事が短い時は、ページ全体の下部に、長い時はスクロールした一番下にくるようにしたいです。テーブルのheight指定を使えば同じような効果は得られますが、テーブルの無いレイアウトをやってみたかったので。同じような質問は発見したのですが、いい解答が見つかりませんでした。
- ベストアンサー
- HTML
FirefoxだとCSSで作ったフッターが崩れてしまいます
お世話になります。現在、CSSにて2段組にてヘッダー・メニュー・コンテンツ・フッター部分にレイアウトを切り分けてサイトを作っておりますが IEだと私が意図した通りに表示されるのですが、FireFoxだとフッター部分のレイアウトが、コンテンツ部分にかぶってしまいレイアウトがぐちゃぐちゃになってしまいます。 #cover { width: 700px; height: 100% } #menu { width: 150px; height: 100%; float: left } #main { width: 550px; height: 100%; float: right } #footer { width: 700px; clear: both } こちらが、htmlです。 <div id="cover"> <div id="main">コンテンツ</div> <div id="menu">メニュー</div> <csobj csref="a.html" h="259" occur="27" t="Component" w="700"> <div id="footer">フッター</csobj></div> </div> ※このcsobjは、Goliveのコンポーネント機能を使って１つの外部ファイルからリンクさせることによって、ヘッダー部分に変更が生じたら、全ページを一括で更新できる機能を使っています。SSI(サーバーサイドインクルード)みたいなやつでしょうか。とても困っていますので、詳しい方ぜひご教授ください。よろしくお願いいたします。
- ベストアンサー
- HTML
【HP制作】２カラムを3カラムに変更したい！
現在2カラムで運営しているサイトを3カラムに変更したいのですが、上手く出来ずに困っています。現在は、左サイドメニュー(1)、メインメニュー(2)で運営しています。ここに右サイドメニュー(3)を追加したく、下記の通りCSSに右サイドを追加したのですが、画面を確認すると、左から(1)→(3)→(2)の順番で表示されてしまいます。因みに、メインのfloatをrightに変更すると、左から(2)→(1)→(3)の順に入れ替わり、どうしても(1)→(2)→(3)の順番になりません。独学で、その場しのぎでHP作りをしてきたので、間違いに気づけずにおります。お分かりの方がいらっしゃったら、どうかよろしくお願いします。初心者レベルなので、分かり易く教えて頂けると助かります。どうぞよろしくお願いします。 ■CSS /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; } /*メイン*/ #main { float: right;　←ここを変えるとレイアウトが崩れてしまいます。 width: 700px; } /*右サイド*/　　←ここを追加しました。 #rightside { float: right; width: 200px; } /*フッター（コピーライト）*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; } ■HTML <div id="container"> </div>  <div id="main"> </div>   <div id="leftside"> </div>  　←ここを追加しました。 <div id="rightside"> </div> 
- ベストアンサー
- CSS

【謎】途中でCSSがきかなくなりました（泣）