dreamweaver5.5

質問

ホームページを作る練習をしています。windows７でdreamweaver5.5で製作中ですが、

http://dogezagumi.web.fc2.com/

これを作っているのですが、横並びのナビのところの『home』の左側に複合で余白11ピクセルを
設定したのに、余白ができずに左側に詰まったままです。
それと『HPからのご注文はこちらから』の部分にfloatをrightに設定したのですが、これも
右に寄りません。
どうしたらできるのでしょうか？

回答No.3

naokita · ベストアンサー

#2です。

#2回答の
＞width: auto; /* ←ここね。 width: 708x; */
訂正：　width: 708px;

＞708という数字はどこから出てくるのですか？
Ａ、
そのグローバルナビゲーションの、
全ての (li(107px) + margin-right(11px)) * 6個 ＝ 708px じゃないのかな！！
こういう計算（設計）をしないとfloatの場合は崩れますよ。（標準モードでの計算）

個人的には、
最後のliのmargin-rightは無意味だと思うので、
上書きで「0」にして、総幅からその分引きますけどね。　＝ 697px
そうすると、ピッタリセンターになる。

-------------

<p>&nbsp;</p>　　こんな無駄な事はしない！ CSSでスペースを作れば良いだけ。

-------------

＞ホームページを作る練習をしています。
Ａ、
これ以上教えると勉強になりませんので、ご自分で試行錯誤しましょう。

お礼

何度もありがとうございます。
何とかできました。
ありがとうございました。

回答No.2

naokita

#navi {
height: 34px;
margin-left: auto;
margin-right: auto;
width: auto; /* ←ここね。 width: 708x; */
}

/* ↑ここのautoを708px以上の数値に変更。
全体を狭くしてセンターにすれば良いだけです。
#naviではなくulでも良いのです。
#さんの場合のfloat leftの際に更にleftを指定するのは互換性的にはご法度です・・・ */

＞それと『HPからのご注文はこちらから』の部分
Ａ、
何でもかんでもfloatする必要はないのでは？？？
単に右寄せなのだから・・・ 無意味な<br><br>もNGです・・・

<p style="text-align:right; padding-bottom:16px;"><a href="#"><img width="156" height="28" alt="ご注文" src="img/to_order.gif"></a></p>

補足

ありがとうございます。
すいません、ちょっとわからなかったのが、708という数字はどこから出てくるのですか？

回答No.1

nana_coco

こんばんは。

メニューの余白ですが右に11ピクセルの余白指定になってますよ。左の指定にしたいなら下記CSSを訂正されてみてください。

#navi ul li {
float: left;
margin-left: 11px;　←rightになってます。
list-style-type: none;
}

『HPからのご注文はこちらから』のimg部分は何も指定されてないようですよ？
私の見逃しの場合はごめんなさい。