• ベストアンサー
  • すぐに回答を!

このCSSのどこを直せばいいですか?アドバイス求ム

  • 質問No.6352005
  • 閲覧数25
  • ありがとう数2
  • 回答数1

お礼率 26% (55/210)

お世話になります。
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;
}

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 57% (1008/1745)

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;
}
とするでしょう。 あくまで、質問通りの回答なら、こういう事です。
お礼コメント
toonie

お礼率 26% (55/210)

お返事遅くなり申し訳ありません。
回答ありがとうございました。
1も2の質問もnaokitaさんの回答を参考にして解決しました。ありがとうございました。
投稿日時:2010/12/06 17:22
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ