謎でもなんでもなく、まったくの技術不足なのですが、教えてください。
よろしくお願いします。
初めて、テーブルを使わず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;
}
としか書いてないのですが。。。
うまく説明できずにすみません。
年末でお忙しいと思いますがよろしくお願いします。
No.3ベストアンサー
- 回答日時:
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>
この回答への補足
gura。様
ありがとうございあmす。
おわかりのように左メニューまではなんとかCSSの指定どおりになっていますが、右のメインの部分がなんともおかしいです。
メイン画像は右寄せに指定しているはずなのにー(多分)
フォントの色指定もフッタも全然です。
なにがどこが悪くて、どうやったらいいんでしょう。。。
本当にすみません。
No.1
- 回答日時:
↑
たぶんこんな感じの標準的なデザインを想定してるのですよね。
右と左が逆かなとは思いますが、上記のサイトも
フルCSSレイアウトのサイトです。
具体的にはどういう状態ですか?
背景色が適用されないということでしょうか?
「float: right」を外すと、色指定だけは正確に表示されると
いう状態でしょうか。
参考URL:http://www.alistapart.com/
この回答への補足
yamak様
よろしくお願いします。
そうです。
標準的なデザインです。
現在は pageContent 以下がまったくCSSがきかない状態です。
pageContentにあたる右側のものがまったくそのまんまであがっています。
左メニュー部分まではOKなのに…。
こんな説明でわかりますか???
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ASP.NETでプレーンなページに文...
-
Ajaxで文字列を表示したいです。
-
Excel VBAでのIE操作でクリック...
-
HP作成に於いて、スマホでのサ...
-
VBAでの素数の求め方
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
html/cssの、navを2段にする...
-
HTML属性での「""」 「''」違い
-
CSS、width100%でもできる余白
-
カラープレーンってなんですか?
-
css 横並びのナビゲーションバ...
-
<h1>、<h2>と<p><div>の行間を...
-
インラインフレーム内の表示位...
-
<table>の高さ固定。情報増加時...
-
番号付きリスト(<Ol><Li>・・...
-
配列の要素をまとめて比較したい
-
HTMLタグのDL DT DDを使ってli...
-
html <li>の中の文字一部に色を...
-
htmlの<ol>タグで、数字などを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ASP.NETでプレーンなページに文...
-
pythonでのカーソル移動がずれる
-
cnt <= (others => '0'); の意...
-
Excel VBAでのIE操作でクリック...
-
検索結果がツリー状に表示され...
-
VBAでの素数の求め方
-
秀丸で複数行コメントアウトを...
-
質問です。 新規登録ボタンが全...
-
chromedriverのver-upで動作不...
-
safariで見るとページ上部に余...
-
Firefoxで別ページのアンカーリ...
-
行頭から全角で3文字位さげた...
-
プログラマーの方に質問です。 ...
-
背景が動くWEBページの作り方に...
-
css リンクの色が全部変わって...
-
Ajaxで文字列を表示したいです。
-
同じIE8なのに機種によってmarg...
-
携帯サイトの背景色
-
VBA : QueryTableでのスクレイ...
-
htmlの文字が縦書きになる
おすすめ情報