このhtml,cssでどこがおかしいか分かりません

質問

お世話になります。
CSS初心車です。参考書など見ながらhtmlとCSSを作成してみましたが、
レイアウトが崩れてしまいます。CSSのほうに問題があるとは思うのですが、初心者な者でいまいちどこが間違っているのか分かりかねます。どうかご教授くださらないでしょうか。
問題はdiv#rightmenuにあると思います。
rightmenuの中にさらにrightbox-top/rightbox-inside/rightbox-buttomと3つのdiv分けをしており、それぞれbackground-image指定してコンテンツの多さによってリピートしていく背景(ボックスのような画像)を制作したいです。
ところが、以下のような指定をするとおかしなところがたくさん出てきました。
(1)headerとrightmenu全体の間に20pxほどの隙間ができる。
(2)rightbox-topとrightbox-insideの間、同じくrightbox-insideとrightbox-buttomにも20pxほどの隙間ができる。
(3)rightbox-insideのbackground-imageが適用されない。

さらに言うとFirefoxやSafariで確認するとレイアウトは上記のような問題があるにしろ、そこそこレイアウト崩れはありませんが、DWで作業しているともうひどいレイアウト崩れが発生しています。自分だけではどうしても解決できなくてみなさんに力に頼ざるを得ませんでした。どうかお願いします。

●html
<div id="rightmenu">
<div id="rightbox-top">
<h3></h3>
</div>
<div id="rightbox-inside">
<p><img src="images/index-main-image01.jpg"></p>
<p><img src="images/index-main-image02.jpg"></p>
<p class="text"> 本文いろいろp>
<a href="result.html" id="index-button01"></a>
<a href="contact.html" id="index-button02"></a>
</div>
<div id="rightbox-buttom">
<h4></h4>
</div>
</div>
</div>

●CSS
div#rightmenu {
width:650px;
float:right;
margin:0px;
}
div#rightbox-top {
width:650px;
}
#rightbox-top h3 {
background-image:url(../images/rightmenu-top.png);
background-repeat:no-repeat;
width:650px;
height:20px;
}
#rightbox-inside {
background-image:url(../images/rightmenu-inside.png);
background-repeat:repeat-y;
width:650px;
}
#rightbox-inside p img {
float:left;
padding-left:40px;
}
#rightbox-inside p.text {
margin-right:30px;
padding-bottom:10px;
width:400px;
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:10px;
letter-spacing:130%;
line-height:180%;
color:#333333;
float:right;
}
#rightbox-buttom {
width:650px;
clear:both;
}
#rightbox-buttom h4 {
background-image:url(../images/rightmenu-buttom.png);
background-repeat:no-repeat;
width:650px;
height:20px;
margin:0px;
}

回答No.3

naokita · ベストアンサー

naokitaです（補足への回答）
当初の質問内容が解決したら一旦閉めた方が良いようです。
ついでに言えば、１回に３項も質問しない方が誰かが回答付けてくれる可能性が高いでしょう。　NO.2の補足は当初の質問から外れるようなので、この回答にて最終にします。
------------
その前に、
（３）の部分が、それなら崩れる可能性があるので、
float枠には、widthの幅設定をしましょう。
それが、ウェブサイトの設計って事なので、
拡張性を残しつつも、
後から増築・改築しなくて済むような設計をした方が良いでしょう。

paddingで左右の隙間も変更しているようですが、
width幅と左右のpadding幅も計算して設計する事（DTDを考慮）
------------
前回答の<h3></h3><h4></h4>を空にしないって事と同じで、
他のタグも空にしない事。
何故、～ a {text-indent:-9999;}を利用するのか？
って事の１つの要因でもあります。
つまり、
ブラウザによりますが、<a></a> が空だからって事。

前回答でも背景画像は前面があってこその背景と書いたはず！
空なのだから背景表示どころか、クリックすら出来ない・・・
逆に言えば、クリック領域さえ作ればCSSで固定幅にもできるし背景も作れる。

HTMLが無ければCSSは使えないって事。
CSSやJSは、HTMLのオプションでしかない。
逆に言えば、HTMLが正しければ、JSやCSSで好きなように出来るって事です。
つまり、不正なHTMLでは使い物にならないし、
アンカーテキストがなければ、Googleでも解釈できない。

main-image-button01:hover
プロでも↑こんな風に書く人もいますが、
疑似クラスが使えない古いブラウザがまだ10％程度も想定できるので、
id か classを充ててからa:hoverとする方が（今はまだ）実用的でしょう。

お礼

ありがとうございます。
自分のような素人に根気強く対応してくださって、本当感謝です。無機質なネット上でアツいものを感じました。
補足してくださった点、肝に銘じてがんばっていきます。
ありがとうございました。

回答No.2

naokita

naokitaです（補足への回答）
（３）ですが、clearは、回り込み解除、
もしくは、floatの終点としてセットで覚えても良いです。
まずは、画像への文章の回り込みの方法と解除も勉強して下さい。
floatカラムでのclearは、
clear:both; 、 clearfix 、 display:inline; 、 overflow など多々あって、UA対応で解釈も変わりますので、色々試して、自分の最良の方法を選択して下さい。
floatカラム＋clear設定する事で、全ブラウザ対応で背景画像が表示できる。具体的には、rightbox-inside内でfloatしているなら、rightbox-inside内でクリアー。
-------
中身は、上下の画像や背景画像は、外枠の為って事ですね。
それなら、
まずは、HTMLでの意味を考えましょう。
<h3></h3>や<h4></h4>は、その項の小見出しですから、
空にするのは、何の為の<h3><h4>なのか！？
意味の無いマークアップはしない事（一部テクニックを除く）
また、デザインだけならCSSの役目です。
　＞何か最適な方法はあるのでしょうか。
前回答の1.2.3.4で書いたはず・・・
画像の「画像文字」なら<h3><img></h3>で良いでしょう。
no-repeatの背景画像で、空要素で前面テキストが無いなら<img>にするのが妥当です。わざわざ、CSSで背景画像にする必要は無いのでは？

横枠は、縦にリピートさせるので、
div#rightmenuで全体背景にする方法もあります。
その前面の上下に透過では無い画像を置くと四角い枠になります。

主に、情報ボックスなど枠を作るケースですが、
これも何種類か方法があります（書ききれない程）
<div 真ん中のリピート横枠背景><img上辺画像>コンテンツ<img下辺画像></div>
または、
<div 真ん中のリピート横枠背景><div上辺背景画像><div下辺背景画像>コンテンツ</div></div></div>
こんな方法の方が簡単かもしれませんが、
現状の質問者さん環境で設定すると、（h3,h4無し * 幅は適当）
<div id="rightmenu">
<div id="rightbox-inside">
<div id="rightbox-inside-img"><img src="images/index-main-image02.jpg"></div>
<div id="rightbox-inside-txt"><p>文章</p><p>リンク<br>リンク</p></div>
<div id="rightbox-buttom"><img src="images/rightmenu-buttom.png"></div>
</div>
</div>

#rightmenu { width:650px; float:right; padding-top:20px;
background:url(../images/rightmenu-top.png) no-repeat;}
#rightbox-inside { padding-top:10px;
background:url(../images/rightmenu-inside.png) repeat-y;}
#rightbox-inside-img { width:240px; float:left;
text-align:right; padding:10px 10px 0 0;}
#rightbox-inside-txt { width:400px; float:left;
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:10px; letter-spacing:130%; line-height:180%; color:#333;}
#rightbox-inside-txt p { margin:0; padding:10px 50px 10px 10px;}
#rightbox-buttom { clear:both;}

※ 下辺の画像を透過しない。

または上記４行、逆でもOK（画像配置の違い）
#rightmenu { width:650px; float:right;
background:url(../images/rightmenu-inside.png) repeat-y;}
#rightbox-inside { padding-top:20px;
background:url(../images/rightmenu-top.png) no-repeat;}

お礼

ご回答ありがとうございます。
(3)に関してですが、解決しました。naokitaさんの助言を参考に以下のようにHTMとCSS書きました。親切に教えてくださり本当にありがとうございました。<h3><h4>記述せず、<img>で表示する方法は知りませんでした。こっちのほうがシンプルですね!
<div id="rightmenu">
<div id="rightbox-inside">
<div id="rightbox-inside-img">
<img src="images/index-main-image01.jpg" alt="解説"><img src="images/index-main-image02.jpg" alt="解説">
<p>本文</p>
</div>
<div id="main-image-button">
<a href="result.html" id="main-image-button01"></a>
<a href="contact.html" id="main-image-button02"></a>
</div>
<div id="rightbox-buttom"><img src="images/rightbox-buttom.jpg" alt="解説">
</div>
</div>
</div>

●CSS
#rightmenu {
width:645px;
float:right;
padding-top:20px;
background:url(../images/rightbox-top.png) no-repeat;
}
#rightbox-inside {
background:url(../images/rightbox-inside.png) repeat-y;
}
#rightbox-inside-img {
float:left;
text-align:left;
padding:10px 0 10px 35px;
}
#rightbox-inside-img p {
float:right;
width:400px;
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:11px;
letter-spacing:130%;
line-height:180%;
color:#333;
margin:0;
padding:20px 30px 10px 0px;
}
#rightbox-buttom {
clear:both;
}

ただ、迷惑ついでに新しい問題が...
テキストの下に新しく<div id="main-image-button">を作り、マウスオーバー仕様のボタンを設置しようと思っているのですが、何故かbackground-imageがまったく表示されません。
CSSは、
div#main-image-button {
width:400px;
float:right;
padding:10px 30px 10px 0;
}
main-image-button a {
display:block;
}
main-image-button01 {
width:190px;
height:50px;
background-image:url(../images/index-button01.jpg);
}
main-image-button01:hover {
background-image:url(../images/index-button01-hover.jpg);
}
main-image-button02 {
width:190px;
height:50px;
background-image:url(../images/index-button02.jpg);
}
main-image-button02:hover {
background-image:url(../images/index-button02-hover.jpg);
}
です。
これってどうしてなんでしょうか、何か基本的なことを見落としている気がするのですが...差し支えなければご助言ください。ありがとうございました。

回答No.1

naokita

＞レイアウトが崩れてしまいます。
いえ、書いた通りで表示されますよ。
崩れるというのは、特定のブラウザだけ違うって事であって、
意図した配置が出来ないって事ですよね。
間違ってるといえば、
(3)の部分と、<p>が p>になってる程度です。
但し、
CSSの基本的なmarginなど理解や使い方が曖昧ですし、
HTMLを自身で複雑化しているように思います。
--------------
(1)
#rightbox-top h3に margin:0; padding:0; 追加 or 調整。
　（空要素はNG * 下記参照）

(2)
#rightbox-inside p{ margin:0; padding:0;} を追加 or 調整

(3)
floatしてるのに、その要素内でclearしていないって事が原因です。
#rightbox-buttom は、一見clearしてるように見せてるが、
その要素の中ではなく、外でclearしちゃっています・・・
--------------
DWの作業ビューのデザインは作業する為の簡易ビューであって、
正しくレンダリングされる訳ではありません。
プレビューもDWのCS？バージョンによって違いますし。
--------------
<h3></h3>と<h4></h4>を
空っぽにして背景画像で表示しているのでしょうか？
それなら、背景は、前面があってこその背景なので、
前面が空だと背景にならず・・・（ブラウザによる）
別の方法としては、
１、背景画像を使わずに、<img>だけでよいのでは？
２、<div><h3>とブロック要素で二重にする必要も無い。
３、特に意味の薄い画像なら<div><h3>を削除して<img>のみでも良い。
４、div#rightmenu {background:url(../images/rightmenu-top.png) no-repeat; padding-top:20px;} でも良い。
--------------
<p>もブロック要素なので、中の<img>をfloatしても
<p>自体は動かないので、<p>内でimgが動くだけです。
この辺の配置設計が出来ていないようで、
background-color:yellow; または border:1px solid red;
など各ブロック要素の骨格が目視できるように作業しましょう。

<p><img src="images/index-main-image01.jpg"></p>
#rightbox-inside p img {
float:left;
padding-left:40px;
}
この使い方も無意味で、表示された画像を良く見て設定する事です。
--------------
<div id="rightmenu">内は、
マークアップの仕方によって配置方法も変わるので、
その画像類をどう解釈させたいのかによって、
HTML,CSSの書き方がガラッと変わります。

その画像が何を意味するのかにもよりますし、
png画像が透過なのか、どう見せるのかとか、
幅とか、背景色とか背景画像で良いのかimageにするかとか、
その辺がわからないので、HTML,CSSが書けず、その部分の回答は安易にできないです・・・

補足

詳しいご回答ありがとうございます。
(1)と(2)に関しては余白はなくなりました。
<h3></h3>と<h4></h4>を空っぽにして背景画像で表示しているのでしょうか？
>>その通りです。以前は適当なテキストを入力してtext-indent:-9999px指定していたのですが、このやり方は検索エンジン側からスパム行為と認識される可能性が高く、SEO的な見地からオススメできないという意見がネット上にあり（そんなレベルでないのは分かっていますが...）今回のような仕様にしたのですが...空要素はNGということですが、何か最適な方法はあるのでしょうか。

(3)こちらはまだ解決しておりません。
floatしてるのに、その要素内でclearしていないって事が原因です。#rightbox-buttom は、一見clearしてるように見せてるが、その要素の中ではなく、外でclearしちゃっています・・・
>>覚えが悪くて申し訳ありません、要素内でclearするというのはどういうことでしょうか。#rightbox-inside {}でしょうか。それとも#rightbox-inside p.text {}でしょうか。素人なので、不明な発言をしていると思いますがご容赦ください。

rightmenu部分は背景に視覚的にもボックスのような画像（透過png）を乗せて、そこにコンテンツを表示させたいと考えています。rightbox-inside{}のコンテンツ量はページによっても変わるので<img>配置ではなくbackground-imageで指定し、repeat-yしていきたいです。
{background:url(../images/rightmenu-top.png)と
{background:url(../images/rightmenu-buttom.png)はそのボックス画像のいわゆる上辺と下辺の「枠」部分です。
具体的なイメージとしては下記サイトの「今週の元気」「お知らせ」「ピックアップニュース」の表示ボックスのようなことがしたいです。
http://c1000.jp/news/

ご親切なご指摘ありがとうございます。