プロが教えるわが家の防犯対策術!

お世話になります。
CSS初心者です、ガイドブック見ながら地道に一歩一歩制作してます。
制作中にいくつかどうしても分からない壁にブチあたっています。初心者ゆえ基本的なこと聞くな!と思われる方もいらっしゃると思いますが、どうかアドバイスをお願いします。

1:div#leftmenuにCSSで配置&ロールオーバーするよう記述したボタン画像が6つ。それぞれリンクを張り、違うページに飛びたい(きっと基本的なことでしょうね...でも分からないんですスイマセン。)

2:#div rightbox-top全体背景にbackground-imageを表示したいが<h2>と<p>要素の間で表示されない空白ができる。これを解消してきちんとbackground-imageを表示させたい。

HTMLーーーーーーーーーーー

<div id="leftmenu">
<a href="" id="menu-botton01"></a>
     (省略)
<a href="" id="menu-botton06"></a>
</div>
<div id="rightmenu">
<div id="rightbox-top">
<h3>本文</h3>
<p><img src="image/001.png" alt="画像説明"></p>
<h2>見出しタイトル</h2>
<p>説明文いろいろ</p>
</div>
</div>

CSSーーーーーーーーーーー

div#leftmenu {
width:161px;
margin:3px 0px 0px 0px;
float:left;
}
#leftmenu a {
display:block;
}
#menu-botton01 {
background-image:url(../image/leftmenu-botton_03.png);
width:161px;
height:50px;
}
#menu-botton01:hover{
background-image:url(../image/leftmenu-botton2_03.png);
width:161px;
height:50px;
}
div#rightmenu {
width:639px;
float:right;
}
div#rightbox-top {
width:639px;
}
#rightbox-top h2 {
background-image:url(../image/rightbox_03.png);
background-repeat:repeat-y;
font-size:medium;
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
color:#CC9966;
width:609px;
padding-left:30px;
}
#rightbox-top h3 {
background-image:url(../image/rightbox_01.png);
background-repeat:no-repeat;
width:639px;
height:30px;
margin:0px;
text-indent:-9999px;
}
#rightbox-top p {
background-image:url(../image/rightbox_03.png);
background-repeat:repeat-y;
width:579px;
margin:0px;
height:auto;
padding:0px 30px 0px 30px;
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:small;
letter-spacing:130%;
line-height:160%;
color:#333333;
}

A 回答 (1件)

1、テキストアンカーを設定する事。


  例:<a href="" id="menu-botton01">トップページ</a>
  基本はこれ。
  CSSでテキストを消すかどうかは制作者次第。
  text-indent: -9999px; とか。

2、#div rightbox-top全体背景にbackground-imageを表示したいのに、
  なぜ、h2 と p だけにbackground-imageを掛けているのかが不明・・・
質問通りの意図だとしたら、
#rightbox-top h2 と #rightbox-top p のbackground関連を削除して、
div#rightbox-top {
background-image:url(../image/rightbox_03.png);
background-repeat:repeat-y;
width:639px;
}
とするでしょう。 あくまで、質問通りの回答なら、こういう事です。
    • good
    • 0
この回答へのお礼

お返事遅くなり申し訳ありません。
回答ありがとうございました。
1も2の質問もnaokitaさんの回答を参考にして解決しました。ありがとうございました。

お礼日時:2010/12/06 17:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!