Dreamweaver CS5 CSSの書き方

解決済

質問者：rainysun
質問日時：2011/03/10 11:30
回答数：1件

現在、Dreamweaver CS5 を使ってサイトを作成しています。

添付した画像のように、
bodyをheaderとcontentsに分け、
そのcontentsをMainAreaとSubAreaに分けております。

また、SubAreaのみを編集可能な状態で、
それ以外の箇所をテンプレートに保存して、子サイトを作成しているといった状態です。

そこで、ひとつの子ページ（pageone.html）の中で、添付画像その２のように
SubAreaいっぱいにボタンを４つ２×２の状態で敷き詰めたいと考えております。

そこで、してみたことが、
(1)修正>テンプレートプロパティにてid:をbodyからid:pageoneに変更。
(2)新規CSSルールに body#pageone #contents #SubArea ul li を追加。
(3)(2)のルール定義の中でボックス>Floatを leftを選択。

ここまでしてみたのですが、
まずは、pageoneのSubArea内のボタンがうんともすんともいいません。
（最終的に２×２にしたのですが、まずは横並びにしてみようと思い(3)をしてみたのですが・・）

どうすればよろしいでしょうか？
どうかご教授ください。

また、記載すべき情報がございましたらなんなりとおっしゃってください。

素人の質問ですが、何卒ご対応いただければ幸いです。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： naokita
回答日時：2011/03/10 20:56

そもそも、そのテンプレのbodyが、

<body id="pageone"> になっていて、
CSSで関連付けされていますよね？

各HTML,CSSソースが無いので詳細が分かりませんが、単純なソースなら

#SubArea{ float:left; width: 398px; border:1px solid gray;}
#SubArea ul{ margin: 0 4px; padding: 4px 0 0;}
#SubArea ul li{ float:left; width:195px; height:195px; margin:0; padding:0; list-style:none;}

img{ background:purple;}/* 画像代用 */

<div id="SubArea">
<ul>
<li><img width="190" height="190"></li>
<li><img width="190" height="190"></li>
<li><img width="190" height="190"></li>
<li><img width="190" height="190"></li>
</ul>
<p style="clear:left;">各数値は自分環境で調整する事</p>
</div>